JavaScriptの変数宣言var/let/constを比較する

JavaScript
スポンサーリンク

はじめに

今回は以下の流れでご説明します。

  1. 比較結果
  2. 変数宣言とは
  3. 大きな違い
  4. 詳しい例
  5. まとめ

この記事はJavaScriptを使っている方で、一段階レベルアップした書き方をしたい人におすすめです。

比較結果

結論から言うと以下の違いがあります。

  • var
    再宣言可能、再代入可能、ブロックスコープ外使用可能
  • let
    再宣言不可、再代入可能、ブロックスコープ外使用不可
  • const
    再宣言不可、再代入不可、ブロックスコープ外使用不可

では細かく説明していきます。

変数宣言とは

まずは変数宣言についてご説明します。

JavaScriptは変数を使用するときは必ず宣言しないといけません。PCにこの箱に値を一時的に入れますよと伝えることです。

以前変数に関して記事を書いているのでよかったらこちらもご覧ください。

変数宣言はvarを使うのが多いのですが、ES6よりvarの代わりにletとconstが使用できるようになりました。

JavaScriptの場合はデータ型も特に指定せずvarで宣言できます。

大きな違い

このvar/let/constの大きな違いは2つあります。

再宣言可能であるか

再宣言とは一度宣言した後にもう一度同じ変数名で宣言することです。

//宣言する
var foo = 'abc';

//再宣言
var foo = 'xyz';

再宣言できると間違って同じ名前の変数名で宣言してしまい、エラーが起こるリスクがある。

再代入可能であるか

再代入とは一度宣言した初期値に新しい値を代入することです。

//宣言する
var foo = 'abc';

//再代入
foo = 'def';

再代入はよくあることです。逆にできないということは後から変更されたくない定数を宣言できるということです。javaで言うとはfinalのことです。

ブロックスコープがあるか

ブロックスコープであるとは()や{}で囲まれた範囲の外から参照できないということです。

var out = 'abc';
if(true){
    var in = 'xyz';
}
console.log(out); //同じブロックで宣言
console.log(in);  //違うブロックで宣言 → ブロックスコープである

このようなブロックスコープである変数が参照できないとメンテナンスが楽になります。

比較

ここでは実際にvar/let/constについてコードを書いて比較します。

var

再宣言可能、再代入可能、ブロックスコープ外使用可能

var str = '初期値';

str = '再代入';  //可能
var str = '再宣言';  //可能

//スコープ外でも使用可能
if(true){
  var scope = 'OK';
}
console.log(scope);  //OK

let

再宣言不可、再代入可能、ブロックスコープ外使用不可

let str = '初期値';
str = '再代入';  //可能
let str = '再宣言';  //不可能

//スコープ外では使用不可
if(true){
  let scope = 'OK';
}
console.log(scope);  //エラー

const

再宣言不可、再代入不可、ブロックスコープ外使用不可

再代入不可だが、オブジェクトは追加できる。

const str = '初期値';
str = '再代入';  //不可能
const str = '再宣言';  //不可能

//スコープ外では使用不可
if(true){
  const scope = 'OK'; 
}
console.log(scope);  //エラー

//オブジェクトは追加可能
const obj = {};
obj.month = '4月';  //OK

まとめ

比較結果は以下のようになります。

  • var
    再宣言可能、再代入可能、ブロックスコープ外使用可能
  • let
    再宣言不可、再代入可能、ブロックスコープ外使用不可
  • const
    再宣言不可、再代入不可、ブロックスコープ外使用不可

初心者はあまり気にせず、varを使えばよいと思います。varは万能なのでそこまで複雑なコードではない限り問題ないと思います。

逆に、複数人で同じコードを修正するときなどはlet/constを使用した方がいいです。変数を追加したとき意図せずエラーが出てしまったときコード行数が多いと探すのが大変です。気づかず再宣言や再代入するケースを事前に防ぎ、バグの予防になるのでおすすめです。

スポンサーリンク
JavaScript プログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人3年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました