ES6 Destructuring 구조 분해 할당

배열이나 객체의 속성을 분해해 그 값을 변수에 담을 수 있게 하는 표현식

 

기본 형태

let users = ['Nami', 'Nunu', 'Lux'];
let [user1, user2, user3] = users;
console.log(user1);	//Nami
console.log(user2);	//Nunu
console.log(user3);	//Lux

/*
let user1 = users[0];
let user2 = users[1];
let user3 = users[2];
*/

 

문자열 자른 후 변수에 담기

let str = 'Nami-Nunu-Lux';
let [user1, user2, user3] = str.split('-');

console.log(user1);	//Nami
console.log(user2);	//Nunu
console.log(user3);	//Lux

 

 

기본값 세팅

기본값 세팅 전 : undefined

기본값 세팅 후 : 할당시킨 값으로 출력

let [a, b, c] = [1, 2];
console.log(a);	//a = 1
console.log(b);	//b = 2
console.log(c);	//c = undefined

let [a = 1, b = 2, c = 3] = [1, 2];
console.log(c); 		//c = 3

let [user1, , user3, user4] = ['Nami', 'Nunu', 'Lux'];
console.log(user1, user3, user4);	//Nami Lux undefined

//객체 구조 분해 기본값 세팅
let user = { name: 'Nami', age: 20 };
let { name, age, gender} = user;

console.log(gender);	//undefined


let user = { name: 'Nami', age: 20 };
let { name, age, gender = 'female' } = user;

console.log(gender);	//femaile

 

 

 

변수를 새로운 이름으로 할당시키기

let user = { name: 'Nami', age: 20 };
let { name: userName, age: userAge } = user;
console.log(userName);	//Nami
console.log(userAge);		//20

 

 

 

JSON파싱 시 유용하게 사용

let animation = [
	{
		'title': '귀멸의 칼날',
		'rate': 5,
		'genre': ['시대극', '다크 판타지', '소년만화']
	},
	{
		'title': '주술회전',
		'rate': 5,
		'genre': ['능력자 배틀', '소년 만화']
	},
	{
		'title': '더파이팅',
		'rate': 4,
		'genre': ['스포츠', '소년 만화']
	}
];

let [, { title, genre }] = animation;
console.log(title);	//주술회전
console.log(genre);	//['능력자 배틀', '소년 만화']

 

 

 

let animation = [
	{
		'title': '귀멸의 칼날',
		'rate': 5,
		'genre': ['시대극', '다크 판타지', '소년만화']
	},
	{
		'title': '주술회전',
		'rate': 5,
		'genre': ['능력자 배틀', '소년 만화']
	},
	{
		'title': '더파이팅',
		'rate': 4,
		'genre': ['스포츠', '소년 만화']
	}
];

function getAnimationGenre([, { genre }]) {
	console.log(genre);	//['능력자 배틀', '소년 만화']
}
getAnimationGenre(animation);