구조 분해 할당 (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);
위 코드에서 기존 방식은 arr[0], arr[1], arr[2]처럼 대괄호 색인 표기법을 사용하여 각 요소에 개별적으로 접근한 뒤 변수에 대입한다. 반면 구조 분해 할당 문법인 const [d, e, f] = arr;를 사용하면 좌항에 선언된 대괄호 속 변수 순서대로 배열의 요소가 매핑되어 d에는 1, e에는 2, f에는 3이 대입된다. 또한 미리 선언된 배열 변수뿐만 아니라 var [n1, n2] = [1, 2];와 같이 우항에 배열 리터럴을 직접 전달하여 값을 분배할 수도 있다.
배열 구조 분해 할당을 처음 사용할 때 주의할 점은 값이 변수의 이름이 아니라 ‘위치 순서’에 따라 결정된다는 사실이다. 좌항의 변수 개수가 우항 배열 요소의 개수보다 많으면 매칭되지 않는 나머지 변수에는 정의되지 않은 값(undefined)이 할당된다.
위 실행 결과 화면에서는 console.log를 통해 출력된 변수들의 값을 확인할 수 있다. 기존 방식으로 추출한 변수들이 a=1,b=2,c=3 형태로 출력되고, 이어서 구조 분해 할당으로 선언한 n1과 n2의 값인 1 2가 콘솔 창에 정상적으로 표시된다.
객체 해체 (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}`);
위 코드에서 기존 방식은 obj.x, obj.y, obj.z와 같이 점 표기법을 통해 속성에 개별적으로 접근해야 했다. 이를 var { x, y, z } = obj; 구문으로 대체하면 객체 내부의 키 이름과 일치하는 변수가 생성되어 x에는 1, y에는 2, z에는 3이 자동으로 할당된다.
객체의 속성명과 다른 변수명을 사용해야 할 때는 콜론(:) 기호를 사용하여 이름을 재지정한다. var { x:nx, y:ny, z:nz } = obj; 구문은 객체의 x 속성 값을 새로운 변수 nx에, y 속성 값을 ny에, z 속성 값을 nz에 할당하라는 의미이다. 마지막 줄의 비교 연산 x === nx는 동일한 원본 속성값 1이 변수 x와 nx에 각각 복사되었으므로 참(true)을 반환한다.
객체 구조 분해 할당을 사용할 때 자주 발생하는 실수는 콜론 문법의 순서를 반대로 작성하거나 객체에 존재하지 않는 속성명을 지정하는 경우이다. 좌측에 ‘가져올 속성명’, 우측에 ‘새로 생성할 변수명’을 지정해야 하며, 객체에 없는 속성을 지정하면 해당 변수에는 정의되지 않은 값(undefined)이 들어간다.