구조 분해와 스프레드 — 코드를 짧게 쓰는 것 이상의 의미

const colors = ['빨강', '파랑', '초록'];
const [first, second, third] = colors;

console.log(first);  // '빨강'
console.log(second); // '파랑'
console.log(third);  // '초록'

const [a, , c] = [1, 2, 3];
console.log(a, c); // 1 3

const [x = 10, y = 20] = [1];
console.log(x); // 1 — 값이 있으므로 기본값 무시
console.log(y); // 20 — 값이 없으므로 기본값 사용

const [a = 10] = [null];
console.log(a); // null — undefined가 아니므로 기본값 미적용

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b); // 2 1

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

const user = { name: 'Alice', age: 25, role: 'developer' };
const { name, age } = user;

console.log(name); // 'Alice'
console.log(age);  // 25

const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'
console.log(userAge);  // 25

const { name: userName = '익명', email = 'none' } = { name: 'Alice' };
console.log(userName); // 'Alice'
console.log(email);    // 'none'

const response = {
  data: {
    user: {
      name: 'Alice',
      address: {
        city: '서울'
      }
    }
  }
};

const {
  data: {
    user: {
      name,
      address: { city }
    }
  }
} = response;

console.log(name); // 'Alice'
console.log(city); // '서울'

const { name, ...rest } = { name: 'Alice', age: 25, role: 'developer' };
console.log(name); // 'Alice'
console.log(rest); // { age: 25, role: 'developer' }

// password를 제외한 객체 생성
const user = { name: 'Alice', email: 'alice@example.com', password: '1234' };
const { password, ...safeUser } = user;
console.log(safeUser); // { name: 'Alice', email: 'alice@example.com' }

// 객체 매개변수 구조 분해
function createUser({ name, age, role = 'user' }) {
  return { name, age, role };
}

const user = createUser({ name: 'Alice', age: 25 });
console.log(user); // { name: 'Alice', age: 25, role: 'user' }

// 배열 매개변수 구조 분해
function getFirst([first, ...rest]) {
  return { first, rest };
}

console.log(getFirst([1, 2, 3])); // { first: 1, rest: [2, 3] }

// React 컴포넌트에서의 props 구조 분해
function UserCard({ name, age, onDelete }) {
  return (
    // JSX에서 바로 사용
    <div>{name} ({age}세)</div>
  );
}

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 배열 합치기
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

// 배열 복사 (얕은 복사)
const copy = [...arr1];
console.log(copy); // [1, 2, 3]
console.log(copy === arr1); // false — 다른 배열

const defaults = { theme: 'light', fontSize: 14, lang: 'ko' };
const userSettings = { theme: 'dark', fontSize: 16 };

// 객체 병합 — 뒤에 오는 값이 우선
const settings = { ...defaults, ...userSettings };
console.log(settings);
// { theme: 'dark', fontSize: 16, lang: 'ko' }

const numbers = [5, 2, 8, 1, 9];
console.log(Math.max(...numbers)); // 9

// apply를 대체
// ES5: Math.max.apply(null, numbers)
// ES6: Math.max(...numbers)

// Rest — 여러 인자를 배열로 모음
function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3)); // 6

// Spread — 배열을 개별 인자로 펼침
const args = [1, 2, 3];
console.log(sum(...args)); // 6

// arguments — 유사 배열 (Array 메서드 사용 불가)
function oldWay() {
  console.log(Array.isArray(arguments)); // false
  // arguments.map(...) — TypeError
}

// rest — 진짜 배열
function newWay(...args) {
  console.log(Array.isArray(args)); // true
  return args.map((x) => x * 2); // 정상 동작
}

const original = {
  name: 'Alice',
  address: {
    city: '서울',
    zip: '12345'
  }
};

const copy = { ...original };

// 1단계 — 독립적
copy.name = 'Bob';
console.log(original.name); // 'Alice' — 영향 없음

// 2단계 — 참조 공유!
copy.address.city = '부산';
console.log(original.address.city); // '부산' — 원본도 변경됨!

const deep1 = JSON.parse(JSON.stringify(original));

const deep2 = structuredClone(original);

deep2.address.city = '대전';
console.log(original.address.city); // '서울' — 원본 유지

// 순환 참조도 처리 가능
const obj = { name: 'test' };
obj.self = obj;

const cloned = structuredClone(obj); // 정상 동작
console.log(cloned.self === cloned); // true

// 함수는 복사 불가
structuredClone({ fn: () => {} }); // DataCloneError

const user = {
  name: 'Alice',
  ...(isAdmin && { role: 'admin' }),
  ...(email && { email })
};

// 배열에 요소 추가
const newItems = [...items, newItem];

// 배열에서 요소 제거
const filtered = items.filter((item) => item.id !== targetId);

// 객체 프로퍼티 업데이트
const updatedUser = { ...user, name: '새이름' };

// 중첩 객체 업데이트
const updatedState = {
  ...state,
  user: {
    ...state.user,
    address: {
      ...state.user.address,
      city: '부산'
    }
  }
};

// 배열에서 최댓값/최솟값
const max = Math.max(...[5, 2, 8, 1]);

// 유니크 배열
const unique = [...new Set([1, 2, 2, 3, 3])];
console.log(unique); // [1, 2, 3]

// 문자열을 배열로
const chars = [..."안녕하세요"];
console.log(chars); // ['안', '녕', '하', '세', '요']