ES6でJavascriptが簡単にかける!便利な追加機能とは?


ES6とは

ES6とは、ECMAScriptのバージョン6のことです。
現在では標準化され、正式にはES2015と呼びます。

ECMAScriptとは、、Javascriptの仕様、ルールのようなものです。

ES6から加わった機能

constとlet

今まで変数宣言はvarだけで行っていました。
しかし、新しく以下の2つが追加されました。

  • let :再宣言NG
  • const :再宣言NG再代入NG

変数のスコープ

  • var :関数内
  • let :ブラケット{}のブロック内
  • const :ブラケット{}のブロック内

関数functionのスコープもブロックスコープになっています。

セミコロンは要らない?

文の最後は区切りとして、セミコロンを付けることが一般的でした。
しかし、ES6ではセミコロンがなくても正常に動くようになりました。

即時関数をブロックスコープで

即時関数ってこんなもの。

    ($function(){
        var num = 1;
    })

読み込んだらすぐに実行される。
ブロックスコープが使えなかったので、即時関数が必要でした。

ブロックスコープを使えば、

    {
        let num = 1
    }

で実行できます。

アロー関数

アロー関数とは、=>を使って関数リテラルを表現したものです。

var 関数名 = (関数リテラル)

一般的に関数リテラルは、
function(引数,…){関数の処理}
と書いていました。

アロー関数では、この関数リテラルを

(引数,…) => (関数の処理)

という風に簡単に表せます。

for of

    for(要素 of 反復できるオブジェクト(配列など)){
        各要素への処理
    }

関数のデフォルト引数

    function test(引数 = "デフォルト値"){
        処理
    }
    test();
    test("hoge");

関数の仮引数の定義で、値を代入しておくと、引数がなかった場合のデフォルト値として使えます。