[JAVASCRIPT.INFO/Series #3]자바스크립트 엄격 모드(strict mode)

 

 

 

쉬운 주제라고 생각을 했지만, 역시 이 분야에서는 호락호락한 게 없다. 

대충 아는 것보다 아예 모르는게 낫다. 어설프게 알바에 조금만 더 노력해서 제대로 아는 게 중요하다.

 

 

---

 

엄격 모드(strict mode)란?

자바스크립트는 오랫동안 호환성 이슈 없이 발전했다. 

이 말은 기존의 기능을 변경하지 않으면서 새로운 기능이 추가 됐다는 걸 의미한다.

또한, 기존에 작성한 코드는 절대 망가지지 않는다는 장점과 자바스크립트 창시자들이 했던 실수와 불완전한 결정 또한 이어진다는 의미이다. 

 

 

그러던 도중, 2009년 ECMAScript(ES5)가 등장하고 나서 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 

이 말은 즉, 기존 기능을 변경했기 때문에 하위 호환성 문제가 발생할 수 있다는 의미기도 하다.

 

 

그래서 변경 사항 대부분은 ES5 기본 모드에서 활성화되지 않도록 설계되었다.

다시 말하면, 엄격 모드(strict mode)를 설정할 때와 하지 않았을 때를 기준으로 적용여부가 정해진다는 의미이다.

 

(엄격 모드는 'use strict'라는 특별 지시자를 사용해서 활성화시킬 수 있다)

 

 

즉, 엄격 모드는 자바스크립트 언어의 문법을 보다 엄격하게 적용하여
기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 

 

 

 

이와 비슷한 도구로, ESLint로 엄격 모드와 유사한 효과를 얻을 수있다.

이것은 정적 분석 기능을 통해 소스 코드를 실행하기 전에 소스 코드를 스캔하여 문법적 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 이유를 리포팅한다.

 

 

// 전체 스크립트 엄격 모드 구문
'use strict';
var v = "Hi!  I'm a strict mode script!";

 

 

 

TMI

• 가끔 엄격하지 않는 기본값을 "느슨한 모드(sloppy mode)"라고 부르기도 한다. (공식 용어는 아니다)

 

 

 

이 특별 지시자는 'use strict'와 "use strict"를 스크립트 최상단에 입력한다.

입력하면, 스크립트 전체가 "모던한 방식"으로 동작한다.

 

 

여기서, 모던한 방식이란 'Chrome Dev Summit 2020'에서 이렇게 정의하였다.

 

모던 자바스크립트는 모든 모던 브라우저에서 지원하는 문법으로 작성된 자바스크립트 코드를 의미한다.

 

*모던 브라우저는 시장 점유율이 90%를 차지하는 Chrome, Firefox, Safari, Edge, Samsung Browser, Opera를 가리킨다.

 

 

방금, 엄격 모드 지시자는 스크립트 최상단에 입력한다고 했는데, 함수 내에서도 엄격 모드를 사용할 수 있다. 

함수 본문 맨 앞에 입력해서 사용할 수 있다. 대개는 스크립트 전체에 적용하지만... 

또한, 함수마다 엄격 모드를 적용시킨다는 것은 번거로운 일이며 함수마다 적용 여부를 구분하는 것은 바람직하지 않기 때문에 권장하지 않는다.

 

 

function strict() {
  // 함수-레벨 strict mode 문법
  'use strict';
  function nested() { return "And so am I!"; }
  return "Hi!  I'm a strict mode function!  " + nested();
}
function notStrict() { return "I'm not strict."; }

 

 

 

참고로, 스크립트 전체든, 함수 내부든 최상단에 위치하라고 이야기했는데,

만약 (주석을 제외한) 최상단에 위치하지 않으면,  엄격 모드가 적용이 활성화되지 않기 때문이다.

또한, 한 번 엄격 모드가 적용되면 자바스크립트 엔진을 이전 방식으로 되돌리는 지시자나 방법은 존재하지 않는다.  

 

 

 

'use strict'를 꼭 사용해야 하는지에 대해 궁금해하실 수 있을 거 같다.

모던 자바스크립트는 '클래스'와 '모듈'을 사용하면 use strict가 자동 적용된다. 

그러니, 코드를 클래스와 모듈을 사용한다면 'use strict'를 생략해도 된다. 

 

 

function strict() {
    // 모듈이기때문에 기본적으로 엄격합니다
}
export default strict;

 

 

 

TMI

• 엄격 모드는 안전한 자바스크립트에 도움을 주며 흔한 좋지 않은 부분에 대한 이슈를 명확하게 하는데 도움을 준다. 
• 그래서 (ES5에서는 옵션이지만 ES6에서는 새로운 기능들을 위해 필요하기 때문에) 바벨 같은 툴이나 사람들을 자동으로 'use strict'를 최상단에 입력한다.

 

 

*Babel이란, 주로 ECMAScript 2015+ 코드를 현재 브라우저와 오래된 브라우저 환경의 호환될 수 있도록 자바스크립트 버전을 바꿔주는 자바스크립트 컴파일러다.  

 

 

 

엄격 모드가 발생시키는 에러를 살펴보자.

 

1. 암묵적 전역 변수

 

(function () {
  'use strict';

  x = 1;
  console.log(x); // ReferenceError: x is not defined
}());

 

 

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

(function () {
  'use strict';

  var x = 1;
  delete x;
  // SyntaxError: Delete of an unqualified identifier in strict mode.

  function foo(a) {
    delete a;
    // SyntaxError: Delete of an unqualified identifier in strict mode.
  }
  delete foo;
  // SyntaxError: Delete of an unqualified identifier in strict mode.
}());

 

 

 

3. 매개 변수 이름의 중복

(function () {
  'use strict';

  //SyntaxError: Duplicate parameter name not allowed in this context
  function foo(x, x) {
    return x + x;
  }
  console.log(foo(1, 2));
}());

 

 

 

4. with문 사용

(function () {
  'use strict';

  // SyntaxError: Strict mode code may not include a with statement
  with({ x: 1 }) {
    console.log(x);
  }
}());

 

 

 

5. 일반 함수의 this

(function () {
  'use strict';

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

  function Foo() {
    console.log(this); // Foo
  }
  new Foo();
}());

 

 

 

6. 브라우저 호환성

IE9 이하는 지원하지 않는다.

 

 

요약

엄격 모드란, 'use strict'란 특별 지시자를 스크립트 최상단에 입력해,

기존에 무시되던 오류를 발생시키거나, 자바스크립트 엔진 최적화 작업의 문제 코드에 대해

자바스크립트 문법을 엄격하게 적용하는 방식

 

 

 

 

 

출처:

JAVASCRIPT.INFO | https://bit.ly/356EstL

MDN | https://mzl.la/3clC9qK

Violet Bora Lee | https://bit.ly/3z6EYFK

FreeCodeCamp | https://bit.ly/3wXjZDt

Babel | https://babeljs.io/docs/en/

Poiemaweb | https://bit.ly/3z6td25