[JS] strict mode(엄격 모드)

🤨strict mode( 엄격 모드 )

⛑ 자바스크립트를 더 안전하고 깔끔하게 쓰게 도와주는 기능 ✨

"use strict"; 이렇게 맨 위에 써서
자바스크립트를 더 엄격한 규칙으로 실행하게 만드는 기능❗
이걸 쓰면 실수로 잘못 쓴 코드를 더 잘 잡아줌
에러 없이 지나가던 잘못된 코드도 에러를 내서 경고⚠

🤷‍♀️왜 쓸까❓

• 실수 방지
  → 예: 변수 선언 안 하고 사용하면 에러 발생( 원랜 그냥 지나감 )
• 코드 안정성 향상
• 나중에 나올 자바스크립트 기능과 호환 잘 되게

🧐어떻게 사용하는지❓

"use strict"; // 이 줄이 제일 위에 와야 함!

x = 10; // ❌ 에러! 변수 선언 안 했다고 바로 막아줘
console.log(x);

👇strict mode 없이❌

x = 10; // 변수 선언 안 했는데도 실행됨
console.log(x); // 👉 10 출력됨

---

전체가 아닌 함수에만 엄격 모드 적용하고 싶으면 이렇게 하면 됨

🤔엄격 모드로 어떤 게 바뀌는지 살펴보자❗

let greeting = 'hello';
greating = 'hi';  // 오타 냄
console.log(greeting);

오타에 대한 에러는 전혀 없고 출력이 잘 되는 걸 볼 수 있음

엄격 모드 사용하면 에러가 잘 나오게 됨

undefined나 NaN에 이렇게 할당해주면 에러 안 나는 걸 볼 수 있음
( undefined랑 NaN는 원래 할당 불가능 )

엄격모드 사용하면 올바르게 에러뜸

'use strict'; 
// ✅ strict mode 켜기! 실수나 위험한 코딩을 에러로 잡아줌

const obj = {}; 
// ✅ 빈 객체(obj)를 하나 만듦

Object.defineProperty(obj, "readOnly", {
  writable: false,  // ✅ 이 속성은 수정할 수 없게 설정함 (읽기 전용)
  value: 7          // ✅ "readOnly"라는 속성의 값은 7로 설정함
});
// ✅ 즉, obj.readOnly = 7인데, 수정은 못하게 막아둠

console.log(obj);
// ✅ { readOnly: 7 } 출력됨

obj.readOnly = 10;
// ❌ 에러는 안 나지만 값은 바뀌지 않음 (strict 모드니까 무시되지 않고 막힘)

console.log(obj);
// ✅ 여전히 { readOnly: 7 } 출력됨 — 값 안 바뀜!

'use strict'

function add(a, a, b) {
  return a + a + b;
}

console.log(add(1, 2, 3));

매개변수 이름이 겹쳐서 나는 에러

"string".prop = 7;
console.log("string".prop);  // undefined 출력

문자열에 프로퍼티를 줄 수 있을까❓➡❌
👉 객체에만 가능함 ⭕

'use strict'

"string".prop = 7;
console.log("string".prop);  // undefined 출력

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

console.log(this);
sum(1, 2);

두 this 모두 window를 가리킴! ( 브라우저 환경 기준 )

✅ 엄격모드에서의 함수 안에 있는 this는 undefined가 뜸

엄격 모드➡억지로 함수 안에 있는 this를 window를 가리키게 하려면❓

'use strict';

function sum(a, b) {
  console.log(this); // 👉 window가 되게 하고 싶다!
  return a + b;
}

// 이때 this는 전역에서 window니까, 고정됨!
sum.bind(this)(1, 2); 

👉 bind 써주면 됨 🔥

📌bind

함수의 this를 원하는 값으로 "고정"해서
새로운 함수로 만들어주는 메서드😎

✅ 엄격 모드에서 this가 undefined 되는 이유

• 기본 모드에선 그냥 함수 호출 시 this가 자동으로 window가 됨
• "use strict" 모드에선 실수를 막기 위해
  👉 함수에서 그냥 호출하면 this를 window가 아닌 undefined로 바꿈

✅ 그래서 bind(this)는 왜 쓰는 건데❓

• bind(this)
  ➡ 함수 안의 this를 외부의 this(=window)로 고정📌
• 엄격 모드라도 this를 명시적으로 줬으니
  → undefined가 아니라 window