자바스크립트_구조분해할당

구조분해 할당 : array / 객체에 에 있는 값을 한번에 정의하는 것. 

const user = {
    name : 'Heropy',
    age : 85,
    email : 'sldk@naver.com'
}

const {name,age,address='seoul'} = user //내가 원하는것만 꺼내서 쓴다
console.log(`${name} . ${age} . ${address}`)

변수 이름을 바꿔줄수도 있다. 

아래 예제에서 name보다 heropy로 정의했다. 어차피 같은 Heropy라는 문자를 가리킨다. 

const user = {
    name : 'Heropy',
    age : 85,
    email : 'sldk@naver.com'
}

const {name : heropy,age,address='seoul'} = user //내가 원하는것만 꺼내서 쓴다
console.log(`${heropy} . ${age} . ${address}`)

배열 데이터도 마찬가지로 구조분해 할당을 할수있다 

이름이 아닌 순서대로 데이터를 뽑는다.

const fruits = ['Apple','banana','Kiwi']
const [a,b,c,d] = fruits
console.log(a,b,c,d)

바나나만 출력하고 싶다면?배열을 비워둔다. 

const fruits = ['Apple','banana','Kiwi']
const [,b] = fruits
console.log(b)

 

함수의 리턴 값도 배열이라면 구조분해 할당으로 저장시켜줄수가 있다. 

function createProduct() {
	return ['노트', 3000];
}
const [proName, price] = createProduct();
console.log(proName); //노트
console.log(price); //3000

객체 값을 구조분해방식을 이용해 인자로 넣는 경우

const yeonmi = { name: '연미', age: 30, job: '강사' };

// 구조분해 방식
function printInfo({ name, age, job }) {
	console.log('이름', name);
	console.log('나이', age);
	console.log('직업', job);
}
printInfo(yeonmi);

함수에 인자를 넣을 때 구조분해를 해서 넣는 경우

const btn = {
	name: 'Button',
	styles: {
		size: 20,
		color: 'black',
	},
};

// 기본 방식
function changeColor(btn) {
	console.log(btn.styles.color);
}
changeColor(btn);

// 구조 분해 방식
function changeColor({ styles: { color } }) {
	console.log(color);
	//console.log(styles); //나오지 않는다. color값만 가지고 왔으므로. 
}
changeColor(btn);