Babelで学ぶECMAScript6（入門編）

LINEフロントエンドレンジャーのWeb開発術 第5回

let

　letはブロックスコープ内でのみ有効な変数を宣言することができる構文です。ES5まではブロックスコープの変数を扱えなかったため、同じ変数名で宣言すると変数は上書きされます。

'use strict';

var x = 1;
if (true) {
    var x = 3;
}
console.log(x);  // 3

　この例では変数xを2か所でvarを使い宣言しているため、後に宣言された値で上書きされます。このような場合、letを使うことで同じ変数名であってもブロックスコープ内でのみ有効な別の変数として扱われるため、安全に変数を使うことができます。

'use strict';

var x = 1;
if (true) {
    let x = 3;
}
console.log(x); // 1

　Babelでトランスパイルしたコードには重複した変数名のプレフィックスに"_"が付与されvarに置き換わり、疑似的にlet相当の動作をするようになります。

'use strict';

var x = 1;
if (true) {
    var _x = 3;
}
console.log(x);

　2つ以上変数名が重複した場合は変数名のサフィックスにインクリメントした数値が付与され変換されます。

'use strict';

var x = 1;
if (true) {
    var _x = 3;
    if (true) {
        var _x2 = 5;
        if (true) {
            var _x3 = 7;
        }
    }
}
console.log(x);  // 1

補足

　letについては弊社Engineer's Blogでも詳しく解説しています。

 

• JavaScriptのクロージャ入門とECMAScript 6のletキーワードによる変数宣言

const

　constは定数の利用を可能にします。下のコードではconstで宣言された変数VERSIONに5を代入しています。

'use strict';

const VERSION = 6;
VERSION = 5;

　Babelでトランスパイルすると下のようなエラーが表示されます。Babelではトランスパイル時にconstへの再代入をチェックしてエラーとすることで、定数として扱うことを可能にしています。

SyntaxError: const.es6: Line 4: "X" is read-only
  2 |
  3 | const X = "ES6";
> 4 | X = "ES5";
    | ^
  5 |

　エラーになっている行を削除して再度babelコマンドでトランスパイルを行うとconstはvarに変換されます。

"use strict";

var X = "ES6";

　constはletと同様にブロックスコープです。

'use strict';

const X = "ES6";

if (true) {
    const X = "ES5";
    console.log(X);	// "ES5"
}
console.log(X);	// "ES6"

"use strict";

var X = "ES6";

if (true) {
    var _X = "ES5";
    console.log(_X);
}
console.log(X);