.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
구조 분해 할당 (destructuring assignment)
•
구조화된 배열과 같은 이터러블 또는 객체를 구조 분해하여 1개 이상의 변수에 개별적으로 할당하는 것
-> 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할때 유용하게 사용
배열 디스트럭처링 할당
•
배열의 각 요소를 배열로 부터 추출하여 1개 이상의 변수에 할당
•
배열 디스트럭처링 할당의 대상은 항상 이터러블
◦
할당 기준 : 인덱스
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three);
TypeScript
복사
할당 연산자 왼쪽에 값을 할당받은 변수 선언 필요
--> 배열 리터럴로 우변에 이터러블 할당안하면 에러 발생
•
배열 디스트럭처링 할당의 변수 선언문은 선언과 할당을 분리할 수 있지만, const 키워드로 변수를 선언할 수 없어서 권장 X
let x, y;
[x, y] = [1, 2];
console.log(x, y); // 1 2
TypeScript
복사
•
배열 디스트럭처링 할당을 할 시에 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요X
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3
TypeScript
복사
기본값 설정이 가능
•
배열 디스트럭처링 할당을 위해 변수에 Rest파라미터와 유사하게 Rest요소 ... 사용 가능
◦
이 경우 Rest 요소는 반드시 마지막에 위치
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]
TypeScript
복사
객체 디스트럭처링 할당
•
객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당
•
할당의 대상 : 객체
◦
할당 기준 : 프로퍼티 키
const user = { firstName: 'JeongMin', lastName: 'Lee' };
const { lastName, firstName } = user;
console.log(firstName, lastName);
TypeScript
복사
할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 하는데, 객체 리터럴로 선언 필요
이때, 우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러 발생
const { lastName, firstName } = user;
// 위와 아래는 동치, 메서드 축약표현을 통해 선언한 것과 같음
const { lastName: lastName, firstName: firstName } = user;
// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면 다음과 같이 변수 선언
const user = { firstName: 'Bee', lastName: 'Honey' };
const { lastName: ln, firstName: fn } = user;
console.log(ln, fn); // Bee, Honey
// 기본값 설정 또한 가능하다.
const { firstName = 'Bee', lastName } = { lastName: 'Honey' };
console.log(firstName, lastName); // Bee, Honey
const { firstName: fn = 'Bee', lastName: ln } = { lastName: 'Honey' };
console.log(fn, ln); // Bee, Honey
TypeScript
복사
•
객체 디스터럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만을 추출하여 변수에 할다앟고 싶을 때 유용
•
또한 객체를 인수로 전달받는 함수의 매개변수에도 사용 가능
function printTodo(todo) {
console.log(
`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}
function printTodo({ content, completed }) {
console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });
TypeScript
복사
객체를 인수로 전달받는 매개변수 todo에 객체 디스터럭처링 할당을 사용하면 좀 더 간단하고 가독성 좋게 표현 가능
•
중첩 객체의 경우 다음과 같이 사용
const user = {
name: 'Lee',
address: {
zipCode: '03068',
city: 'Seoul'
}
};
const {
address: { city }
} = user;
console.log(city); // Seoul
TypeScript
복사
•
디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ... 을 사용 가능
--> 반드시 마지막에 위치
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 {y:2, z:3}
TypeScript
복사
