Javascript(ES6)での変数宣言とアロー関数について勉強メモ

Javascript
スポンサーリンク

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) => { /* 処理 */ }

引数の省略

引数が1つだけの場合、()を省略できます。ちょっと不思議な感じがしますが、こんな書き方になります。

const fn = n => { /* 処理 */ }

なお、引数が1つも無い場合は()を省略できません。

const fn = () => { /* 処理 */ }

{}の省略

処理内のステートメントが1つだけの場合、{}を省略できます。
これが、

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構文については下記が分かりやすかったのでメモ。

【全てのJSのオブジェクト指向嫌いマンに告ぐ】ES6のclass構文が素敵すぎて鼻水が止まらない - Qiita
----- !!! 注意 この文章は偏差値の低い人間が書いてます。 ・厳密な解釈を求める方 ・頭の悪い人間の文章を読みたくない方 ・低偏差値の人間が書いた文章を見るとデカめの蕁麻疹が全身にできるという方 は下の便利なリンクからちゃ...

コメント