JavaScript 의 구조 분해 할당(Destructuring Assignment) 활용하기

자바스크립트에서 가장 유용하고도 많이 쓰이는 문법이라 하면 구조 분해 할당 을 빼놓을 수 없다고 생각합니다.

구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property)를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.

배열(arry)에서의 구조 분해 할당

let [a,b] = [10,20]
console.log(a); // 10
console.log(b);//20

구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라 , 위처럼 할당받을 변수를 왼쪽에 분해할 대상을 오른쪽에 해서 대입하는 형식으로 하면 됩니다.

배열 [10,20] 이 분해되어 각 a,b 에 담긴 것입니다.

물론 아래와 같이 미리 저장해 둔 배열로 부터 구조 분해 할당하는 형태도 당연히 가능합니다.

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

참고로 배열 구조분해 할당에서 위와 같이 쓰이는 ...요소를 restelements 라고 부릅니다.

문법의 역할이 Rest 일 때, 파라미터에서 쓰이면 Rest파라미터, 위처럼 배열의 구조분해 할당에 쓰일 경우 Rest elements 가 되는 것이겠네요

만약 , 배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때, 어떻게 하면 될까요 ? 보통 아래와 같은 방법을 떠올릴수 있습니다.

const array = [1,2,3];
const first = array[0];
console.log(first); //1

위 방법 말고, 배열 구조 분해 할당을 이용하여 아래와 같이 작성 할 수도 있습니다.

const array = [1,2,3];
const [first] = array ; 
console.log(first) ; //1

array 배열에 담긴 것을 구조 분해 할당으로 first 라는 변수에 담고자 합니다. 단 , first 에는 array 의 element 중 맨 첫번째 1만 담기게 됩니다.

몇몇 자바스크립트 코드에서 위와 같은 형태의 코드를 보셨던 분들도 계실겁니다.

구조분해 할당이 무엇인지 알기 전에는 그 의미 파악이 힘드셨을 수도 있지만 , 이제는 배열의 첫번째 요소를 변수에 담는 것 ! 이라고 바로 아실 수 있을 것입니다.

그리고 만약 배열의 첫 번째 요소와 두번째 요소를 각각 변수에 담고 싶을 경우 , 구조 분해 할당을 사용하지 않으면 다음과 같이 작성해야합니다.

const array = [1,2,3]; 
const first = array [ 0] ;
const second = array[1] ; 
console.log(first,second) ; // 1 2 

배열 구조 분해 할당을 사용한다면, 다음과 같이 간소화 됩니다.

const array = [ 1,2,3] ;
const [first,second] = array; 
console.log(first,second); //1 2 

이처럼 구조 분해 할당을 통해 좀 더 간편하게 코드를 작성할수 있게 되었습니다.