분할 대입 { } [ ]

분할 대입

분할 대입이란?
객체나 배열로부터 값을 추출하기 위한 방법이다.

분할 대입을 왜 사용하나?
분할 대입을 사용하지 않고 문자열을 출력할 때, 객체 속성의 수가 많거나 객체의 변수명이 길어지면 코드를 작성하는게 많이 번거롭다.

1. 객체 분할 대입

const user = {
  name: '홍길동',
  age: 23,
  height: 170,
};
// 분할 대입X
const msg = `${user.name}입니다. ${user.age}살, ${user.height}cm입니다.`;
console.log(msg);

// 분할 대입O
const { name, age, height } = user;
const msg1 = `${name}입니다. ${age}살, ${height}cm입니다.`;
console.log(msg1);

분할 대입을 사용하지 않은 코드와 사용한 코드를 비교해보자.
{ }를 변수 선언부에 이용하면 객체 안에서 일치하는 속성을 추출할 수 있다. 단, 존재하지 않는 속성명은 지정할 수 없으니 주의해야 한다.

객체 안의 속성명을 사용하지 않고 다른 이름을 사용하고 싶은 경우에는 콜론을 이용해서 다른 변수명으로 지정할 수도 있다.

const { name: newName, age: newAge, height: newHeight } = user;
const msg2 = `${newName}입니다. ${newAge}살, ${newHeight}cm입니다.`;
console.log(msg2);

2. 배열 분할 대입

객체와 마찬가지로 배열에도 분할 대입을 사용할 수 있다. 객체 분할 대입에서는 변수 선언부에 { }를 사용했지만, 배열 분할 대입에서는 [ ]를 사용해서 배열에 저장된 순서에 임의의 변수명을 설정해 추출할 수 있다.

const user = ['홍길동', 23, 170];

// 배열 인덱스
const msg = `${user[0]}입니다. ${user[1]}살, ${user[2]}cm입니다.`;
console.log(msg);

// 배열에 분할 대입
const [name, age, height] = user;
const msg1 = `${name}입니다. ${age}살, ${height}cm입니다.`;
console.log(msg1);

// 배열에서 필요한 요소만 추출
// 첫 번째 요소만 추출
const [name] = user;
const msg2 = `${name}입니다.`;
console.log(msg2);

// 두 번째만 추출
// 첫 번째 요소는 무시하고, 두 번째 요소만 할당
const [, age] = user;
const msg3 = `${age}살입니다.`;
console.log(msg3);

// 세 번째만 추출
const [, , height] = user;
const msg4 = `${height}cm입니다.`;
console.log(msg4);

배열에서는 주의해야 할 점이 있다. 바로 객체와 달리 순서를 변경할 수 없다. 객체에서는 이름이 일치하면 일부만 추출하거나 순서가 달라고 추출이 가능했다. 그러나 배열에서는 이름이 일치해도 해당 속성 값을 가져올 수 없다. 무슨 말이냐? const [age] = user; 코드에서 user 배열에서 두 번째 요소만 추출할 것 같지만, 출력해보면 age 변수에 '홍길동'이 저장되어있는 것을 확인할 수 있다.
즉 요약하면 이렇다.

• 배열은 객체와 다르게 순서 변경 불가능
• 이름이 일치해도 해당 속성 값을 추출할 수 없음

객체와 배열은 미묘하게 다른 점이 존재하므로 주의해서 사용해야 한다.