More than 3 years have passed since last update.

JavaScriptの変数と宣言

Posted at 2021-03-23

プログラミング言語には、文字列・数値などのデータに名前を付ける事によって
繰り返し利用する変数という機能がある

JavaScriptでは、「これは変数だ。」といった宣言を行うキーワードとして
以下の3つが使用されている。

varはもっとも古くからある変数宣言のキーワード
ただ、意図しない動作を作りやすい問題が知られています。
そのためECMAScript 2015で、varの問題を改善するために
constとletという新しいキーワードが導入されました。

const、let、varどのキーワードも共通の仕組み
変数同士を,（カンマ）で区切ることにより、同時に複数の変数を定義可能

const

再代入できない変数の宣言と、その変数が参照する値（初期値）を定義可能
constキーワードに続いて変数名を書き、代入演算子（=）の右辺に変数の初期値を書いて変数を定義

const

//const  変数名  =  初期値;
const QiitaTitle = "JavaScript学習";

###複数の値を宣言する方法

const、let、varどのキーワードも共通の仕組みですが、
変数同士を,（カンマ）で区切ることにより、
同時に複数の変数を定義することが可能

const

const QiitaTitle = "JavaScript 学習",
      QiitaCategory = "プログラミング";

constは再代入できない変数を宣言するキーワード
そのため、constキーワードで宣言した変数に対して、後から値を代入することは不可能

値を再代入する必要がない場合は、constキーワードで変数宣言することを推奨

値の再代入が可能な変数を宣言可能
letの使い方はconstとほとんど同じ

let

let QiitaTitle = "JavaScript 学習";

QiitaTitleという変数を宣言し、初期値を"JavaScript Primer"という文字列であることを定義している

letはconstとは異なり、初期値を指定しない変数も定義可能
初期値が指定されなかった変数はデフォルト値としてundefinedという値で初期化される（undefinedは値が未定義ということを表す値）

let

let QiitaTitle;
// `QiitaTitle`は自動的に`undefined`という値になる

QiitaTitleという変数を宣言しています。このときQiitaTitleには初期値が指定されていないため、デフォルト値としてundefinedで初期化される

このletで宣言されたQiitaTitleという変数には、代入演算子（=）を使うことで値を代入可能

let

let QiitaTitle;
QiitaTitle = "JavaScript 学習";

代入演算子（=）の右側には変数へ代入する値を書きますが、ここでは"JavaScript 学習"という文字列を代入している

letで宣言した変数に対しては何度でも値の代入が可能

let

let count = 0;
count = 1;
count = 2;
count = 3;

varキーワードでは、値の再代入が可能な変数を宣言可能
varの使い方はletとほとんど同じ

var

var QiitaTitle = "JavaScript 学習";

varでは、letと同じように初期値がない変数を宣言でき、変数に対して値の再代入も可能

var

var QiitaTitle;
QiitaTitle = "JavaScript 学習";
QiitaTitle = "新しいタイトル";

varはletとよく似ているが、varキーワードには同じ名前の変数を再定義できてしまう問題がある

letやconstでは、同じ名前の変数を再定義しようとすると、構文エラー（SyntaxError）が発生する

var

// "x"という変数名で変数を定義する
let x;
// 同じ変数名の変数"x"を定義するとSyntaxErrorとなる
let x; // => SyntaxError: redeclaration of let x

間違えて変数を二重に定義してしまうというミスを防ぐことが可能

一方、varは同じ名前の変数を再定義可能

var

// "x"という変数を定義する
var x = 1;
// 同じ変数名の変数"x"を定義できる
var x = 2;
// 変数xは2となる

意図せずに同じ変数名で定義してもエラーとならずに、値を上書きしてしまう

他にもvarには変数の巻き上げと呼ばれる意図しない挙動があり、letやconstではこの問題が解消されている
そのため、「letはvarを改善したバージョン」という認識でも問題ない

varにはさまざまな問題がある
ほとんどすべてのケースでvarはconstかletに置き換えが可能

varを利用することは避けたほうがよい印象