자바스크립트에서 가장 유용하고도 많이 쓰이는 문법이라 하면 구조 분해 할당을 빼놓을 수 없다고 생각합니다.
구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.
배열(array)에서의 구조 분해 할당
1
2
3
let [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라, 위처럼 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 됩니다.
배열 [10, 20] 이 분해되어 각각 a, b에 담긴 것입니다.
물론 아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 당연히 가능합니다.
1
2
3
let array = [1, 2, 3];
let [a, b, c] = array;
console.log(a, b, c); // 1 2 3
여기서 또 활용되는 것이 앞의 포스팅에서 많이 보았던 ... 표현입니다.
이번 구조 분해 할당에서는 어떻게 쓰이는지 살펴보자면…
1
2
3
let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];
위의 형태와 기능, 어디서 많이 본 것 같지 않나요? 바로 Rest 파라미터 에서도 대응되고 남은 인수는 묶어서 배열로 받아 주었는데요.
구조 분해 할당에서는 a, b 까지 1과 2가 대입이 되고, 나머지 3, 4, 5는 ...rest 로 받아서 [3, 4, 5] 와 같이 rest 변수에 배열로 저장해 줍니다.
참고로 배열 구조분해 할당(array destructuring assignment)에서 위와 같이 쓰이는 ... 요소를 Rest elements 라고 부릅니다. (참고 : https://v8.dev/features/object-rest-spread)
... 문법의 역할이 Rest 일 때, 파라미터에서 쓰이면 Rest 파라미터, 위처럼 배열의 구조분해 할당에 쓰일 경우 Rest elements가 되는 것이겠네요!
이제는 배열 구조 분해 할당이 주로 응용되는 예시를 살펴보겠습니다.
만약 배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때, 어떻게 하면 될까요? 보통 아래와 같은 방법을 먼저 떠올릴 수 있습니다.
1
2
3
const array = [1, 2, 3];
const first = array[0];
console.log(first); // 1
위 방법 말고, 배열 구조 분해 할당을 이용하여 아래와 같이 작성할 수도 있습니다.
1
2
3
const array = [1, 2, 3];
const [first] = array;
console.log(first); // 1
array 배열에 담긴 것을 구조 분해 할당으로 first 라는 변수에 담고자 합니다. 단, first 에는 array의 element 중 맨 첫번째 1 만 담기게 됩니다.
몇몇 자바스크립트 코드에서 위와 같은 형태의 코드를 보셨던 분들도 계실 것입니다.
구조분해 할당이 무엇인지 알기 전에는 그 의미 파악이 힘드셨을 수도 있지만, 이제는 배열의 첫번째 요소를 변수에 담는 것!이라고 바로 아실 수 있을 것입니다.
그리고 만약 배열의 첫 번째 요소와 두 번째 요소를 각각 변수에 담고 싶을 경우, 구조 분해 할당을 사용하지 않으면 다음과 같이 작성해야 합니다.
1
2
3
4
const array = [1, 2, 3];
const first = array[0];
const second = array[1];
console.log(first, second); // 1 2
배열 구조 분해 할당을 사용한다면, 다음과 같이 간소화됩니다.
1
2
3
const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); // 1 2
이처럼 구조 분해 할당을 통해 좀 더 간편하게 코드를 작성할 수 있게 되었습니다.
객체(object)에서의 구조 분해 할당
객체에서의 구조 분해 할당은 아주아주 많이 쓰이는 문법입니다. 객체 내부의 프로퍼티 값을 간편하게 분해해서 변수에 저장할 수 있게 해 줍니다.
배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되, 쓰이는 대상이 객체로 바뀐 것 뿐입니다.
단, 분해되는 대상이 배열은 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property 인 차이가 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"
// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다.
const name = obj.name;
const age = obj.age;
const memo = obj.memo;
이처럼 obj 내부의 name, age, memo 프로퍼티들을 각각 프로퍼티명과 이름이 동일한 name, age, memo 변수에 알아서 분해하여 할당해 주고 있습니다!
물론 객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있습니다. obj로부터 분해된 name 프로퍼티의 값을 새롭게 이름지은 YourName 변수에 할당하고 있습니다.
1
2
3
4
5
6
7
const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'John'
객체 구조 분해 할당은 프로퍼티를 기준으로 하기 때문에, 배열 구조 분해 할당과 달리 그 순서가 뒤바뀌어도 전혀 문제없이 해당 프로퍼티의 값을 가져올 수 있습니다. 아래가 그 예시입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const obj = {
name: "John",
age: 18,
memo: "Hello",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;
console.log(name); // 'John'
console.log(age); // 18
console.log(memo); // 'Hello'
// 배열 구조 분해 할당의 경우 작성된 순서대로 배열의 값을 넣어준다.
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30
여기서도 또 한번 ... 문법을 활용할 수 있습니다. 여기서 소개할 역할 또한 Rest 인데요, 아무튼 ...는 정말 마법 같습니다.
아래가 그 예시입니다.
1
2
3
4
5
6
7
8
const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }
obj 객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아서 rest 변수에 모아 객체로 저장해 줍니다.
객체의 구조 분해 할당에서 위의 역할로 ...이 쓰이는 것을 가리켜 Rest properties 라고 부릅니다. (참고 : https://v8.dev/features/object-rest-spread)
참고로, 위처럼 객체(Object) 구조 분해 할당에서 쓰이는 Rest Properties는 ES2015(ES6)이 아니라 ES2018(ES9) 에서 도입된 기능입니다.
위 object rest properties를 응용하면, 쓰고 싶은 프로퍼티만 골라서 새로운 객체로 저장할 수 있는 효과를 볼 수 있습니다.
아래와 같은 코드가 있다고 가정합니다.
price 객체에 담긴 프로퍼티 중, apple만 제외한 나머지 프로퍼티들로 이루어진 객체를 만들고 싶을 경우, 어떻게 하면 될까요?
1
2
3
4
5
6
7
8
const price = {
apple: 1000,
banana: 500,
orange: 600,
grape: 700,
};
const { apple, ...otherPrice } = price;
console.log(otherPrice); // { banana: 500, orange: 600, grape: 700 }
이렇게 Rest properties를 사용하면 객체 구조 분해 할당으로 otherPrice 객체에 apple을 제외한 나머지 프로퍼티들이 모여서 저장되므로, 특정 프로퍼티만 제외한 새로운 객체를 만들어 낼 수 있습니다.
참고 : 구조 분해 할당은 아니지만, Object Rest Properties와 같이 ES2018(ES9) 에서 도입된 Object Spread Properties도 있습니다. (참조 : spread operator 포스팅 후반부)
참고 링크