JS_変数の使い方

06変数の使い方

JavaScriptをはじめとするプログラミング言語には変数という機能があります。繰り返し使ったり、長いデータを格納できます。

JavaScriptでは３つの宣言方法があります。

• var
• let
• const

の３つです。以下に、簡単に違いがわかる図を載せました。

詳しい違いや例を、これから一つずつ紹介します。

6-1 varについて

varは昔から存在し古いシステムでしばしば使用されています。宣言方法は以下のコードです。

var name = "山田　太郎";
console.log(name);
// >山田　太郎

上記の様にnameという変数の中に山田　太郎が格納されているためconsole.logでnameを表示させると山田　太郎が表示されます。

また、＝を用いていますが、これは数学的な意味の「等しい」という意味ではなくプログラムでは左辺に右辺の値を代入するという意味になります。

varでは上記の表にある通り再代入、再宣言が可能です。どういうことかというと

var name = "山田　太郎";
name = "鈴木　一郎";
console.log(name);
// > 鈴木　一郎

上のように再代入が可能でnameに鈴木　一郎を入れるとname変数の中身が上書きされます。

また、再宣言に関しても、

var name = "山田　太郎";
var name = "鈴木　一郎";
console.log(name);
// > 鈴木　一郎

という風になり再宣言もできるようになっています。

しかしこの「再代入」されるということは、何千行とコードが書かれているファイルの中でもしも変数名が被ってしまうと、もともとあった変数が上書きされてしまうということです。結果的にシステムが正常に動かなくなってしまう可能性があります。そのため現在ではvarはあまり用いられずlet か constが用いられます。

6-2 let について

letは再代入は可能ですが、再宣言はできません。

var と同様に再代入は以下の通りです。

let name = "山田　太郎";
name = "鈴木　一郎";
console.log(name);
// > 鈴木　一郎

name = "鈴木　一郎"の部分でnameを上書きしています。

一方でletを再宣言してみると、

let name = "山田　太郎";
let name = "鈴木　一郎";
console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

上の通りUncaught SyntaxError: Identifier 'name' has already been declaredというエラーが出ます。これはnameという名前の変数はもう定義してるよ、というエラーです。何度も述べた通り、letは再宣言することができません。変数は基本的にletで宣言するようにしましょう。

6-3 constについて

constは再代入も再宣言もできません。

constの再代入は以下の通りです。

const name = "山田　太郎";
name = "鈴木　一郎";
console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ます。同様に再宣言も、

const name = "山田　太郎";
const name = "鈴木　一郎";
console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ますね。constは再宣言も再代入もできないため定数などを宣言するときに用いられます。