はじめに
今回は以下の流れでご説明します。
- 比較結果
- 変数宣言とは
- 大きな違い
- 詳しい例
- まとめ
この記事はJavaScriptを使っている方で、一段階レベルアップした書き方をしたい人におすすめです。
比較結果
結論から言うと以下の違いがあります。
- var
再宣言可能、再代入可能、ブロックスコープ外使用可能 - let
再宣言不可、再代入可能、ブロックスコープ外使用不可 - const
再宣言不可、再代入不可、ブロックスコープ外使用不可
では細かく説明していきます。
変数宣言とは
まずは変数宣言についてご説明します。
JavaScriptは変数を使用するときは必ず宣言しないといけません。PCにこの箱に値を一時的に入れますよと伝えることです。
以前変数に関して記事を書いているのでよかったらこちらもご覧ください。
変数宣言はvarを使うのが多いのですが、ES6よりvarの代わりにletとconstが使用できるようになりました。
JavaScriptの場合はデータ型も特に指定せずvarで宣言できます。
大きな違い
このvar/let/constの大きな違いは２つあります。
再宣言可能であるか
再宣言とは一度宣言した後にもう一度同じ変数名で宣言することです。
//宣言する
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); //OKlet
再宣言不可、再代入可能、ブロックスコープ外使用不可
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を使用した方がいいです。変数を追加したとき意図せずエラーが出てしまったときコード行数が多いと探すのが大変です。気づかず再宣言や再代入するケースを事前に防ぎ、バグの予防になるのでおすすめです。
