자바스크립트 중급 #4 디스트럭처링과 spread/rest 깊이

const user = { id: 'u1', name: '커티스', age: 30 };

// 기본
const { name, age } = user;

// 이름 바꿔서
const { name: userName } = user;

// 기본값
const { email = '없음' } = user;

// 이름 바꾸기 + 기본값
const { phone: userPhone = '미입력' } = user;

const response = {
  data: {
    user: {
      id: 'u1',
      profile: {
        name: '커티스',
        age: 30,
      },
    },
  },
};

const {
  data: {
    user: {
      profile: { name, age },
    },
  },
} = response;

console.log(name, age);   // 커티스 30

const arr = [1, 2, 3, 4, 5];

const [a, b] = arr;             // a=1, b=2
const [, , c] = arr;             // c=3 (앞 둘 건너뛰기)
const [first, ...rest] = arr;    // first=1, rest=[2,3,4,5]
const [x = 10] = [];             // x=10 (기본값)

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

function createUser({ name, age, email = '미입력' }) {
  console.log(name, age, email);
}

createUser({ name: '커티스', age: 30 });
// 커티스 30 미입력

function init({ debug = false, retries = 3 } = {}) {
  console.log(debug, retries);
}

init();                       // false 3 — 인자 없이도 OK
init({ debug: true });        // true 3

function update(user, { id, ...rest }) {
  console.log(id);     // 따로
  console.log(rest);   // 나머지 객체
  Object.assign(user, rest);
}

update(targetUser, { id: 'u1', name: '커티스', age: 30 });
// id: u1
// rest: { name: '커티스', age: 30 }

const a = { user: { name: '커티스', age: 30 } };
const b = { ...a, theme: 'dark' };

b.user.age = 31;
console.log(a.user.age);   // 31  ← a도 같이 바뀜

const a = { user: { name: '커티스', age: 30 } };
const b = structuredClone(a);

b.user.age = 31;
console.log(a.user.age);   // 30

const includeEmail = true;
const profile = {
  name: '커티스',
  age: 30,
  ...(includeEmail && { email: 'me@example.com' }),
};

const args = [1, 2, 3];
Math.max(...args);   // 3

function logAll(a, b, c) {
  console.log(a, b, c);
}
logAll(...args);     // 1 2 3

const arr = [1, 2, 3];

Math.max(...arr);            // spread — 펼침
const copy = [...arr];        // spread — 펼침
function f(...args) {}        // rest — 모음
const [head, ...tail] = arr;  // rest — 모음

const user = { id: 'u1', name: '커티스', age: 30 };

const updated = { ...user, age: 31 };
// 원본은 그대로, age만 바뀐 새 객체

const items = ['a', 'b', 'c', 'd'];
const i = 2;
const newValue = 'C';

const updated = [
  ...items.slice(0, i),
  newValue,
  ...items.slice(i + 1),
];
// ['a', 'b', 'C', 'd']

// 또는 ES2023 의 toSpliced
const updated2 = items.toSpliced(i, 1, newValue);

const defaults = { theme: 'light', lang: 'ko' };
const userPrefs = { theme: 'dark' };

const merged = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'ko' }

function Wrapper(props) {
  return <Child {...props} />;
}

class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`안녕, ${this.name}`);
  }
}

const u = new User('커티스');
const copy = { ...u };

u.greet();        // 안녕, 커티스
copy.greet();     // ✗ TypeError — copy는 그냥 객체, greet 없음