[JavaScript] 구조 분해 할당

구조 분해 할당이란 배열 또는 객체의 구조를 분해하여, 그 값을 개별 변수에 담는 표현식을 의미한다.

 

배열 구조 분해

먼저 우리가 잘 아는 방법으로 초기화된 배열을 하나 가정해 보자. 아래 코드처럼 배열에 접근할 때 arr [0]과 같이 인덱스에 접근해 그 값을 사용할 수 있다. 즉, 배열 내부의 값을 새로운 변수에 할당하고자 하면 아래처럼 각각 할당해야 한다.

const arr = [1, 2, 3, 4, 5];

const one = arr[0];
const two = arr[1];
const three = arr[2];

console.log(one, two, three);

 

이때 배열에 구조 분해 할당을 사용해 변수를 선언하고 할당하는 과정을 다음 코드처럼 한 번에 해결할 수 있다.

const arr = [1, 2, 3, 4, 5];
const [one, two, three] = arr;

console.log(one, two, three);

 

객체 구조 분해

객체의 구조 분해 할당 역시 방법은 동일하다. 단, 할당한 변수의 이름을 자유롭게 정할 수 있는 배열의 구조 분해 할당과 달리, 객체를 할당할 때는 분해하려는 프로퍼티의 키를 사용해야 한다.

const obj = {
	x: 10,
    y: 20
    };
    
const { x, y } = obj;
console.log(x, y); // 10 20

 

변수 이름 변경

만약 프로퍼티의 키값이 아닌 다른 이름으로 변수를 사용하고 싶다면, 다음 코드처럼 콜론을 붙이고 사용할 변수 이름을 지정하면 된다.

const obj = {
	x: 10,
    y: 20
    };
    
const { x: hello, y:world } = obj;
console.log(hello, world); // 10 20

 

중첩된 객체의 구조 분해

중첩된 객체에 구조 분해 할당을 사용할 때는, 내부 변수명 (키) 옆에 콜론을 붙인 다음 또다시 {} 괄호를 열어 중첩 관계를 표현한다.

const obj = {
	data: {
    	user: {
        name: 'John'
        }
     }
 };

const { data: { user: { name } } } = obj;
console.log(name); // John

 

함수 인자 구조 분해

함수 인자로 전달되는 배열 또는 객체에 대해서도 구조 분해 할당 표현식을 적용할 수 있다.

const obj = {
	name: 'John',
    job: 'Rock Star',
    hobby: ['Game', 'Exercise']
    };
    
function print(obj) {
	console.log(`Hello, ${obj.name}`);
    console.log(`You are a ${obj.job}`);
    console.log(`love ${obj.hobby[0]} and ${obj.hobby[1]}`);
  }

print(obj);
/*
Hello, John
You are a Rock Star
love Game and Exercise
*/

 

구조 분해 활용

기본 값

구조 분해할 값이 할당할 변수의 개수보다 적을 경우, 값을 할당받지 못한 변수는 undefined 값을 가진다. 이때 값을 할당받지 못한 경우 지정될 기본 값을 지정할 수 있다.

const [one = 1, two = 2] = ['하나'];
console.log(one, two); // 하나, 2

 

중간 값 생략

값과 값 사이에 값을 생략 하고 싶다면, 쉼표로 중간 값을 무시한다는 것을 명시할 수 있다.

const arr = [1, 2, 3, 4, 5];
const [one, , three] = arr;

 

나머지 요소

각각의 값을 주어진 변수에 할당한 다음, 나머지 남은 모든 요소들을 처리하기 위해서 나머지 인자 구문을 사용한다.

const arr = [1, 2, 3, 4, 5];
const [one, two, ...three] = arr;
console.log(one, two, three); // [3, 4, 5]

 

변수 값 교환

구조 분해 할당은 어떤 변수의 값을 스왑 할 때에도 사용될 수 있다.

let a = 123;
let b = 456;
[a, b] = [b, a];
console.log(a, b); // 456, 123