strict mode란?

stric mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킴

• strict mode를 사용하면
  • JavaScript에서 문제를 일으킬 수 있지만, 기본적으로는 오류를 발생시키지 않는 몇몇 상황에 대해 명시적인 오류를 발생시킴
  • JavaScript 엔진이 최적화를 수행하는 데 어려움을 주는 코드 부분을 수정함으로써, strict mode에서 코드가 더 빠르게 실행될 수 있음
  • 새로운 문법이나 키워드가 표준에 포함되기 전에 해당 키워드를 변수 이름 등으로 사용하면, 해당 문법이나 키워드가 표준에 포함된 후에는 그 코드가 제대로 동작하지 않을 수 있기 때문에 strict mode에서는 향후 정의될 가능성이 있는 일부 문법을 사용하는 것을 금지함

strict mode의 적용

• 전체 스크립트 또는 부분 함수에 적용 가능함
• {} 괄호로 묶여진 블럭문에는 적용되지 않음

scripts

• 전체 스크립트에 strict mode를 호출하려면, "use strict"; (또는 'use strict';) 문장을 다른 모든 문장 앞에 위치시키면 됨

// Whole-script strict mode syntax
"use strict";
const v = "Hi! I'm a strict mode script!";

functions

• 마찬가지로, 함수에 strict mode를 적용하려면, "use strict"; (또는 'use strict';) 문장을 다른 모든 문장 앞에 함수 본문에 위치시키면 됨

function myStrictFunction() {
  // Function-level strict mode syntax
  "use strict";
  function nested() {
    return "And so am I!";
  }
  return `Hi! I'm a strict mode function! ${nested()}`;
}
function myNotStrictFunction() {
  return "I'm not strict.";
}

• "use strict" 지시문은 함수의 본문에 적용되는데, 이는 특히 매개변수가 간단한 경우에만 가능함
• 매개변수가 간단하다는 것은, 매개변수가 복잡한 구조를 가지고 있지 않고, 단순히 변수 이름만을 가진 경우를 의미함
• rest parameter, 기본값(default), 구조 분해(destructured) 등의 특성을 가진 매개변수를 가진 함수에서는 "use strict" 지시문을 사용할 수 없음
• 이런 복잡한 매개변수 구조를 가진 함수에서 "use strict" 지시문을 사용하려고 하면, JavaScript는 이를 문법 오류로 간주함
• 이는 "use strict" 지시문이 복잡한 매개변수 구조를 처리하는 데 필요한 추가적인 문법 규칙을 가지고 있지 않기 때문임

function sum(a = 1, b = 2) {
  // SyntaxError: "use strict" not allowed in function with default parameter
  "use strict";
  return a + b;
}

modules

• JavaScript 모듈의 모든 내용은 자동으로 strict mode를 적용받음
• 따라서 strict mode를 시작하라는 별도의 지시문이 필요하지 않음

function myStrictFunction() {
  // because this is a module, I'm strict by default
}
export default myStrictFunction;

🧐모듈의 모든 내용이 자동으로 strict mode 적용을 받는데 그동안 rest parameter, default 등은 어떻게 사용이 가능 했지?

🗝️"use strict" 지시문이 함수의 본문에 직접 쓸 때나 일반 스크립트에서 쓸 때는, 간단한 매개변수를 가진 함수에만 적용되는 제한이 있습니다. 이는 "use strict" 지시문을 직접 쓰는 방식이 원래 오래된 코드에 대한 하위 호환성을 유지하기 위해 설계되었기 때문입니다. 이런 오래된 코드에서는 기본값, 나머지, 구조 분해 등의 고급 매개변수 기능을 지원하지 않았습니다.
그러나 모듈에서는 이런 제한이 없습니다. 모듈은 자바스크립트의 최신 기능을 전부 활용하도록 설계되었기 때문에, 기본값, 나머지, 구조 분해 등의 고급 매개변수 기능을 사용해도 문제가 없습니다. 이는 모듈이 자체적으로 strict mode를 적용하기 때문에 이런 복잡한 매개변수를 정상적으로 처리할 수 있기 때문입니다.

classes

• 클래스 안에서는 JavaScript 코드가 자동으로 strict mode로 실행되며, 이때 별도로 strict mode를 선언할 필요가 없음

class C1 {
  // All code here is evaluated in strict mode
  test() {
    delete Object.prototype;
  }
}
new C1().test(); // TypeError, because test() is in strict mode

const C2 = class {
  // All code here is evaluated in strict mode
};

// Code here may not be in strict mode
delete Object.prototype; // Will not throw error

🧐js의 strict mode와 react의 strict mode는 다른가?

🗝️JavaScript의 strict mode와 React의 strict mode는 다른 개념입니다.
JavaScript의 strict mode는 위에서 설명드린 것처럼, JavaScript 코드의 문법을 보다 엄격하게 검사하여 일반적으로 발생할 수 있는 오류를 미연에 방지하거나 잠재적인 문제를 미리 알려주는 역할을 합니다.
반면에, React의 strict mode는 React 컴포넌트의 라이프사이클을 보다 엄격하게 관리하기 위한 도구입니다. React.StrictMode는 개발 모드에서만 활성화되며, 그 자식 컴포넌트들에 대해 추가적인 검사와 경고를 활성화시킵니다. 이는 주로 레거시 API의 사용을 찾아내거나 예상치 못한 부작용(side effects), 불필요한 렌더링 등을 감지하는 데 도움이 됩니다.
따라서 JavaScript의 strict mode는 문법적인 오류를 잡아내는 데 초점을 두는 반면, React의 strict mode는 애플리케이션의 성능 최적화와 더 나은 컴포넌트 설계에 도움을 주는 것이 목표입니다.

참고 자료

• 이웅모,『모던 자바스크립트 Deep Dive』, 위키북스(2021), p313-319.
• Strict mode
• 뤼튼