[ ES6 Script ] JS 비구조화 할당(Destructuring)

- 비구조화 할당 왜 쓸까?

const book = {
  korean: "korean",
  math: "math",
  english: "english"
};

const korean = book.korean;
const math = book.math;
const english = book.english;
console.log(korean); // korean
console.log(math); // math
console.log(english); // english

만약 배열이나 객체에서 해당 값들을 새로운 변수에 할당 해줘야할때 위와같은 행위를 여러번 해야합니다.

 

하지만

const { korean, math, english } = {
  korean: "korean",
  math: "math",
  englissh: "english"
};
console.log(korean); // korean
console.log(math); // math
console.log(english); // english

위와 같이 코드를 작성하면 귀찮은 작업을 줄이고 코드도 훨씬 간결해집니다.

 

- 비구조화 할당(Destructuring assignment)

 

객체 또는 배열에서 데이터를 분석해 각각의 변수에 할당해주는 것입니다.

 

 

destructuring 을 사용하면 json 형식의 객체나 배열을 쉽게 변수에 할당할 수 있습니다.

 

let data = [{
	id : 1,
    arr: [{
    	name : ['풀문','배고픔'],
        age : 21
    }]
}];

let [{id, arr:[{name, age}]}] = data;
console.log(`
id : ${id}
age : ${age}
`);

 

 

let 선언자 옆에 배열 표현식으로 동일하게 배치만 해주면 됩니다.

 

배열이 아닌 객체도 객체 표현식으로 할당 가능합니다.

 

 

 

함수의 리턴값도 비 구조화 할당을 통해 여러 변수로 받을 수 있습니다.

 

 

function color({name, color}){
	return {
    	str : name+"'s color : ",
        printColor(){
        	console.log(str+color);
        }
    }
}
var {str, printColor} = color({name : "풀문", color : "blue"});
printColor();

 

 

 

 

객체의 속성이나 배열의 값을 변수에 할당해야할때 Destructuring 을 통해 간편하게 할당하고 정의할 수 있습니다.