【JavaScript入門】変数と定数（var、let、constの使い分け）

var宣言

var宣言の基本的な使い方は以下のとおりです。

js

var msg = 'おはよう';
console.log(msg);

実行結果

おはよう

var宣言で同じ変数名が重複した場合

var宣言で同じ変数名を2回以上宣言した場合、最後に宣言した内容で上書きされてしまうので注意が必要です。
以下の例では最初にmsg変数に「おはよう」を代入していますが次の行で「おやすみ」を代入しているので、msg変数の値が上書きされて、コンソールには「おやすみ」が表示されていることが確認できます。

js

var msg = 'おはよう';
var msg = 'おやすみ';
console.log(msg);

実行結果

おやすみ

let宣言

let宣言の基本的な使い方は以下のとおりです。
変数を宣言する場合は、一般的にvar宣言よりもlet宣言を使います。

js

let msg = 'おはよう';
console.log(msg);

実行結果

おはよう

let宣言で同じ変数名が重複した場合

let宣言で同じ変数名を2回以上宣言した場合、構文エラーになります。
以下の例では最初にmsg変数に「おはよう」を代入していますが次の行で「おやすみ」を代入しています。この状態で実行すると構文エラーになります。

js

let msg = 'おはよう';
let msg = 'おやすみ';
console.log(msg);

実行結果

SyntaxError: Identifier 'msg' has already been declared

const宣言

const宣言の基本的な使い方は以下のとおりです。
定数を宣言する場合はconst宣言を使います。

js

const HELLO = 'おはよう';
console.log(HELLO);

実行結果

おはよう

const宣言で同じ変数名が重複した場合

let宣言のときと同じようにconst宣言でも同じ変数名を2回以上宣言した場合、構文エラーになります。

js

const HELLO = 'おはよう';
const HELLO = 'おはようございます';
console.log(HELLO);

実行結果

SyntaxError: Identifier 'HELLO' has already been declared

const宣言した変数の値は書き換えることができない。（再代入不可）

const宣言した変数は再代入不可となり、一度代入した値を書き換えることはできません。書き換えようとすると以下のように構文エラーになります。

js

const HELLO = 'おはよう';
HELLO = 'おはようございます';
console.log(HELLO);

実行結果

TypeError: Assignment to constant variable.

このルールは参照型であっても同じです。

js

const ARRAY = [1,2,3];
ARRAY = [4,5,6];
console.log(ARRAY);

実行結果

TypeError: Assignment to constant variable.

const宣言した変数の値を書き換える方法

定数とは、「再代入できない変数」であって「変更できない変数（読み取り専用の変数）」という意味ではありません。 そのため、以下のようにして値を書き換えることが出来てしまいます。

js

const ARRAY = [1,2,3];
ARRAY[1] = 10;
console.log(ARRAY);

実行結果

[ 1, 10, 3 ]

変数の値を入れ替える

分割代入を使うと、変数の値を簡単に入れ替えることが出来ます。
分割代入については以下の記事を参照してください。

2021年1月3日 【JavaScript入門】分割代入

js

let x = 1;
let y = 2;
let z = y;//yの値をzへ退避する。
y = x;
x = z;
console.log(x,y);//2 1

分割代入を使うと、変数zを用意せずに次のように記述できます。

js

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x,y);//2 1

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選