자바스크립트 Strict mode

암묵적 전역

function foo() {
  x = 10;
}

foo();

console.log(x);

 

위 코드의 실행 결과는 무엇일까? 에러일까? 🤔

 

그렇지 않다. 자바스크립트 엔진은 x를 콘솔에 출력하기 위해 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 하지만 x는 선언되어 있지 않다. 따라서 foo함수의 상위 스코프인 전역 스코프에서 x 변수의 선언을 또 찾지만, 전역에도 없다.

 

이럴 경우 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 따라서 콘솔에는 10이라는 숫자가 찍히고, 마치 정상 동작하는 코드처럼 보인다. 이런 현상을 암묵적 전역이라 한다.

Strict mode

개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원이이 될 가능성이 크다. 코드의 규모가 커질수록 개발자는 에러가 발생하지 않는 상황을 보며 '아 이전에 이미 선언한 변수구나.'라고 생각하여 검색하겠지만, 검색 결과에는 선언한 적 없이 계속 사용되고 있는 유령 변수를 보게될지도 모른다 👻.

 

이런 암묵적 전역 외에도 개발자는 오타나 사소한 실수를 할 수도 있고, 이는 불안정한 코드를 만든다. 따라서 이처럼 잠재적인 오류를 발생시키는 개발 환경을 만들기 위해 자바스크립트 ES5에서는 strict mode가 추가되었다.

 

Strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 검토하여, 오류 발생 확률이 높은 코드에 대해 명시적 에러를 발생시킨다.

 

(오류 발생 위험 코드를 보고)

sloppy mode: '뭐...별 문제 있겠어...? 통과!'
strict mode: '응 안돼. 에러.'

 

Strict mode를 적용하기 위해서는 'use strict' 라고 명시적으로 함수에 추가해줘야 한다. 참고로, ES6에서 도입한 클래스와 모듈은 기본적으로 Strict mode가 적용된다.

 

🔨 ESLint 🔨

ESLint 같은 도구는 Strict mode와 비슷한 역할을 한다. ESLint는 정적 분석 기능을 통해 코드 실행 전에 코드를 검토하여 문법적 오류, 잠재적 오류를 찾아내 알려준다. 추가로 ESLint는 코드 작성 규칙도 지정할 수 있다.

Strict mode를 적용하면,,,

1. 선언하지 않은 변수를 참조할 수 없다. 참조 시 ReferenceError가 발생하다.

2. 함수 파라미터 이름을 중복되게 선언할 수 없다. 선언 시SyntaxError가 발생한다.

3. 일반 함수에서의 this에는 전역 객체가 아닌 undefined를 바인딩한다. 에러가 발생하지 않는다.

4. 함수의 파라미터로 전달 된 인수를 재할당해도 arguments에 반영되지 않는다.

 

function foo(arg) {
  'use strict';
  arg = 2;
  
  console.log(arguments[0]); // 1
};

foo(1);

 

 

출처

모던자바스크립트 Deep Dive 20장 strict mode