💻

【JavaScript 変数】var、let、constの違いや使い分けなど

2021/05/16に公開

変数

変数とは文字列や数値のデータを格納して、何度も使えるようにする箱のようなものです。
変数を宣言するときには以下のように、右の値を左の変数に代入することになります。

var "変数名" = "値や文字列";

var a = 1;
let apple = 3;
const banana = 'バナナ';

varletconstはJavaScriptで変数を宣言すると気に使うキーワードです。

#var, let , constの使い分け

var, let, constはそれぞれできること、できないことがあります。

|var| let|const
-|-|-|-
再代入|○|○|×
再宣言|○|×|×
スコープ|関数|ブロック|ブロック


再代入

再代入とは宣言した変数の値を再び別の値で代入することです。

varやletで宣言した変数を再代入とすると代入後の値が適用されます。
constで代入するとするとエラーが出ます。

// var
var a = 1 // 変数の値を宣言
a = 2 // 再代入

console.log(a) // '2'と出力される。再代入された'a = 2'が適用されるため。

// let

let b = 1 // 変数の値を宣言
b = 3 // 再代入

onsole.log(b) //'3'と出力される。再代入された'b = 3'が適用されるため。

// constはエラーがでる。


再宣言

再宣言とは一度宣言した変数を再び別の値で宣言しなおすことです。

varで再宣言すると、あとに宣言した変数が適用されます。
letやconstやで再宣言するとエラーがでます。

//var
var a = 1 //最初の宣言
var a = 2 //2回目の宣言

console.log(a) //'2'と出力される。2回目で再宣言された a = 2 が適用されるため。

//let, constはエラーがでる。


スコープ

スコープとは宣言した変数が使える範囲のことです。
varは関数スコープ、letやconstやはブロックスコープの範囲で変数の値が適用されます。

関数スコープ

関数とは複数の処理をひとまとめにしたものです。
varで変数を宣言すると、同じ関数内であればどこでも呼び出せることができます。

//関数
function kansuu {

  //ifで条件づけられたブロック
  if (true) {
    var a = 1
  }

console.log(a) // '1'が出力される。varで変数を宣言すると関数内のどこでも呼ぼび出すことができるため。

}

ブロックスコープ

' { } 'でくくられた範囲のことをブロックといいます。

letやconstで変数を宣言すると、同じ関数内であってもブロック内でなければ変数を呼び出すことができません。

//関数
function kansuu {

  //ifで条件づけられたブロック
  if (true) {
    let a = 1
    const b = 2

    console.log(a) // '1'が出力される。ブロック内で'a'の値を呼び出したため。
  }

console.log(b) // 出力されない。ブロック外で'b'の値を呼び出したため。

}

Discussion