JavaScriptの基本を学ぼう

13レッスンの0が完了(0%)。

05.ブロックスコープ

このレッスンへのアクセス権がありません

コース内容にアクセスするには、登録またはサインインしてください。

varとはletの登場以前から使われてきた宣言方法で使い方は基本的にはletと同じですがいくつか大きく違う点があります。そのうちの一つが”ブロックスコープ”です。
letやconstのスコープはブロックスコープと呼ばれるもので、{}で囲んだ部分が変数の有効範囲となります。
例えば、if文の中でname変数を宣言します(中身はカエル)。そのname変数をif文のブロックスコープの外で呼び出そうとしてもエラーになります。
if (true){//ブロック
let name = "カエル";
console.log(name) //カエル
}//ここまでがブロックスコープ
console.log(name) //スコーの外で呼び出す
実行結果↓
一つ目のカエルは表示されてますが、2つ目は空欄になっています。
ブロックスコープが発生しているため、外からnameを参照することができません。
ちなみにここまでのレッスンを同じコンソールで実行してきた方は、空欄ではなくオタマジャクシが表示されるかもしれません。それは、「03.constとは」で宣言したnameを呼び出しているからです。つまり、ブロックスコープ内のname(カエル)とブロックスコープ外のname(オタマジャクシ)の両方を呼び出してる形になります。
一方、varではブロックスコープは作れませんので、全てどこからでも再代入可能という事になります。
「じゃあ、varの方がいいじゃん」と思ったあなた、ちょっと待って下さい!ブロックスコープの役割は{}内でしか変数を触れないようにすることで、その変数を守る役割を果たしています。例えば、すでにname変数を使用している事を知らない別の人が同じname変数を作成し、あなたの変数を再代入していてうまく動かない・・なんて事を防いでくれるのです。プログラミングは人為的ミスを想定して作るものなので、なるべく変更できない方がエラーも見つけやすく良いとされています。現在での使用優先順位は下記が一般的なので覚えておきましょう。
1位 const  再宣言NG、再代入NG、ブロックスコープ有
2位 let   再宣言NG、再代入OK、ブロックスコープ有
3位 var   再宣言OK、再代入OK、ブロックスコープ無
上部へスクロール