javascript ブロックスコープの使い方
- 2020.10.03
- javascript
- javascript
javascriptで、varとletとconstを使用したブロックスコープの使い方を記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
ブロックスコープ使い方
まずは、ブロック文（{}）の中で変数を定義してみます。
|
1 2 3 4 5 6 7 8 9 10 |
var a = 100; let b = 100; { var c = 100; let d = 100; // letを指定するとブロック文の中でのみ有効 } console.log( a ); // 100 console.log( b ); // 100 console.log( c ); // 100 console.log( d ); //error |
実行結果は、変数「a,b,c」までしか利用できません。
上記のように、letを指定するとブロック文の中でのみ有効な変数となります。
|
1 2 3 4 5 6 7 8 9 10 |
var a = 100; let b = 100; { var c = 100; let d = 100; console.log( d ); // 100 } console.log( a ); // 100 console.log( b ); // 100 console.log( c ); // 100 |
constを指定しても、まったく同じ結果となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var a = 100; const b = 100; { var c = 100; const d = 100; console.log( d ); // 100 } console.log( a ); // 100 console.log( b ); // 100 console.log( c ); // 100 console.log( d ); // error |
ブロック文内であれば、すでに利用している変数名も使用することが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var a = 100; let b = 100; { var c = 100; let a = 200; let b = 200; console.log( a ); // 200 console.log( b ); // 200 } console.log( a ); // 100 console.log( b ); // 100 console.log( c ); // 100 |
ブロック文外で同じ変数名を利用すると、エラーとなります。
|
1 2 3 |
var a = 100; let b = 100; let a = 200; // Uncaught SyntaxError: Identifier 'a' has already been declared |
-
前の記事
php 配列内にある重複しているデータを削除する 2020.10.03
-
次の記事
React.js ライブラリ「use-file-upload」を使ってファイルをアップロードする 2020.10.03