OTTER-LOG

strict mode를 사용하는 이유

function foo() {
  x = 10;
}

foo();
console.log(x); // ?

스트릭트 모드를 사용하지 않으면 위 코드는 에러가 나지 않는다. foo 함수 호출 시점에 자바스크립트 엔진은 변수 x를 스코프체인에서 찾지만, 존재하지 않아 x = 10 을 window 의 프로퍼티로 설정한다. 그리고 console.log(x) 로 이를 읽어낼때 스코프 체인을 타고 올라가 window.x 에서 이를 발견하고 10 의 값이 출력된다.

이러한 암묵적인 전역 변수는 오류를 발생시키는 원인이 될 가능성이 크고, 반드시 let, const 키워드를 사용해 변수를 선언해야 한다. 그런데, 개발 환경에서 이에 대한 오류가 발생하지 않으면 실수가 생겼을 때에 이를 해결하기 쉽지 않다.

"use strict";

function foo() {
  x = 10;
}

foo();
console.log(x); // ?

스트릭트 모드를 사용하면, 해당 부분의 문제는 해결된다. 이제 콘솔에는 다음 오류가 발생한다.

Uncaught ReferenceError: x is not defined

strict mode에서 달라지는 부분

암묵적 전역 변수

위의 첫번째 예시와 동일한 부분이다.

(function () {
  'use strict';

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

// 선언하지 않은 변수를 참조하면 오류가 발생한다.

매개 변수 이름의 중복

(function () {
  'use strict';

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

일반 함수의 this

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

foo();

일반함수를 사용할때의 this 는 strict mode 가 아니면 window 를 가리킨다. 그런데 사실 일반함수의 this 는 사용될일도 없다.

(function () {
  'use strict';

// -------- 일반함수의 this
  function foo() {
    console.log(this); // undefined
  }
  foo();

// ------- 생성자 함수를 사용하는 this
  function Foo() {
    console.log(this); // Foo
  }
  new Foo();
}());

strict mode 를 사용하면 일반함수의 this 에는 undefined 를 가리키게 된다.

Ref

• 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode