JavaScript | ブロックスコープについて letとconstも合わせて解説 | メモ

どうも、かわうそです!

今日は『ブロックスコープについて letとconstも合わせて解説』をしていきます。

こんな方におすすめです。

  • letとvarの違いが分からない
  • ブロックスコープと言われてもあまりピンとこない
  • スコープという言葉はなんとなく分かるかも

スコープについて復習が必要かも?と思った方は、こちらの記事がおすすめです。

JavaScript | スコープについてざっくり解説します | 現役エンジニア
現役エンジニアが簡単解説!JavaScript初心者から中級者になるために必須の『スコープ』の理解。動画も踏まえて解説します。

イラストや動画を使い、分かりやすい(ざっくりな)説明を心がけます。

そもそもブロックスコープとは

そのまんま、『そのブロックに作られたスコープ』ですね。

じゃあなにが『ブロック』かというと、{ }』 この 波括弧(なみかっこ)です。
(中括弧ともいうかもです。)

if(){}とかfor(){}でよく見かけるあいつです。

意味的には、複数行の処理をひと固まり=ブロックとして扱う、ということです。

forやらifがなくても、

波括弧だけでも、ブロックは作れるんですよ!

そしてスコープとは、定義された変数や関数を『参照できる範囲のこと』です。

ブロックによって、参照できる範囲が決めれらちゃったよ

ってのが、ざっくりとした『ブロックスコープ』ですね。

なにがブロックで、なにがスコープかは分かった!

どうやってブロックスコープができるのか』教えなさいよ!!ですね。

例文を使いながら説明していきます。

ブロックスコープを作ってみよう

ブロックスコープを作るには、『ブロックの中でスコープ作りま~す』と宣言しないとJSさんには伝わりません。

俺はここに自分だけの世界を作るんだ!!!!

・・・そんなブロックスコープを作る宣言をしてくれるのが、letおよびconstの変数宣言です。

変数宣言っていうのは、みなさんやってるあれです、あれ

let?const?なんじゃそりゃって方、後で説明していきます。

とりあえず例文を見てみましょう

ブロックの外からnameを参照できませんね。

では、今まで通りvarで宣言した場合はどうなるでしょうか。

ブロックの外でもnameを参照できていますね。

つまり、letでは『ブロックスコープ』が生まれているが、varではブロックスコープが生まれていません。

もちろん、letconstに変えても、同様にブロックスコープは発生します。

ちなみにこちらも試しておきましょう。

ブロックスコープが発生しているのはやはりletだけです。

letだとブロックスコープが発生
varだと参照できる

var を let に変えるだけで、スコープを作れちゃんですね~!

というわけで、ポイントになっている『letとconst』について、説明していきます。

letとconstとvarの違い

『letとconst』はvarと同じく変数宣言のキーワードです。
ECMAScript2015から採用された、新しめの変数宣言方法です。

その中でもconstは、定数に対してのみ使用されます。

つまり、 変更されない、値が更新されないものに対して使用する変数(定数)宣言となっています。

letはブロックスコープを作れますので、var以上に保守性のある記述が可能になります。

もう少し分かりやすいように、それぞれの違いをざっくり表にまとめました。

初期値省略再代入再宣言ブロックスコープ
var×
let×
const×××
var,let,constの違い

初期値は、変数宣言時に値を設定しないといけないかどうか

再代入は変数の値を変更、更新できるかどうか

再宣言は、同じ変数名で、もう一度変数宣言できるかどうか、です。

各項目について詳しく見ていきます。

初期値の省略

下のコードをご覧ください。

constは初期値を必ず設定してあげましょう。

再代入

var

let

const

constは定数なので、再代入は不可能です。

再宣言

var

let

varと違い、SyntaxError:すでに宣言されてます 的なエラーが返ってきます。

letを使用していれば、もし、たまたま同じ変数名を宣言してしまって(変数衝突)、値が更新されて重大なエラーが発生した・・・

なんてことが防げるわけです。

※補足です
ただし、スコープが変われば話は別です。

同じ変数nameなのに、再宣言できちゃってますね。

これは『スコープチェーン 』ってやつの仕業です。

入れ子が深い = ネストが深い スコープから、優先的に変数を参照して解決していく、JavaScriptの仕組みなのです。

もう1つ、ブロックスコープのネストを深くしてみましょう。

もう少し先、必ずみなさんが出会う相手です。

const

もちろん、constもlet同様、再宣言できません。

ブロックスコープ

var

var はスコープを作りませんので、参照可能です。

let

letでの変数宣言はブロックスコープを作りますので、参照ができません。

const

もちろん、constもlet同様、参照は不可能です。

変数の巻き上げ

最後に、変数の巻き上げについて、さらっとだけ説明しておきます。

まずはvarから。

変数の宣言前に、console.log(name)で参照をしています。

結果はundefinedでしたが、エラーではありません。

宣言されていない変数を参照すればエラーになりそうなものです。
(他プログラム言語ではエラーになるので、きっとJavaScriptに頭を悩まされる要因の1つになるのでしょう)

ざっくりですが、これが『巻き上げ 』 っちゅーやつです!

次はletです。

しっかりエラーになりました。もちろん、constでもletと同様です。

この『巻き上げ』を防ぐために、varでの変数宣言はスコープ内での先頭ですることが推奨されていました。

厳密には、letでもvarでもconstでも『巻き上げしている 』ことは変わりありません。

『undefinedというプリミティブ値を代入しているかどうか』だと、解釈しています。

最後に letを使おう。

というわけで、 ブロックスコープは少しでもご理解いただけましたでしょうか。

合わせて、やりたい放題だった『var』さんの危険性がご理解いただけたでしょうか。

様々な場面で、varと同じように使用できる かつ 適切に使用範囲と参照範囲を限定してくれる、let。

chrome, edge, safari, firefoxにはもちろん対応しているし、ie11にも対応しています。

インターネットエクスプローラーは、将来的に廃止が決まっているレガシーブラウザです。

特別な理由がない限りは、これからはvarではなくletを使っていきましょう。

また、letを使うからには『ブロックスコープ』も活用してみてくださいね!

ありがとうございました!

フォローする