12_destructuring
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
구조 분해 할당 (Destructuring Assignment)
구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다.
배열 해체 (Array Destructuring)
배열 해체는 배열의 각 요소를 변수에 할당하는 것입니다. 배열 해체는 기본값과 같은 다양한 변수 할당 방식을 사용하여 변수를 초기화 할 수 있습니다.
/**
* array destructuring
*/
const arr = [1, 2, 3];
// 기존 할당 방식
const a = arr[0]; //1
const b = arr[1]; //2
const c = arr[2]; //3
console.log(`a=${a},b=${b},c=${c}`);
//구조분해할당
const [d, e, f] = arr;
var [n1,n2]=[1,2]
console.log(n1,n2);

객체 해체 (Object Destructuring)
객체 해체는 객체의 속성을 변수에 할당하는 것입니다.
/**
* object destructuring
*/
var obj = { x: 1, y: 2, z: 3 };
// 기존 할당 방식
var x = obj.x;
var y = obj.y;
var z = obj.z;
//구조분해할당표현식
var { x, y, z } = obj;
var { x:nx, y:ny, z:nz } = obj;
console.log(`x=${x},y=${y},z=${z}`);
console.log(`x=${nx},y=${ny},z=${nz}\n ${x === nx}`);