こんにちは、Webプログラマの篠田です。
先日、社内でJavaScriptの勉強会を行いました。
その中で、社内でのJavaScriptのルールを用意しようということになり、ベースとなる基準を「ES2015（ES6）」で作っていこうかと考えています。
その中で、今回はJavaScriptの変数のスコープと再宣言に関して、復習を兼ねてまとめていきます。
「ES2015（ES6）」とは？
ECMAScript（エクマスクリプト）というJavaScriptの標準規格があります。
「ES2015」というのは、ECMAScriptのバージョン6（6th Edition）が標準化された名称となります。
エンジニアの中では、「ECMAScript 6th Edition」の方が浸透しているため「ES6」と表記されていることが多いです。
「ES2015（ES6）」は、新しい機能や構文が追加されており、昔からのJavaScriptの常識と異なっている部分もあります。
変数の取り扱いに関して、「ES2015（ES6）」ではスコープを意識した書式を求められます。
スコープを意識して「let」に切り替える
JavaScriptの変数宣言といえば「var」を使うのがお決まりでした。
ですが、「var」を使った変数には、「var」で定義された変数を含む関数全体で利用可能となり、厳密なスコープの制約をうけませんでした。
これは、融通が効くという捉え方もできますが、潜在的なバグを内包するという危険性も含まれています。
「ES2015（ES6）」では、より厳密なスコープを意識させた構造を求められます。
そこで、厳密なスコープの制約を変数に設けるのに利用するのが「let」です。
「let」で定義された変数は、定義された「ブロック」内でのみ有効となります。
「var」を使ったスコープの例
「var」を使ったスコープ例です。
|
1 2 3 4 5 6 7 8 9 10 |
varTest(); function varTest() { var x = 21; if (true) { var x = 41; // 同じ変数 console.log(x); // 41 } console.log(x); // 41 } |
「var」で定義された「x」の値が条件分岐のブロックを抜けても、値が維持されていることがわかります。
「let」を使ったスコープの例
「let」を使ったスコープ例です。
|
1 2 3 4 5 6 7 8 9 10 |
letTest(); function letTest() { let x = 21; if (true) { let x = 41; // 同じ変数 console.log(x); // 41 } console.log(x); // 21 } |
「var」とは異なり、ブロック内とブロック外で「x」の値が異なります。
これは、ブロック内で定義された変数の有効範囲が、ブロック内で収まっていることがわかります。
このように、「let」を使うことで、プログラムの動きをスコープをもとに意図した動きを制御することができるようになります。
再宣言予防としての「let」
「let」のもう1つの効果として「再宣言予防」があります。
「var」を使った再宣言の例
|
1 2 3 |
var x = 2; var x = 4; console.log(x); |
このプログラムは、正しく動き「4」が表示されます。
ただし、「x」が複数回宣言されているという厳密な言語を扱ってきた方にとっては気持ち悪い書き方だと思います。
「let」を使った再宣言の例
|
1 2 3 |
let x = 2; let x = 4; console.log(x); |
このプログラムを実行すると、下記のようなエラーが表示されます。
|
1 |
Uncaught SyntaxError: Identifier 'x' has already been declared |
このエラーは、変数「x」はすでに宣言されているというエラーです。
このことから、「let」を利用することで再宣言を行えなくすることができ、
不用意な上書きを避けることができるようになります。
まとめ
これまでに作成してきたプログラムを急に「var」から「let」に書き換えると
思わぬエラーが発生するようになる可能性があります。
それは、スコープや再宣言といったことを意識せずに作ってきた証明かもしれません。
「let」を利用することで、「var」より強固なプログラムを書くことができるようになります。
ぜひ、新しいJavaScriptの書き方を試して、よりバグの少ないプログラムを書いていきましょう！
現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。
ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。
