이전에 CRA를 사용해서 React 프로젝트를 생성하면 항상 콘솔에 값이 두번씩 출력되는 현상이 있었는데, 이때는 두번씩 출력되는게 싫어서 strict mode코드를 그냥 제거하고 진행했던 경험이 있다. 당시에는 strict mode가 뭔지 잘 몰랐는데 이번 기회에 자세히 알아보고자 한다.

참고 자료:
보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode [모던 자바스크립트]
엄격 모드 [모던 JavaScript 튜토리얼]

Strict Mode란?

Strict는 엄격한이라는 뜻이다. 자바스크립트는 상당히 자비로운(?) 언어이기 때문에 자동으로 형변환을 해준다던가 오류임에도 불구하고 코드를 그냥 실행시키거나 오류라고 알려주지 않는 경우가 많다.

아래 예제 코드가 실행되면 결과는 무엇일까?

function foo() {
  x = 10;
}

console.log(x); // ?

foo 함수 내에서 선언하지 않은 변수 x에 10을 할당하였는데, 이 때 변수 x를 찾아야 x에 값을 할당할 수 있다. 그렇기에 자바스크립트 엔진은 변수 x가 어디서 선언되었는지 스코프 체인을 통해 검색한다고 한다.

자바스크립트 엔진은 우선 x에 10을 할당하는 함수인 foo 함수의 스코프에서 변수 x의 선언을 탐색한다. 하지만 x에 대한 선언이 없어서 실패하고 변수 x의 선언을 찾기 위해 상위 스코프로 넘어가서 변수 x의 선언을 탐색한다.

하지만 전역 스코프에도 변수 x의 선언이 존재하지 않기 때문에 에러를 반환할 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 프로퍼티 x를 동적으로 생성한다고 한다. 결국 식별자 x는 전역 변수가 된다. 이렇게 전역 변수가 된 변수를 암묵적 전역 변수(implicit global)라고 한다.

이렇게 개발자의 의도와는 상관없이 자바스크립트 엔진이 생성한 암묵적 전역 변수는 오류를 발생시키는 원인이 될 수 있다. 따라서 반드시 var, let, const 키워드를 사용하여 변수를 선언한 후에 사용해야한다.

이러한 잠재적인 오류 발생을 줄이기 위해서는 잠재적인 오류를 발생시키기 어려운 개발 환경을 만들고, 그 환경에서 개발을 하는 것이 근본적인 해결책이다.

이를 지원하기 위해 ES5부터 strict mode가 추가되었다. strict mode는 자바스크립트 언어의 문법을 기존보다 엄격하게 적용해서 기존에 무시되던 오류를 발생시킬 수 있다.

Strict Mode의 적용

strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 use strict;를 추가하면된다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다.

'use strict';

function foo() {
  x = 10; // ReferenceError: x is not defined
}
foo();

함수 몸체의 선두에 추가하면 해당 함수와 중첩된 내부 함수에 strict mode가 적용된다.

function foo() {
  'use strict';
  
  x = 10; // ReferenceError: x is not defined
}
foo();

하지만 strict mode를 전역에 선언하는 것을 바람직하지 않다고 한다.
그 이유는 외부 서드 파티 라이브러리를 사용하는 경우, 라이브러리가 non-strict mode일 경우가 있기 때문이라고 한다. 이러한 경우, 즉시 실행 함수로 스크립트 전체를 감싸서 스코프를 구분하고 즉시 실행 함수의 선두에 strict mode를 적용하는 것이 좋다.

마무리

JavaScript는 좋은 언어이긴 한데, TypeScript라던가 Strict Mode같은 보조가 많이 필요한 것 같다...😅