[JS Basic] strict mode

function foo() {
  x = 10;
}

foo();

console.log(x); // 

위에 코드를 살펴보자. 함수 내에서 변수 선언을 하지 않았다. 전역 스코프 어디에도 x변수를 선언한 것은 보이지가 않는다. 그럼 당연히 ReferenceError을 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체 x 프로퍼티를 생성한다. 이러한 현상을 암묵적 전역 이라고 한다.

따라서 반드시 변수를 선언할 때 var, let, const 키워드를 사용하여 변수를 선언한 다음 사용하는 것이 좋다.

여기서 우리가 배울 것은 무엇인가? 바로 이렇게 우리가 모르는 오류들이 발생할 수도 있기 때문에 이를 방지하는 방법에 대해 배워보고자 한다. strict mode는 자바스크립트의 언어의 문법을 좀 더 엄격하게 적용하여 명시적인 에러를 발생시킨다.

strict mode 적용

strict mode를 사용하는 법은 전역의 선두 또는 함수 몸체의 선두에 'use strict'; 를 추가하는 것이다.

하지만 주의해야 할 점은 전역에 strict mode를 적용하거나 함수 단위로 strict mode를 적용하는 것은 피해야 한다. 함수 단위로 적용하는 것은 비효율적이기도 하고 외부에서 참조할 내용들을 strict mode를 제대로 적용하지 않는다면 문제가 발생할 수도 있기 때문이다.

즉시 실행함수의 선두에 적용하는 것이 가장 좋다.

(function () {
  'use strict';
  
  // Something
}());

strict mode가 발생시키는 에러

- 암묵적 전역

선언하지 않은 변수를 참조하면 에러가 발생한다.

(function () {
  'use strict';
  
  x = 1;
  console.log(x); // Reference Error
}());

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

delete 연산자로 삭제하면 에러가 발생한다.

(function () {
  'use strict';
  
  var x = 1;
  delete x; // SyntaxError
}());

- 매개변수 이름의 중복

중복된 매개변수 이름을 사용하면 에러가 발생한다.

(function() {
  'use strict';
  
  // SyntaxError
  function foo(x, x) {
    return x + x;
  }
}());

strict mode 적용에 의한 변화

- 일반 함수의 this

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

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

- arguments 객체

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

(function(a) {
  'use strict';
  
  a = 2;
  
  console.log(arguments); // { 0: 1, length: 1}
}(1));