JavaScript「var / let / const」の違いをまとめてみた

@ハクト 2022-08-22 16:26:13に投稿

以前までは変数宣言といえば「var」のみでしたが「ECMAScript6」から宣言方法に「let」「const」が追加されました。

「ES6」以降、変数宣言には基本「const」を使用し、値の変更が必要な場合に「let」を適用、「var」は基本使わないよう推奨されています。

「var」を使うと簡単に変数の中身を書き換えられるので、2重宣言などで思わぬバグが発生する可能性があります。

以下で「var / let / const」の違いをざっくりと確認してみてくださいね。

スコープ

var

//-- 関数スコープ --
{
  var numV=1;
}
console.log(numV); //1

let

//-- ブロックスコープ --
{
  let numL=1;
}
console.log(numL) 
// numL is not defined

const

//-- ブロックスコープ --
{
  const numC=1;
}
console.log(numC) 
// numC is not defined

宣言の巻き上げ

var

//-- undefined --
{
  console.log(numV); 
  //undefined
  var numV=1;
  console.log(numV); 
  //1
}

let

//-- エラー --
{
  console.log(numL); 
  //Cannot access 'numL' before initialization
  let numL=1;
  console.log(numL);
}

const

//-- エラー --
{
  console.log(numC); 
  //numC is not defined
  const numC=1;
  console.log(numC);
}

再宣言

var

//-- 再宣言可能 --
{
  var numV=1;
  var numV=2;
}
console.log(numV) //2

let

//-- 再宣言不可 --
{
  let numL=1;
  let numL=2;
}
console.log(numL) 
//Identifier 'numL' has already been declared

const

//-- 再宣言不可 --
{
  const numC=1;
  const numC=2;
}
console.log(numC) 
//Identifier 'numC' has already been declared

再代入

var

//-- 再代入可能 --
{
  var numV=1;
  numV=2;
}
console.log(numV) //2

let

//-- 再代入可能 --
{
  let numL=1;
  numL=2;
}
console.log(numL)  //2

const

//-- 再代入不可 --
{
  const numC=1;
  numC=2;
}
console.log(numC) 
//Assignment to constant variable.

 

PR

フリーランスエンジニアに安心保証
動画編集入門プラン（2ヶ月）用LP
javascript 変数 var let const
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter