[Deep dive] 20. strict mode

strict mode란?

function foo() {
  x = 10;
}
foo();

console.log(x); // ?

다음 코드에서 foo함수는 x변수를 스코프 체인을 통해 검색하게 된다.
x변수는 전역 스코프에서도 존재하지 않기 때문에 ReferenceError를 일으킬거 같지만
자바스크립트 엔진에서 암묵적 전역을 통해 x 프로퍼티를 동적 생성한다.

개발자의 의도와 상관없이 발생한 암묵적 전역은 오류를 발생시킬 수 있다.
따라서 let var const 키워드를 사용해 변수를 선언한 다음 사용해야 한다.
이를 지원하기 위해 strict mode가 추가되었다.

strict mode의 적용

전역의 선두 또는 함수 몸체의 선두에 use strict를 추가한다.

function foo() {
x = 10; // 에러를 발생시키지 않는다.
'use strict';
}
foo();

❖ 전역에 strict mode를 적용하는 것은 피해야 한다.

❖ 함수 단위로 strict mode를 적용하는 것도 피해야 한다.

• 일일이 적용하는 것은 번거로운 일이며 strcict mode가 적용된 함수가 참조할 함수 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가될 수 있음

strict mode에 의한 에러

암묵적 전역

선언하지 않은 변수를 참조하면 RreferenceError 발생

(function () {
'use strict';

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

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

delete 연산자로 변수, 함수, 매개변수의 삭제하면 SyntaxError 발생

(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.
}());

매개변수 이름 중복

중복된 매개변수 이름 사용하면 SyntaxError 발생

(function () {
 'use strict';

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

---

strict mode 적용에 의한 변화

일반 함수의 this

strict mode에서 함수를 일반 함수로서 호출하면 this에 undefined가 바인딩된다.

(function () {
  'use strict';

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

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

arguments 객체

strict mode에서 매게변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다.

(function (a) {
  'use strict';
  // 매개변수에 전달된 인수를 재할당하여 변경
  a = 2;

  // 변경된 인수가 arguments 객체에 반영되지 않는다.
  console.log(arguments); // { 0: 1, length: 1 }
}(1));