JavaScriptのStrictモードを使ってみる

JavaScriptのStrictモード(厳格モード)について簡単に試してみます。

Strictモードについて

スクリプトの最初に”use strict”という文を追加することで、Strictモードが有効になります。
Strictモードを有効にすることで、一部の曖昧な実装などに対してエラーが発生するようになります。
曖昧な部分がエラーになることで問題点に早く気づくことができ、将来的な不具合の発生を防止する効果が期待できます。

使用方法

Strictモードはスクリプト全体または個別の関数に適用できます。
スクリプト全体に設定する場合、スクリプトの先頭に”use strict”の宣言を追加します。

'use strict';
v = 'サンプル'; // Uncaught ReferenceError: v is not defined

2行目で未宣言の変数に対して代入を行なっていて、通常では特にエラーになりませんが、Strictモードの場合はエラーが発生するようになります。
スクリプト全体をStrictモードにするデモページ

関数内に設定する場合、その関数内の先頭に”use strict”の宣言を追加します。

// スクリプト全体をStrictモードにしていないので、この代入ではエラーが出ない
v = 'サンプル';

function test() {
	'use strict';
	t = 'サンプル2';
}
test(); // Uncaught ReferenceError: t is not defined

先ほどと同様、関数内で未宣言の変数に対して代入を行なうとエラーが発生しました。
関数内をStrictモードにするデモページ

エラーの例

前の例では未宣言の変数に対して値を代入するとエラーになりましたが、それ以外のエラーになる例をいくつかみてみます。

デフォルト引数の設定された関数をStrictモードにすると、エラーになります。

function sum(a = 1, b = 2) {
	'use strict'; // Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
	return a + b;
}

デフォルト引数の場合のデモページ

残余引数の場合も同様にエラーになります。

function sum(...num) {
	'use strict'; // Uncaught SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
}

残余引数の場合のデモページ

ただし、関数に対してではなくスクリプト全体に対してStrictモードを設定した場合、デフォルト引数や残余引数の関数でエラーは発生しません。

'use strict';
function sum(a = 1, b = 2) {
	return a + b;
}

スクリプト全体にStrictモードを設定してデフォルト引数を使用するデモページ

NaNやundefined、Infinityなど書き換え不可能なグローバルへ代入しようとするとエラーになります。

'use strict';
var NaN = 5; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'
var undefined = 5; // Uncaught TypeError: Cannot assign to read only property 'undefined' of object '#<Window>'
var Infinity = 5; // Uncaught TypeError: Cannot assign to read only property 'Infinity' of object '#<Window>'

書き込み不可のグローバル変数に代入するデモページ

関数の引数名が重複している場合もエラーになります。

function sum(a, a, c) {
	'use strict'; // Uncaught SyntaxError: Duplicate parameter name not allowed in this context
	return a + a + c;
}

引数名が重複するデモページ

予約語を変数などで使用しようとするとエラーになります。

'use strict';
var private = 'test'; // Uncaught SyntaxError: Unexpected strict mode reserved word

予約語を変数で使用するデモページ