JavaScriptのStrictモードについて

2020/09/20 21:192020/09/20 21:19

JavaScriptのStrictモードについて忘備録としてまとめる。

TypeScriptでコードを書く場合、コード内に構文エラーなどが混入していても実行前のビルドでエラー検知が可能である。
ただし、ビルドが不要なJavaScriptを書いて実行した場合には、実行時エラーが発生することがある。

そういったコード内のバグを検知してエラーとしてくれるのがStrictモードである。

Strictモードとは

ECMAScript5（2009年12月リリース）で導入された機能。

JavaScriptの自由度を制限する代わりに堅牢なコードとなることを目的としたモード。

JavaScriptの規格とブラウザの種別によって適用されるルールに多少の違いがある。

JavaScriptコードの先頭に'use strict';という構文を記載することでStrictモードになる。

'use strict';
const test = () => {
    hoge = 1;
    console.log(hoge);
}
test();

関数スコープ内に記載すれば関数内でのみStrictモードが有効となる。

const test = () => {
    'use strict';
    hoge = 1;
    console.log(hoge);
}
test();

ECMAScript2015から追加されたJavaScriptモジュールでは自動的にStrictモードになる。

const test = () => {
    hoge = 1;
    console.log(hoge);
}
export default test;

実際に遭遇しそうなものを何個か抜粋。

変数hogeを0で初期化して次行で1を代入するコード。構文エラー等は無いので問題なく動作する。

const test = () => {
    let hoge = 0;
    hoge = 1;
    console.log(hoge);
}
test();
// => 1

上と同じく変数hogeの初期化後に別の値を代入するコード。ただし、代入する対象の変数名を間違えてグローバル変数hugaを定義してしまった場合。
Strictモードが有効でない場合はエラーとならずに動作する。

const test = () => {
    let hoge = 0;
    huga = 1; // スペルミス 誤：huga、正：hoge
    console.log(hoge);
}
test();
// => 0

Stirctモードが有効の場合、ReferenceErrorエラーが発生する。

'use strict';
const test = () => {
    let hoge = 0;
    huga = 1;
    console.log(hoge);
}
test();
// => ReferenceError: huga is not defined

'use strict';
function test() {
    const private = 1;
    console.log(private);
}
test();
// => SyntaxError: Unexpected strict mode reserved word

対象の予約語は以下の通り。

implements, interface, let, package, private, protected, public, static, yield, class、enum、export、extends、import、super