개발일지/JavaScript

[33] strict mode

꾸주니=^= 2024. 11. 27. 12:16

https://ko.javascript.info/strict-mode

 

엄격 모드

 

ko.javascript.info

 

엄격 모드(Strict Mode)

Strict Mode는 JavaScript에서 오류를 보다 엄격하게 처리하고, 코드의 안전성과 안정성을 높이기 위해 도입된 기능입니다. 이 모드는 ECMAScript 5(ES5)에서 추가되었으며, use strict라는 명령어로 활성화할 수 있습니다.

 

 

 

Strict Mode 특징

1. 변수 선언과 Strict Mode

let greeting = 'hello';
greeting = 'hi';
console.log(greeting);
  • Strict Mode가 꺼져 있을 때 (strict mode X):
    • 선언되지 않은 변수(greeting)에 값을 할당해도 에러가 발생하지 않고, 전역 변수로 생성됩니다.
    • 결과: "hello"가 출력됩니다.
  • Strict Mode가 켜져 있을 때 (strict mode O):
    • 선언되지 않은 변수에 값을 할당하려 하면 ReferenceError가 발생합니다.
    • 이유: greeting 변수는 let으로 선언되었으며, 엄격 모드에서는 선언 없이 값을 할당할 수 없습니다.

 

 

2. 기본 예약어 및 읽기 전용 속성

undefined = 7;
NaN = 10;

console.log(undefined);
console.log(NaN);
  • Strict Mode가 꺼져 있을 때:
    • undefined와 NaN은 전역 속성으로, 값을 변경하려 해도 브라우저에서 이를 무시합니다.
    • 결과는 여전히 "undefined"와 "NaN"으로 출력됩니다.
  • Strict Mode가 켜져 있을 때:
    • undefined와 NaN은 읽기 전용(Read-Only) 속성입니다. 값을 변경하려 하면 TypeError가 발생합니다.
    • 이유: undefined 및 NaN은 JavaScript 표준에 따라 변경이 금지됩니다.

 

 

3. 읽기 전용 속성 (Object.defineProperty)

const obj = {};
Object.defineProperty(obj, "readOnly", { writable: false, value: 7 });

console.log(obj);
obj.readOnly = 10;
console.log(obj);
  • Strict Mode가 꺼져 있을 때:
    • 읽기 전용 속성(readOnly)에 값을 변경하려고 해도 변경이 무시됩니다.
    • 결과는 { readOnly: 7 }로 유지됩니다.
  • Strict Mode가 켜져 있을 때:
    • 읽기 전용 속성에 값을 변경하려고 하면 TypeError가 발생합니다.
    • 이유: Object.defineProperty로 생성된 속성은 명시적으로 읽기 전용으로 설정되었기 때문입니다.

 

4. Getter만 존재하는 속성

const obj = {
  get readOnly() {
    return 7;
  }
};

console.log(obj.readOnly);
obj.readOnly = 10;
console.log(obj.readOnly);
  • Strict Mode에서:
    • obj.readOnly는 getter만 정의되어 있어 값을 읽을 수만 있습니다.
    • 값을 설정하려고 하면 TypeError가 발생합니다.
    • 결과는 항상 7로 출력됩니다.

 

5. 중복된 매개변수 이름

function add(a, a, b) {
  return a + a + b;
}
console.log(add(1, 2, 3));
  • Strict Mode가 꺼져 있을 때:
    • 중복된 매개변수 이름을 허용합니다. 그러나 이는 잠재적인 혼란을 야기할 수 있습니다.
    • 결과는 7로 출력됩니다.
  • Strict Mode가 켜져 있을 때:
    • 중복된 매개변수 이름이 허용되지 않으며, SyntaxError가 발생합니다.

 

6. 문자열에 속성 추가

"string".prop = 7;
console.log("string".prop);
  • Strict Mode가 꺼져 있을 때:
    • 문자열은 원시 값이므로 속성을 추가할 수 없습니다. 속성을 추가하려는 시도가 무시되며, 결과는 undefined입니다.
  • Strict Mode가 켜져 있을 때:
    • 문자열에 속성을 추가하려 하면 TypeError가 발생합니다.



7. this의 바인딩

function sum(a, b) {
  console.log(this);
  return a + b;
}

sum(1, 2);
  • Strict Mode가 꺼져 있을 때:
    • 전역 함수에서 this는 전역 객체(window 또는 global)를 가리킵니다.
  • Strict Mode가 켜져 있을 때:
    • 전역 함수에서 this는 undefined로 설정됩니다.
    • 이유: 엄격 모드에서는 전역 객체에 대한 암시적 바인딩을 방지하기 위해 this를 명시적으로 설정해야 합니다.

 

8. arguments와 변수

function sum(a, b) {
  a = 10;
  return [a + b, arguments[0] + arguments[1]];
}

console.log(sum(1, 2));
  • Strict Mode가 꺼져 있을 때:
    • arguments 객체는 함수 내부 변수(a, b)와 동기화됩니다.
    • 결과는 [12, 12]로 출력됩니다.
  • Strict Mode가 켜져 있을 때:
    • arguments 객체는 함수 내부 변수와 동기화되지 않습니다. 따라서 arguments 값은 초기값을 유지합니다.
    • 결과는 [12, 3]으로 출력됩니다.

 

엄격 모드의 장점

  1. 잠재적 오류 방지:
    • 선언되지 않은 변수 사용, 중복된 매개변수, 읽기 전용 속성 변경 등 문제를 방지합니다.
  2. 안전한 this 처리:
    • 전역 객체(window 또는 global)의 암시적 참조를 차단하여 코드를 더 안전하게 만듭니다.
  3. 미래 호환성:
    • ES6 이상에서 비표준적이거나 모호한 동작을 방지하여 더 나은 코딩 환경을 제공합니다.

 

결론

Strict Mode는 코드 품질과 안정성을 높이는 데 중요한 역할을 합니다. 엄격 모드를 사용하여 오류를 사전에 방지하고, 더 나은 코딩 습관을 만들 수 있습니다.

저작자표시