프론트엔드 스터디 7주차: 불변성, 프로토타입, 타입 체크

const obj = { x: 1 };
obj.x = 99; // 가능 — 내부 프로퍼티 변경
obj.y = 100; // 가능 — 프로퍼티 추가
delete obj.x; // 가능 — 프로퍼티 삭제

obj = {}; // TypeError — 재할당만 불가

const original = { a: 1, nested: { b: 2 } };

// 얕은 복사
const shallow = { ...original };
shallow.a = 99; // original.a 영향 없음
shallow.nested.b = 99; // original.nested.b도 99로 바뀜!

// 깊은 복사 (간단한 방법 — 함수/undefined 등은 사라짐)
const deep = JSON.parse(JSON.stringify(original));
deep.nested.b = 999; // original.nested.b 영향 없음

const obj = Object.freeze({ x: 1, nested: { y: 2 } });

obj.x = 99; // 무시됨 (strict mode에서는 TypeError)
obj.nested.y = 99; // 가능! — freeze는 최상위만 동결

// 완전한 불변이 필요하면 재귀적으로 freeze해야 함
function deepFreeze(obj) {
  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  });
  return Object.freeze(obj);
}

const obj = { x: 1 };

// obj에는 toString이 없지만 사용 가능
console.log(obj.toString()); // "[object Object]"

// 프로토타입 체인: obj → Object.prototype → null
// toString은 Object.prototype에 있음

function Person(name) {
  this.name = name;
  // 여기에 메서드를 넣으면 인스턴스마다 함수가 복사됨 — 비효율
}

// prototype에 메서드를 추가하면 모든 인스턴스가 공유
Person.prototype.greet = function () {
  console.log(`안녕하세요, ${this.name}입니다.`);
};

const p1 = new Person("철수");
const p2 = new Person("영희");

p1.greet(); // "안녕하세요, 철수입니다."
p2.greet(); // "안녕하세요, 영희입니다."

// p1과 p2의 greet는 같은 함수를 공유
console.log(p1.greet === p2.greet); // true

function Foo() {}

const foo = new Foo();

// foo의 [[Prototype]] (부모)이 곧 Foo.prototype (함수가 미리 준비한 부모 객체)
console.log(foo.__proto__ === Foo.prototype); // true
console.log(Foo.prototype.constructor === Foo); // true

"hello".toUpperCase(); // "HELLO"
(42).toFixed(2); // "42.00"

// 원시값은 객체가 아닌데 어떻게 메서드가 있을까?
// JS 엔진이 메서드 호출 시 임시로 래퍼 객체(String, Number)로 변환
// 메서드 실행 후 래퍼 객체는 즉시 제거됨

typeof 1; // 'number'
typeof "hello"; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof function () {}; // 'function'

// 한계: 아래는 모두 'object'를 반환
typeof null; // 'object' ← 버그
typeof []; // 'object'
typeof {}; // 'object'
typeof new Date(); // 'object'

function getType(value) {
  // toString.call(value)는 '[object Number]' 같은 문자열을 돌려줌.
  // .slice(8, -1)은 앞 '[object '(8글자)과 뒤 ']'(1글자)를 잘라 'Number'만 남김.
  return Object.prototype.toString.call(value).slice(8, -1);
}

getType(1); // 'Number'
getType("hello"); // 'String'
getType(null); // 'Null'
getType([]); // 'Array'
getType({}); // 'Object'
getType(new Date()); // 'Date'
getType(undefined); // 'Undefined'

// 배열 확인 — Array.isArray() 권장
Array.isArray([]);        // true
Array.isArray({});        // false

// null 확인 — === 사용
value === null

// null 또는 undefined 확인
value == null             // null과 undefined 모두 해당 (예외적으로 == 허용)

// 특정 인스턴스 확인 — instanceof
new Date() instanceof Date  // true
[] instanceof Array          // true
[] instanceof Object         // true (체인 전체 탐색)