6. Javascript의 strict mode

자바스크립트 strict mode

strict mode란?

ECMAScript5(ES5)에서 소개된 strict mode(엄격 모드)에 대해 알아보겠습니다.

자바스크립트의 엄격 모드는 일반 코드와는 다른 시멘틱을 가지고 있기 때문에,

이를 지원하지 않는 브라우저에서는 엄격모드와 비-엄격 모드의 코드가 다른 방식으로 동작할 것입니다.

엄격 모드와 비-엄격 모드의 코드는 공존할 수 있습니다. 따라서 선택적으로 사용하는 것이 가능합니다.

 

엄격 모드에서는 평범한 자바스크립트의 시멘틱에 몇 가지 변경을 일으킵니다.

1. 기존에 조용히 무시되던 에러들을 throwing 합니다.
2. Javascript 엔진의 최적화 작업을 어렵게 하는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일 코드보다 더 빨리 작동할 수 있습니다.
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의될 문법을 금지합니다.

아직 와닿지는 않는 것 같습니다. 한 가지 예시로 함께 알아보겠습니다.

function foo() {
    myVariable = 10;
}

foo();

console.log(myVariable); // ?

위 코드의 실행 결과는 무엇일까요?

지난 포스트에서 알아보았듯, 자바스크립트 엔진은 스코프 체인으로 해당 변수를 검색할 것이고, 찾지 못했다면 암묵적 전역으로 최상위 객체에 myVariable이란 프로퍼티를 추가하여 결과는 10이 출력될 것입니다.

2021.07.15 - [Javascript] - 5. Javascript의 스코프

 

개발자의 의도와는 상관없이 자바스크립트 엔진이 생성 한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 있습니다.

따라서 var, const, let의 키워드를 사용해 변수의 선언 후 사용하는 것이 보다 나은 방법입니다.

 

개발자의 오류를 줄여 안정적인 코드를 생산할 수 있게 해주는 것이 바로 strict mode입니다.

자바스크립트 언어의 문법을 보다 엄격하게 적용하여 기존에는 무시되던

1. 오류를 발생할 가능성이 높거나, 2. 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시켜 줍니다.

 

ESLint와 같은 린트 도구를 사용하는 것도 유사한 효과를 얻을 수 있습니다.

린트 도구는 정적 분석을 통해 코드를 실행하기 전 문법적, 잠재적 오류를 리포팅해주는 유용한 도구입니다.

strict mode의 적용

strict mode를 적용하기 위해서는 전역의 최상단 또는 함수 몸체의 상단에 'use strict'; 를 추가하면 됩니다.

// 전체 스크립트 엄격 모드 구문
'use strict';

function foo() {
    myVariable = 10; // Reference Error
}
foo();

strict mode를 적용하게 되면 Reference Error가 발생하는 것을 확인할 수 있습니다!

 

하지만 비-엄격 모드를 사용하는 외부 라이브러리와의 충돌이 일어날 수 있기 때문에

전역에 strict mode를 적용하는 것은 바람직하지 않습니다.

 

그 대신 함수 단위로 strict mode를 적용할 수 있습니다.

function foo() {
    // 함수 단위 엄격 모드 구문
    'use strict';
    myVariable = 10; // Reference Error
}
foo();

또한, ECMAScript5의 module로 적용되는 전체 콘텐츠는 자동으로 엄격 모드를 적용합니다.

// foo.js

function foo() {
    // 모듈은 기본적으로 strict mode가 적용됩니다!
    myVariable = 10;
}

export default foo;

strict mode의 에러 발생 대표적인 사례

1. 암묵적 전역 변수

선언하지 않은 변수를 참조하게 되면 Reference Error가 발생합니다.

function foo() {
    y = 10; // Reference Error
}

2. 변수, 함수, 매개변수의 삭제

var x = 10;
delete x; // SyntaxError

function foo(param) {
	delete param; // SyntaxError
};

delete foo; // SyntaxError

3. 매개변수 이름의 중복

function foo(a, a) { } // SyntaxError

4. 삭제할 수 없는 프로퍼티의 삭제

delete Object.prototype; // TypeError

5. 일반 함수의 this

엄격 모드는 일반 함수에서 this키워드를 통해 window를 참조하지 않고 undefined를 반환합니다.

이때 에러는 발생하지 않습니다.

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

foo();
new foo(); // foo

6. 미래 ECMAScript 버전의 키워드

interface, implements, private 등 미래의 ECMAScript 버전에서 사용되는 예약어와 같은 이름의 변수, 파라미터 등으로 사용할 수 없습니다!

function foo(private) { // SyntaxError
    var static = 'static'; // SyntaxError
    var implements = 'implements'; // SyntaxError
    
    function interface() { } // SyntaxError
    function public() { } // SyntaxError
}

브라우저 호환

현재 주류의 브라우저들은 엄격 모드를 지원하고 있지만, 맹목적으로 의지할 수는 없습니다.

엄격 모드는 시멘틱을 바꾸기 때문에, 이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저에 에러를 야기할 수 있습니다.

따라서 사용 시에는 주의해야 하며, 충분한 테스트로 확실히 한 후 사용해야 할 것입니다.