모던 자바스크립트 - strict mode

1. strict mode는 ES5부터 도입 된 것으로 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. ES6부터 도입된 클래스와 모듈은 기본적으로 strict mode가 적용된다.

 

2. strict mode 왜 써야하나? 왜냐하면 자바스크립트 엔진은 암묵적으로 개발자가 원하지 않는 행위를 하는 경우가 존재함. 이런 행위를 막기 위해 명시적인 에러를 발생시킬 필요가 있다는 것이다.

// 전역 객체에 x 프로퍼티를 동적으로 생성한다.
function foo() {
	x = 10;
}

foo();

 

3. strict mode를 사용하려면 아래처럼 전역의 선두 또는 함수 몸체의 선두에 'use strict'를 추가한다. 

'use strict';

function foo() {
	x = 10; // referenceError
}

foo();

 

하지만 전역에 선언하는 것은 외부 서드파티 라이브러리를 사용하는 경우 라이브러리가 non-strict mode인 경우가 존재하기 때문에 strict mode를 적용하는 것은 바람직 하지 않다. 따라서 함수에서 선두에 strict mode를 사용하자.

단, strict mode가 적용된 함수가 적용되지 않은 함수를 참조하는 것을 방지하기 위해 즉시 실행 함수에만 strict mode를 사용하자.

 

4. strict mode가 발생시키는 에러

• 암묵적 전역

'use strict';

function foo() {
	x = 10; // referenceError
}

foo();

• 변수, 함수, 매개변수의 삭제

'use strict';

const x = 1;

delete x; // syntax error

function foo(a) {
	delete a; // syntax error
}

delete foo; //syntax error

• 매개변수 이름의 중복

'use strict';

// syntax error
function foo(x, x) {
	
}

 

• with 문의 사용

with문은 전달된 객체를 스코프 체인에 추가한다. 이정도만 알자.

(function () {
	'use strict';
    
    // syntax error
    with({x: 1}) {
    	console.log(x);
    }

}

)

 

5. strict mode 적용에 의한 변화

• 일반 함수의 this

strict mode에서 함수를 일반함수로서 호출하면 this에 undefined가 바인딩된다. 생성자 함수가 아닌 일반 함수 내부에서는 this를 사용할 필요가 없기 때문이다.

 

(function () {
	'use strict';
    
    function foo() {
    	console.log(this); // undefined
    }
    foo();

})

 

• arguments 객체

strict mode에서 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영이 되지 않는다.

 

(function (a) {
	'use strict';
    a = 2;
    console.log(arguments); // {0: 1, length: 1}
}(1));