디스트럭처링 할당 ? 구조분해 할당?
디스트럭처링 할당(destructuring assignment)은 구조 분해 할당이라고도 합니다. 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용합니다.
① 배열 디스트럭처링 할당
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같습니다.
// ES5
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1 2 3ES6의 배열 구조 분해 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당합니다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블(순회 가능한 상태)여야 하며, 할당 기준은 배열의 인덱스가 됩니다. 즉 순서대로 할당됩니다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
/*
다음과 같습니다
const one = arr[0]
const two = arr[1]
const three = arr[2]
const [one, two, three] = [1,2,3]
*/
console.log(one, two, three); // 1 2 3배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 합니다. 이때 변수를 배열 리터럴 형태로 선언합니다.
const [one, two, three] = [1, 2, 3];배열 디스트럭처링 할당의 기준은 배열의 인덱스입니다. 즉 순서대로 할당됩니다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없습니다.
const [a, b] = [1, 2];
console.log(a, b); // 1 2
const [c, d] = [1];
console.log(c, d); // 1 undefined 우변(이터러블)의 길이가 더 작을 경우 undefined 를 반환합니다
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2
const [g, , h] = [1, 2, 3];
/* 다음과 같이 변수를 지정할 수 있는 이유는 자바스크립트 배열의 특징인 희소 배열의 특징을 사용한 것입니다 */
console.log(g, h); // 1 3물론 초기값 또한 설정할 수 있습니다 (하지만 초기값보다 할당된 값이 우선됩니다)
// 기본값
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배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용합니다.
const str = "hello-world-2021";
console.log(str.split("-"));
const [one, two, three] = str.split("-");
console.log(one);
console.log(two);
console.log(three);배열 디스트럭처링 할당을 위한 변수에 Rest 요소 ... 을 사용할 수 있다. (Rest 요소는 반드시 마지막에 위치해야 한다)
// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]
console.log(x, ...y); // 1 , 2, 3② 객체 디스트럭처링 할당
ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키 {key: value} 를 사용해야 합니다.
// ES5
var user = { age: 25, name: "junhee" };
var age = user.age;
var name = user.name;
console.log(age, name); // 25 junheeES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다. (배열처럼 인덱스가 아니다) 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티가 일치하면 할당된다.
var user = { age: 25, name: "junhee" };
var { age, name } = user;
/*
var { age: age, name: name} = user 와 같은 의미 (프로퍼티 축약 표현)
*/
console.log(age, name); // 25 junhee반드시 프로퍼티 키와 변수 이름이 같을 필요는 없다
var user = { age: 25, name: "junhee" };
var { age: junheeAge, name: junheeName } = user;
/*
위 처럼 새롭게 이름을 지정한 경우 프로퍼티 키로 접근하면 에러가 발생한다
console.log(age, name); // ReferenceError: age is not defined
*/
console.log(junheeAge, junheeName); // 25 junhee객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다 (하지만 넘겨받는 값이 우선이다)
var user = { age: 25 };
var { age, name = "default" } = user;
console.log(age, name); // 25 default객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
function printTodo(todo) {
console.log(
`할일 ${todo.content}은 ${todo.completed ? "완료" : "비완료"} 상태입니다.`
);
}
printTodo({ id: 1, content: "HTML", completed: true });
// 할일 HTML은 완료 상태입니다.가독성을 좋게 표현한다면 함수의 파라미터에 구조 분해 할당을 사용하는 것이다.
이로써 우리가 리액트에서 주로 사용하는 ( ) 파라미터 내부에 { } 중괄호가 들어간 구조가 됩니다!
function printTodo({ content, completed }) {
console.log(`할일 ${content}은 ${completed ? "완료" : "비완료"} 상태입니다.`);
}
printTodo({ id: 1, content: "HTML", completed: true });
// 할일 HTML은 완료 상태입니다.중첩 객체의 경우는 다음과 같이 사용한다.
const user = {
name: "junhee",
age: 25,
address: {
zipCode: 14063,
city: "Anyang",
},
};
const {
address: { city },
} = user;
console.log(city); // Anyang