11장 원시값과 객체의 비교

num1: 100
num2: 200
num1 === num2: false

obj1.score: 200
obj2.score: 200
obj1 === obj2: true

obj3.score: 100
obj3.info.name: Bob
obj4.score: 200
obj4.info.name: Bob
obj3 === obj4: false

obj5.score: 100
obj5.info.name: Alice
obj6.score: 200
obj6.info.name: Bob
obj5 === obj6: false

let num1 = 100;
let num2 = num1;  // 100이라는 값 자체가 복사됨
num2 = 200;       // num2만 변경됨

num1: [메모리 주소 0x001] → 100
num2: [메모리 주소 0x002] → 200

let obj1 = { score: 100 };
let obj2 = obj1;  // 참조 값(메모리 주소)이 복사됨
obj2.score = 200; // 같은 객체를 변경

obj1: [메모리 주소 0x100] ─┐
obj2: [메모리 주소 0x100] ─┴→ { score: 200 }

let obj3 = { score: 100, info: { name: 'Alice' } };
let obj4 = { ...obj3 };  // 최상위 레벨만 복사

obj4.score = 200;           // obj3에 영향 없음 (복사본)
obj4.info.name = 'Bob';     // obj3에 영향 있음 (참조 공유)

obj3: { score: 100, info: [주소 0x200] }
obj4: { score: 200, info: [주소 0x200] }  ← info는 같은 주소
                             ↓
                    { name: 'Bob' }  ← 공유되는 객체

let obj5 = { score: 100, info: { name: 'Alice' } };
let obj6 = JSON.parse(JSON.stringify(obj5));  // 완전히 새로운 객체 생성

obj5: { score: 100, info: { name: 'Alice' } }
obj6: { score: 200, info: { name: 'Bob' } }  ← 완전히 별개

// 1. 스프레드 연산자 (Spread Operator) - ES6
let copy1 = { ...original };
 
// 2. Object.assign() - ES6
let copy2 = Object.assign({}, original);
 
// 3. Array.from() - 배열 전용, ES6
let copy3 = Array.from(original);

// ===== 1. 스프레드 연산자 =====
// 장점: 간결하고 직관적
const obj = { a: 1, b: 2 };
const arr = [1, 2, 3];
 
const objCopy = { ...obj };           // 객체 복사
const arrCopy = [...arr];             // 배열 복사
const merged = { ...obj, c: 3 };      // 복사하면서 속성 추가
const combined = { ...obj, ...obj2 }; // 여러 객체 병합
 
// ===== 2. Object.assign() =====
// 장점: 여러 소스를 첫 번째 대상에 병합
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
 
Object.assign(target, source1, source2);
console.log(target); // { a: 1, b: 2, c: 3 } - target이 변경됨!
 
// 새 객체로 복사하려면 첫 번째 인자를 빈 객체로
const copy = Object.assign({}, target, source1);
 
// 같은 속성명이 있으면 뒤의 값이 덮어씀
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const result = Object.assign({}, obj1, obj2);
console.log(result); // { a: 1, b: 3, c: 4 } - b가 덮어써짐
 
// ===== 3. Array.from() =====
// 장점: 유사 배열 객체를 진짜 배열로 변환
 
// 예제 1: 유사 배열 객체 변환
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const realArray = Array.from(arrayLike);
console.log(realArray); // ['a', 'b', 'c']
console.log(realArray.map); // function (이제 배열 메서드 사용 가능)
 
// 예제 2: NodeList 변환 (DOM)
const nodeList = document.querySelectorAll('div'); // NodeList (유사 배열)
const divArray = Array.from(nodeList); // 진짜 배열로 변환
divArray.forEach(div => console.log(div)); // 배열 메서드 사용 가능
 
// 예제 3: mapping 함수와 함께 사용
const numbers = Array.from([1, 2, 3], x => x * 2);
console.log(numbers); // [2, 4, 6]
 
// 예제 4: 문자열을 배열로
const str = 'hello';
const chars = Array.from(str);
console.log(chars); // ['h', 'e', 'l', 'l', 'o']
 
// 예제 5: Set이나 Map 변환
const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]

// ✅ 일반적인 객체 복사: 스프레드 연산자 사용
const userCopy = { ...user };
 
// ✅ 여러 객체를 하나로 합칠 때
const config = { ...defaultConfig, ...userConfig };
 
// ✅ 배열 복사: 스프레드 연산자 (간결함)
const itemsCopy = [...items];
 
// ✅ 기존 객체를 변경하면서 속성 추가: Object.assign()
Object.assign(user, { lastLogin: new Date() });
 
// ✅ 여러 소스의 속성을 수집: Object.assign()
const merged = Object.assign({}, defaults, options, overrides);
 
// ✅ DOM NodeList를 배열로: Array.from()
const buttons = Array.from(document.querySelectorAll('button'));
buttons.forEach(btn => btn.addEventListener('click', handler));
 
// ✅ 유사 배열 객체를 배열로: Array.from()
function sum() {
  const args = Array.from(arguments); // arguments는 유사 배열
  return args.reduce((a, b) => a + b, 0);
}
 
// ✅ 변환하면서 매핑: Array.from()
const doubled = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

// ⚠️ 모두 얕은 복사만 수행
const original = { a: 1, nested: { b: 2 } };
const copy1 = { ...original };
const copy2 = Object.assign({}, original);
 
copy1.nested.b = 999;
console.log(original.nested.b); // 999 - 중첩 객체는 공유됨!
 
// ⚠️ Object.assign()은 첫 번째 인자를 변경함
const target = { a: 1 };
Object.assign(target, { b: 2 });
console.log(target); // { a: 1, b: 2 } - target이 변경됨
 
// ⚠️ Array.from()은 배열/유사배열/iterable에만 사용
const obj = { a: 1, b: 2 };
Array.from(obj); // [] - 빈 배열 반환 (iterable이 아니므로)

// 1. JSON 방식 (가장 간단, 하지만 함수/Symbol/undefined는 복사 안됨)
let deepCopy1 = JSON.parse(JSON.stringify(original));
 
// 2. structuredClone() (최신 방법, 대부분의 타입 지원)
let deepCopy2 = structuredClone(original);
 
// 3. 재귀 함수 (커스텀 구현)
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
 
  const copy = Array.isArray(obj) ? [] : {};
 
  for (let key in obj) {
    copy[key] = deepClone(obj[key]);
  }
  return copy;
}