[JavaScript] 엄격 모드 (use strict)

엄격 모드는 ES5에 도입된 문법이다. 자바스크립트 최상단에 use strict 문구를 넣어 실행한다. 또는 함수 내에서도 작성 가능하다.

 

엄격 모드를 실행하기 전에는 관용적으로 느슨하게 허용되는 '오류를 유발할 가능성 있는 문법' 때문에 디버깅이 어려운 요인이 되곤 했다. strict mode를 실행해주면 미리 해당 에러를 출력해서 바로잡을 수 있도록 도와준다. 업데이트 될 새로운 명세의 자바스크립트에 대응하기도 편하고, 최적화 이슈에도 도움이 되어서 use strict를 사용이 권고된다.

 

리액트, 뷰 같은 프레임워크를 사용할 때는 자동으로 엄격 모드를 사용할 수 있게 해줘서 크게 신경쓰지 않았지만, 바닐라 자바스크립트 프로젝트를 할 때는 추가해주는 습관이 좋겠다.

 

보통 npx로 CRA을 하고 나면 아래 같은 코드를 볼 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode> 
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

<React.StrictMode>가 엄격 모드를 설정해주는 부분이다.

 

대표적으로 엄격 모드와 일반 모드(or sloppy mode)의 차이점은 this 컨텍스트의 차이를 들 수 있다. 일반 모드에서는 null 또는 undefined로 출력되어야 할 상황에 최상위 컨텍스트로 대체되지만, strict mode를 사용할 경우 그러한 대체가 일어나지 않아 그대로 null과 undefined로 출력된다.

 

선언하지 않은 변수를 할당만으로 전역 객체화하는 것도 금지되고, 기존에 delete 키워드를 통해 삭제한 변수나 함수를 참조할 수 있었던 것도 금지한다.