구조분해할당

배열이나 객체에서 원하는 값을 개별 변수에 간결하게 할당할 수 있는 문법이다.
기존의 방식으로 배열의 값을 변수에 담을 경우, 인덱스를 일일이 지정해야 했지만 구조분해할당을 사용하면 훨신 직관적으로 값을 추출할 수 있습니다.

기존방식

const user = ['카리나', 25, 'seoul'];

const name = user\[0];
const age = user\[1];
const address = user\[2];

console.log(name, age, address); // "카리나 25 seoul"

인덱스를 일일이 지정해 코드가 길어지고 가독성이 떨어진다. '

구조분해할당

const user = ["카리나", 25, "seoul"];

// 구조분해할당 사용
const \[name, age, address] = user;

console.log(name);    // "카리나"
console.log(age);     // 25
console.log(address); // "seoul"

배열의 요소를 []를 사용하여 개별 변수로 분리할 수 있다.
코드가 짧아지고, 가독성이 좋아짐.

특정 요소만 선택적으로 추출

const user = ["윈터", 20, "busan"];

// 두 번째 값(age)은 무시하고 name과 address만 할당
const [name, , address] = user;

console.log(name);    // "윈터"
console.log(address); // "busan"

필요 없는 값은 쉼표로 건너뛸 수 있다.
필요한 정보만 추출해 가독성이 높아진다.

나머지 요소를 배열로 받기

const colors = ["red", "green", "blue", "yellow", "purple"];

// 앞의 두 요소만 변수로 받고, 나머지는 배열로 저장
const \[first, second, ...others] = colors;

console.log(first);  // "red"
console.log(second); // "green"
console.log(others); // ["blue", "yellow", "purple"]

...을 붙이면 나머지 요소들을 하나의 배열로 받을 수 있다.
이때 ...은 항상 마지막 변수에만 사용할 수 있다.

함수 반환값을 구조분해로 바로 받기

function getUserInfo() {
return ["김코딩", 25, "개발자"];
}

// 반환된 배열을 구조분해로 분리
const [name, age, job] = getUserInfo();

console.log(name); // "김코딩"
console.log(age);  // 25
console.log(job);  // "개발자"

함수가 배열을 반환할 때, 중간 변수 없이 곧바로 필요한 값만 꺼낼 수 있다.

변수의 값을 스왑

let a = 1;
let b = 2;

// 구조분해를 활용한 값 교환
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

중간변수 없이도 값 교환이 가능하다.

기본값을 설정하여 안전하게 할당

const arr = [5];

// y는 값이 없기 때문에 기본값 0이 적용됨
const [x = 0, y = 0] = arr;

console.log(x); // 5
console.log(y); // 0

구조분해할당 시, 배열에 존재하지 않는 요소를 변수에 할당하면 자동으로 udnefined가 된다. 이때 기본값을 설정해두면, 값이 없을 경우에도 에러없이 원하는 기본값으로 처리할 수 있다.
기본값은 undefined인 경우만 적용이 되고 null,0,false등 값은 있지만 falsy한 값일 경우에는 기본값이 적용되지 않는다.

구조분해할당을 사용하여 객체의 프로퍼티를 개별 변수로 분리하기

객체에서도 구조분해할당 문법을 사용하여 각 프로퍼티의 값을 간결하게 변수에 할당할 수 있다.
프로퍼티 키 기준으로 값을 분리할 수 있다.

const user = {
name: "김코딩",
age: 30
};
const { name, age, job = "디자이너" } = user;

console.log(job); // "디자이너"

user객체에는 job이 없지만 기본값 "디자이너"가 설정되어 있어 undefined가 아닌 값으로 처리된다.

객체구조분해 시 변수명을 변경하고 싶을 경우 콜론 (:)을 사용하면 된다.

const user = {
name: "김코딩",
age: 30
};
\
const { name: userName, age } = user;
\
console.log(userName); // "김코딩"

name 이라는 프로퍼티 키를 userName이라는 변수에 할당한 예시이다.

중첩 객체 구조도 한 번에 분해할 수 있다.

const user = {
name: "김코딩",
address: {
city: "Seoul",
country: "Korea"
}
};
\
const {
address: { city, country }
} = user;
\
console.log(city); // "Seoul"
console.log(country); // "Korea"

중첩구조는 프로퍼티 키 체계를 그대로 따라가며, 필요한 값을 꺼낼 수 있다.

함수 매개변수에서 바로 구조분해를 할 수 있다.

const user = {
name: "김코딩",
age: 30
};
\
// 구조분해할당을 사용한 매개변수 처리
function printUserInfo({ name, age }) {
console.log(이름: ${name}, 나이: ${age});
}
\
printUserInfo(user);

인자에서 필요한 프로퍼티를 구조분해하여 바로 사용하므로 user.name , user.age처럼 다시 꺼낼 필요가 없다.