destructuring assignment 인 구조 분해 할당은
구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
이는 이터러블 또는 객체 리터럴에서 필요한 값만 추출 할 때 매우 유용하다.
배열 디스트럭처링 할당
const arr = [1, 2, 3];
const one = arr[0];
const two = arr[1];
const three = arr[2];
console.log(one, two, three); // 1 2 3처럼 배열의 원소들을 하나씩 비구조화하여 할당하려면 다음처럼 해야 하지만
디스트럭처링 할당을 이용하면
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3처럼 할당하는 것이 가능하다.
디스트럭처링 할당은 연산자 왼쪽에는 할당 받을 변수를 선언하고, 우측에는 비구조화 할 자료구조가 들어간다.
이 때 좌측에 들어가는 변수의 수는 자료구조의 원소들과 같을 필요가 없다.
const arr = [1, 2, 3];
var [one, two] = arr;
console.log(one, two); // 1 2
var [one, two, three, four] = arr;
console.log(one, two, three, four); // 1 2 3 undefined적은 변수를 선언 할 때는 인덱스 순으로 할당되며, 많은 변수를 선언 할 때 우측의 원소보다 많은 변수는 undefined 가 선언된다.
예시를 보면 알겠지만 배열의 디스트럭처링 할당의 기준은 배열의 인덱스이다.
객체 디스트럭처링 할당
const person = {
name: 'lee',
age: 16,
};
const userName = person.name;
const userAge = person.age;
console.log(userName, userAge); // lee 16객체도 동일하게 변수를 하나씩 선언해야 했다면 다음처럼 프로퍼티에 직접 접근했어야하지만
디스트럭처링 할당을 이용하면
const person = {
name: 'lee',
age: 16,
};
const { name, age } = person;
console.log(name, age); // lee 16다음처럼 할당 가능하다.
객체의 디스트럭처링구조 할당은 객체의 프로퍼티를 통해 접근하며 할당 받는다.
만약 할당할 변수 명을 설정학고 싶다면
const person = {
name: 'lee',
age: 16,
};
const { name: UserName, age: UserAge } = person;
console.log(UserName, UserAge); // lee 16처럼 설정해줄 수 있다.
물론 일부 프로퍼티만 할당 받는 것도 가능하다.
const person = {
name: 'lee',
age: 16,
};
const { name: UserName } = person;
console.log(UserName); // lee객체 디스트럭처링 할당은 객체를 인수로 받는 함수의 매개변수에도 사용 가능하다.
const person = {
name: 'lee',
age: 16,
};
function introduce({ name, age }) {
console.log(`hello i am ${name} and ${age} years old`);
}
introduce(person); // hello i am lee and 16 years old함수를 선언 할 때 매개변수를 {} 로 설정해주어 디스트럭처링 할당을 받겠다고 한 것임을 생각해보자
객체가 중첩되어 있을 경우를 생각해보자
const person = {
name: 'lee',
address: {
city: 'seoul',
zipcode: '03068',
},
};여기서 city 만 가져오고싶다면
- 객체를 먼저 디스트럭처링하여
address만 먼저 가져온다. address만 가져온 후 디스트럭처링하여city만 가져온다
const person = {
name: 'lee',
address: {
city: 'seoul',
zipcode: '03068',
},
};
const { address } = city;
const { city } = address;
console.log(city); // seoul이렇게 두 번 디스트럭처링을 시행하는 방법도 있지만
한 번에 디스트럭처링을 할 수도 있다.
const person = {
name: 'lee',
address: {
city: 'seoul',
zipcode: '03068',
},
};
const {
address: { city },
} = person;
console.log(city); // seoul객체 디스트럭처링 할당과 Rest 문법
디스트럭처링 할당을 할 때 rest 문법을 사용 할 수 있다.
const person = {
name: 'lee',
age: 16,
address: {
city: 'seoul',
zipcode: '03068',
},
};
const { name, ...rest } = person;
console.log(name); // lee
console.log(rest); // { age: 16, address: { city: 'seoul', zipcode: '03068' } }