【JavaScript】const, let, varの違いについて
目次
const, let, var とは？
JavaScriptでは、変数や定数などを使用するときに変数や定数を宣言することが推奨されています。その時に用いられるキーワードがconstやletやvarです。
const, let, varとはJavaScriptの変数や定数を宣言するときに用いられるもの
中でもconst, letに関してはES6(JavaScriptのバージョンのこと)から導入されています。
const, let, varの違いは？
const, let, varがそもそも何なのかを説明したのでいよいよ本題であるそれぞれの違いを説明していきます。
３つの大きな違いは
① 再定義再代入の違い
② スコープの違い
③ ホイスティングの違い
です。
順を追って説明していきます。
再定義再宣言の違い
まず大きく違うのは再定義、再宣言ができるかどうかです。
再定義とは一度宣言した変数や定数をもう一度宣言できるのか。再代入は変数や定数の中身を入れ替えたりできるのか。という意味です。
では３つの違いは
| const | let | |
| 再宣言 | × | × |
| 再代入 | × | ○ |
となっています。例えば、
// 再宣言
var hoge = "○○";
var hoge = "△△"; エラーは出ない
let hoge = "○○";
let hoge = "△△"; Uncaught SyntaxError: Identifier 'hoge' has already been declared
const hoge = "○○";
const hoge = "△△"; Uncaught SyntaxError: Identifier 'hoge' has already been declared
// 再代入
var hoge = "○○";
hoge = "△△"; エラーは出ない
let hoge = "○○";
hoge = "△△"; エラーは出ない
const hoge = "○○";
hoge = "△△"; Uncaught TypeError: Assignment to constant variable.constは再代入や再宣言ができないため定数に用いられることが多いです。また、varは再定義も再宣言もできてしまうため、コードが長くなったときやチーム開発の時に他部分と変数名が同じだった場合上書きされてしまうので基本的には用いないようにする。
スコープの違い
スコープとはコード中の参照できる範囲のことを言います。
スコープについての記事も出す予定なので詳しくはそちらをご覧ください。
それぞれの違いは、
| const | let | var | |
| スコープ | ブロック | ブロック | 関数 |
ブロックとは { } で囲まれた処理のことを言います。例えば、
// var
{
var hoge = "りんご";
console.log(hoge); // りんごと表示される
}
console.log(hoge); // りんごと表示される
// let
{
let hoge = "バナナ";
console.log(hoge); // バナナと表示される
}
// letはブロックのため上の{}の中でしか使えない
console.log(hoge); // りんごと表示される
// const
{
const hoge = "ブドウ";
console.log(hoge); // ブドウと表示される
}
// constはブロックのため上の{}の中でしか使えない
console.log(hoge); // りんごと表示されるホイスティングの違い
ホイスティングとは関数の中で、変数の宣言は常に先頭で行われたことにするという現象のこと。
| const | let | var | |
| ホイスティング | エラー | エラー | undefined |
const, letはエラーになるのでコードが実行できない箇所を比較的簡単に見つけることができるが、varの場合undefinedと出るだけでなぜ動かないかに気づくのに時間がかかってしまう。
まとめ
今後はvarを使わずに基本的にはconstを使っていくようにする。
また、全ての違いは
| const | let | var | |
| 再宣言 | × | × | ○ |
| 再代入 | × | ○ | ○ |
| スコープ | ブロック | ブロック | 関数 |
| ホイスティング | エラー | エラー | undefined |
です。
今後もJavaScriptやPHP, Laravelなどの記事を出していく予定です。
コメント