[ES6] Destructuring Assignment / 구조 분해 할당

💡 Destructuring Assignment (구조 분해 할당)

구조 분해 할당이란 말 의미 그대로 객체, 배열의 구조를 분해하여 분해한 값을 변수에 할당한다고 생각하면 된다.

(구조 분해 할당 구문은 배열의 값이나 객체의 속성을 별개의 변수로 추출할 수 있게하는 자바스크립트 식)

---

💡 배열 구조 분해 할당 

let arr = ["dong","hwi"];

// 배열 구조 분해 
let [firstName, surname] = arr;

console.log(firstName);
console.log(surname);

// 배열으로 접근하지 않고 변수로 사용 할 수 있게 됐다.

split(' ') 함수를 활용 할 수도 있다.

let [firstname, surname] = "kim dong".split(' ');

* 구조 분해 할당을 한다고 해서 기존의 arr는 바뀌지 않는다.

 

1. 쉼표를 사용하여 요소를 무시할 수 있다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

2. 할당 연산자 좌측엔 뭐든지 올 수 있다.

할당 연산자 좌측엔 할당 할 수 있는 것이라면 어떤 것이든지 올수 있다.(객체 프로퍼티도 가능)

let user = {};
[user.name, user.surname] = "kim hwi".split(' ');

console.log(user.name);

3. entries()로 반복할수 있다.

let user = {
	name : 'john',
	age:30
};

for(let[key, value] of Object.entries(user)){
	console.log(`${key} : ${value}`);
}

4.'...'로 나머지 요소 배열로가져오기

let [name1, name2, ...rest] = ['a','b','c','d','e'];

console.log(name1);
console.log(name2);

console.log(rest[0]);	// c
console.log(rest[1]);	// d

rest말고 다른 변수명도 사용 가능하다. 하지만 변수명 앞에 . 세개를 꼭 지켜줘야한다.

---

💡 객체 구조 분해 할당

let options = {
	title: "menus",
    width:100,
    height:200
};

let {title, width, height} = options;

console.log(title);
console.log(width);
console.log(height);

---

참고

ko.javascript.info/destructuring-assignment

구조 분해 할당