ES6主要文法概要

const宣言

変更不可の定数を宣言する。再代入・再宣言は不可。代入せずに宣言した場合や、同一スコープ内で重複宣言した場合はエラーとなる。ブロックスコープ有効。

let宣言

変数を宣言する。varと異なり、letは宣言したブロックスコープ内でのみ有効。

// varを使った場合
var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 10
// letを使った場合
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 6

varはグローバルスコープでiが共有されるため、最後の値が参照される。letは各ループごとに新しいiが生成される。

ブロックスコープ

ES6では{}で囲まれた部分がブロックスコープとなる。

// IIFEによる実装
(function () {
    var tmp = 123;
    // 処理
})();

// ブロックスコープによる実装
{
    let tmp = 123;
    // 処理
}

アロー関数

functionキーワードの代わりに=>を使って関数を定義できる。

// 単一の引数と戻り値
var f = v => v;
// 引数がない場合
var f = () => 5;
// 複数の引数
var sum = (num1, num2) => num1 + num2;
// 複数の処理がある場合
var sum = (num1, num2) => {
    return num1 + num2;
};
// オブジェクトを返す場合
var getObject = () => ({a: 1, b: 2});

アロー関数内のthisは関数定義時のスコープを参照する。

関数パラメータのデフォルト値

パラメータにデフォルト値を設定できる。

// ES5スタイル
function f(x, y) {
    y = y || 7;
    return x + y;
}

console.log(f(1)); // 8
// ES6スタイル
function f(x, y = 7) {
    return x + y;
}

console.log(f(1)); // 8

省略不可のパラメータを明示する例:

function check() {
    throw new Error('xパラメータは必須です');
}

function f(x = check(), y = 7) {
    return x + y;
}

f(); // エラー

Proxyによるプロパティアクセス制御

オブジェクトにアクセスする前に代理処理を挟む仕組み。

let Person = {
    name: 'es6',
    sex: 'male'
};

let person = new Proxy(Person, {
    get(target, key){
        return target[key];
    },
    set(target, key, value){
        "use strict";
        if (key !== 'sex') {
            target[key] = value;
        }
    }
});

console.table({name: person.name, sex: person.sex});
person.sex = 'female';
person.name = 'es6+'
console.table({name: person.name, sex: person.sex});

nameプロパティのみ更新可能、sexプロパティは変更不可。

タグ: javascript ES6 proxy

8月12日 14:41 投稿