김민태의 데브캠프 2기 - 구조 분해 할당(Destructuring)

정의 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식

 

 

객체 구조 분해 할당 예시

 

let person = {
	name: 'Maya",
	age: 30,
	phone: '123',
	address: {
		zipcode: 1234,
		street: 'rainbow',
		number: 42
	}
}

let {address: {zipcode, street, number}} = person;

console.log(zipcode, street, number); // 1234 rainbow 42

 

배열 구조 분해 할당 

 

let a, b, rest;
{a, b} = [10, 20];

console.log(a);

console.log(b);

{a, b, ...rest} = [10, 20, 30, 40, 50]}

console.log(rest)  // 30, 40, 50

// 인덱스 값을 이용한 참조
const week = ['monday', 'tuesday', 'wednesday', 'thuresday', 'friday'];
const day1 = week[0];
const day2 = week[1];
const day3 = week[2];
const day4 = week[3];
const day5 = week[4];

// 배열 구조 분해 할당

const week = ['monday', 'tuesday', 'wednesday', 'thuresday', 'friday'];
const [day1, day2, day3, day4, day5] = user;

const numbers = [1,2,3,4,5,6];

const [..three, ..five] = numbers;

 

심화 배열 구조 분해 할당

 

var people = [
	{
		name: 'Mike Smith',
		family: {
			mother: 'Jane Smith',
			father: 'Harray Smith';
			sister: 'Samanta Smith'
		},
	age:35
	},

	{
		name : 'Tom Jonee',
		family: {
			mother: 'Morah Jonee',
			father: 'Sichard Jonee',
			broher: 'Howard Jonee'
		},
	age: 25
	}
};

for (var {name: n, family: { father: f ) ) of people; {
	console.log("Name : " + n + ", Father: " + f);
}

// "Name : Mike Smith, Father: Harry Smith'
// "Name : Tom Jonee, Father: Sichard Jonee'