모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 20장 strict mode

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 20장 strict mode

20.1 strict mode란?

strict mode는 ES5에서 도입된 문법으로, 자바스크립트에서 선택적으로 사용할 수 있는 보다 엄격한 문법과 실행 모드입니다. 이 모드를 활성화하면, 일반적으로 무시되거나 조용히 실패하던 코드 오류가 예외를 발생시키게 됩니다.

20.2 strict mode의 적용

Strict 모드를 활성화하려면, 시작 부분에 다음의 구문을 추가합니다

"use strict";

20.3 전역에 strict mode를 적용하는 것은 피하자

기존 코드와의 호환성 문제, 외부 라이브러리와의 충돌과 같은 문제 때문에 strict mode를 전역에 사용하는 것은 권장되지 않습니다.

20.4 함수 단위로 strict mode를 적용하는 것도 피하자

함수 단위로 strict mode를 적용하면 코드의 일관성 뿐만 아니라, 모든 함수에 일일이 적용하는 것은 비효율적이기 때문에, 전체 스크립트를 즉시 실행 함수로 감싸서 스크립트 전체가 strict 모드에서 동작하도록 하며, 이를 IIFE 패턴이라고 합니다.

(function() {
  "use strict";

  // 여기에 코드 작성
})();

20.5 strict mode가 발생시키는 에러

20.5.1 암묵적 전역

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

  (function () {
    'use strict';

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

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

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

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

20.5.4 with 문의 사용

with 문을 사용하면 SyntaxError가 발생한다. with문은 성능과 가독성이 나빠지는 문제가 있기 때문에 with문은 사용하지 않는것이 좋다.

  (function () {
    'use strict';

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

20.6 strict mode 적용에 의한 변화

20.6.1 일반 함수의 this

일반 모드에서, 일반 함수 내부의 this는 전역 객체를 가리킵니다. 하지만 strict mode에서는 this 값이 지정되지 않으면 undefined를 가리킵니다. 이는 함수를 호출할 때 this 값이 자동으로 전역 객체로 설정되는 것을 방지하기 위함입니다.

// 일반 모드
function myFunction() {
  return this;
}
myFunction(); // returns the global object (window in a browser)

// Strict mode
"use strict";
function myFunction() {
  return this;
}
myFunction(); // returns undefined

20.6.2 arguments 객체

일반 모드에서는 arguments 객체의 프로퍼티가 함수의 매개변수와 연결됩니다. 즉, arguments 객체를 변경하면 매개변수 값도 변경되고, 반대로 매개변수 값을 변경하면 arguments 객체도 변경됩니다. 하지만 strict mode에서는 arguments 객체와 매개변수 사이의 연결이 끊어집니다.

// 일반 모드
function myFunction(a) {
  arguments[0] = 99;
  return a;
}
myFunction(10); // returns 99

// Strict mode
"use strict";
function myFunction(a) {
  arguments[0] = 99;
  return a;
}
myFunction(10); // returns 10