JavascriptのES5からES6になって変わった変数宣言とアロー関数について、勉強半分でまとめました。
変数宣言
今まで変数宣言といえば、変数名の前にvar を使っていましたが、新しく let と const が追加になりました。
let
ざっくり言うとvar の代わりに let を使うイメージです。ただ、var と違って letの場合、変数の再宣言が出来なくなっています。
また、let はスコープの範囲がブロック内に制限され、変数の再宣言不可とあわせてエラー（というかバグ）の発生を予防できるはずです。
let j = 0;
for ( let i = 0; i < 5 ; i++ ){
console.log(i); // これはOK
}
console.log(i); // これはスコープを超えるのでNG（ReferenceError: i is not defined）
console.log(j); // これはOK
let j = 1; // 再宣言しているのでNG（SyntaxError: Idenrifier 'j' has already been declared）
const
constは、let 同様に再宣言不可なのと、それに加えて再代入もできない変数宣言となります。
const hoge = 10;
const fuga = {name: "Fuga!", age:10};
hoge = 20; // これはNG (TypeError: Assignment to constant variable.)
fuga.name = "hoge"; // これはOK
const でオブジェクト(連想配列)を宣言した場合、オブジェクトの要素については変更可能です。 変数そのものに代入しているわけでは無いので、ということだと思いますが、ちょっとハマりそうな気がします。
アロー関数
無名関数の省略記法で「=>」を使用するのでアロー関数というそうです。
今までこう書いていたのが、
const fn = function(a, b){ /* 処理 */ }
このようにスッキリ書けるようになります。
const fn = (a, b) => { /* 処理 */ }
引数の省略
引数が１つだけの場合、()を省略できます。ちょっと不思議な感じがしますが、こんな書き方になります。
const fn = n => { /* 処理 */ }
なお、引数が１つも無い場合は()を省略できません。
const fn = () => { /* 処理 */ }
｛｝の省略
処理内のステートメントが１つだけの場合、｛｝を省略できます。
これが、
const fn = (a, b) => {return a * b;}
こう書けます。（returnも省略可能）
const fn = (a, b) => a * b
thisの参照元
「this」が指すものが関数呼び出し時に決まるのでは無く、関数が定義された時点で決まります。
例えば、Ajaxの処理などでよく「var self = this」としていた記述が無くなり、thisをそのまま書けばOKとなります。
こう書いていたのが、
var self = this;
axios.get(URL)
.then(function(response){
self.info = response; // thisを使うと失敗するので、スコープ外で self = this とする必要あり
}
これでOKになります。
var count = 0;
var self = this;
axios.get(URL)
.then(response => {
this.info = response;} // thisを使える
)
参考
class構文については下記が分かりやすかったのでメモ。
コメント