엄격 모드(strict mode) — 왜 써야 하고 뭐가 달라지나

"use strict"는 자바스크립트의 느슨한 동작들을 엄격하게 바꿔서 잠재적 버그를 사전에 잡아주는 모드입니다. 면접에서 "strict mode가 뭔가요?"라는 질문이 나오면, 단순히 "엄격한 모드"가 아니라 구체적으로 뭘 막는지 를 설명할 수 있어야 합니다.

활성화 방법

// 파일 전체에 적용
"use strict";

// 함수 단위로 적용
function strictFunc() {
  "use strict";
  // 이 함수만 strict mode
}

ESM과 class에서는 자동 적용

// ES 모듈 (import/export)은 자동으로 strict mode
export function hello() {
  // 이미 strict mode
}

// class 본문도 자동으로 strict mode
class User {
  constructor() {
    // 이미 strict mode
  }
}

모던 프로젝트에서 ESM과 class를 사용하면, 별도로 "use strict"를 선언하지 않아도 됩니다.

1. 선언 없이 변수 할당 방지

// 비엄격 모드 — 실수로 전역 변수 생성
function sloppy() {
  mistypedVar = 42; // 전역 변수가 됨 (에러 없음)
}

// strict mode — ReferenceError 발생
"use strict";
function strict() {
  mistypedVar = 42; // ReferenceError: mistypedVar is not defined
}

오타로 인한 전역 변수 오염을 방지해줍니다. 이것만으로도 strict mode를 쓸 이유가 충분합니다.

2. 읽기 전용 프로퍼티 할당 에러

"use strict";

const obj = {};
Object.defineProperty(obj, "x", { value: 42, writable: false });
obj.x = 99; // TypeError

// Object.freeze된 객체
const frozen = Object.freeze({ a: 1 });
frozen.a = 2; // TypeError

// 비엄격 모드에서는 위 두 경우 모두 조용히 실패

3. 삭제할 수 없는 프로퍼티 삭제 에러

"use strict";
delete Object.prototype; // TypeError

// 비엄격 모드에서는 false를 반환하고 끝

4. 중복 매개변수 금지

// 비엄격 모드 — 허용됨
function sloppy(a, a, c) {
  return a; // 마지막 a의 값
}

// strict mode — SyntaxError
"use strict";
function strict(a, a, c) { // SyntaxError: Duplicate parameter name
  return a;
}

5. 8진수 리터럴 금지

"use strict";
const num = 010; // SyntaxError

// 대신 0o 접두사 사용
const octal = 0o10; // 8 (ES6 8진수 표기법)

6. with 문 금지

"use strict";
with (Math) { // SyntaxError
  console.log(PI);
}

with는 스코프 체인을 예측하기 어렵게 만들어서 금지되었습니다.

7. eval의 스코프 격리

"use strict";
eval("var x = 42;");
console.log(typeof x); // "undefined" — eval 내부에 격리됨

// 비엄격 모드
eval("var y = 42;");
console.log(y); // 42 — 외부 스코프를 오염시킴

8. this 바인딩 차이

// 비엄격 모드 — 전역 객체(window)
function sloppy() {
  console.log(this); // window (브라우저)
}
sloppy();

// strict mode — undefined
"use strict";
function strict() {
  console.log(this); // undefined
}
strict();

이 차이는 면접에서 this와 함께 자주 물어봅니다. strict mode에서 일반 함수 호출 시 this가 undefined가 된다는 점을 기억해야 합니다.

9. arguments와 매개변수의 분리

"use strict";
function test(a) {
  a = 99;
  console.log(arguments[0]); // 원래 값 유지
}
test(10); // 10

// 비엄격 모드
function sloppyTest(a) {
  a = 99;
  console.log(arguments[0]); // 99 — 동기화됨
}
sloppyTest(10); // 99

10. caller와 callee 금지

"use strict";
function test() {
  console.log(arguments.callee); // TypeError
  console.log(test.caller);      // TypeError
}

strict mode 비교 표

동작	비엄격 모드	strict mode
선언 없는 변수 할당	전역 변수 생성	ReferenceError
읽기 전용 할당	조용히 실패	TypeError
중복 매개변수	허용	SyntaxError
8진수 리터럴 `010`	8로 해석	SyntaxError
`this` (일반 호출)	window	undefined
eval 변수	외부 스코프 오염	격리됨
arguments-매개변수	동기화됨	독립적

실무에서의 strict mode

// 1. ESM 사용 시 → 자동 적용 (추가 선언 불필요)
import { something } from "./module.js";

// 2. class 사용 시 → 자동 적용
class MyClass {
  method() {
    // strict mode
  }
}

// 3. 번들러 사용 시 → 대부분 자동 적용
// webpack, vite 등은 모듈 번들링 시 strict mode 적용

// 4. Node.js → package.json에 "type": "module" 설정 시 자동 적용

**기억하기 **: strict mode는 "실수를 에러로 바꿔주는 안전장치"입니다. 모던 자바스크립트(ESM, class)에서는 자동 적용되므로 별도 선언이 필요 없지만, 어떤 동작이 달라지는지 알고 있어야 면접에서 this 바인딩이나 변수 선언 관련 질문에 정확히 답할 수 있습니다.