ES6(let,const)
はじめに
ES6を自分の備忘録としてまとめていきます。まずはletやconstについて。
変数である。
プログラミングを学び始めると、変数や関数やはたまたクラスとして名前を付ける機会が多くあります。その際、変数を宣言できるのがletやconstです。(ES6 以前はvarが使われていました。)使い方は簡単で名前を付ける前にlet、constと書くだけです。
let obj1 = { prop:1; }//変更可能 const obj2 = { prop2:2 }//変更不可能
またletは再宣言が不可能、constは再宣言と再代入が不可能な宣言です。間違えて、変数を二重に定義してしまったり、予期せぬ再代入を防ぐ役割があります。
let a = 1; let a = 2; //↑これはできない! let a = 1; a = 2; //↑これはできる!
letとconstの使い分け
使い分けは簡単で、再代入が必要な変数のみletで宣言し、それ以外はconstで宣言します。(varは利用する理由がないため利用しない。)
スコープとlet、constとの関係
javascriptにはスコープと言われる概念があります。スコープについての詳細は別の記事で書く予定ですが、ここではスコープとlet,constについての関係をまとめます。レキシカルスコープと呼ばれるスコープがあり、これはコードを書く場所によって参照できる変数が変わるスコープのことです。なので正しくはレキシカルスコープとlet,constとの関係を以下のコードにまとめます。
例えば、一つの関数fnがあったとします。
function fn() { if (true){ let a = 'fn called'; } return a; }
このfnをconstを使って宣言し、console.logで表示させようとすると…
const result = fn() console.log(result);//ReferenceError:a is not defined
以上のようにエラーになっています。返り値(return)として呼び出したaですがletで宣言したfn calledが返っていません。これは宣言したaと返り値であるaの階層が違うことが問題です。返り値としてもったaは同階層から上の階層へ自身のaを探しに行きます。よってletで宣言したaは見つけられることはないのです。
なので改善策としては、
function fn(){ let a ; if(true){ a ='fn called' //letは再宣言が不可能なためlet a='fn called'としないよう注意。 } return a; }
これで返り値としてもったaとletで宣言されたaの階層が同じになり、返り値にはfn calledが返る事となります。