[Javscript] 구조분해할당 활용하기

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

 

구조 분해 할당은 문법은 배열혹은 객체에서 각각 값(value) 이나 프로퍼티(property) 를 분해해 손쉽게 별도에 변수에 

담을 수 있도록 해준다.

 

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

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

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

 

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

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

let array = [1,2,3];
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라고 부른다.

 

...문법의 역할이 Rest일 때, 파라미터에 쓰이는 Rest 파라미터, 위처럼 배열의 구조분해 할당에 쓰일 경우 

Rest Elements가 되는 것.

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);

이처럼 구조 분해 할당을 통해서 좀더 간편한 코드를 작성할 수 있다.

 

객체 (Object) 에서의 구조 분해 할당

객체에서의 구조 분해 할당은 아주많이 쓰이는 문법 중 하나이다. 객체 내부의 프로퍼티 값을 간편하게 분해해서 

변수에 저장할 수 있다.

 

배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되, 쓰이는 대상이 객체로 바뀐 것 뿐이다.

 

단, 분해되는 대상은 배열의 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property인 

차이가 있다.

 

const obj = {
   name: "kim",
   age: 23,
   memo: "Hello",
};

const { name, age, memo } = obj;

console.log(name)  // "kim"
console.log(age)  // 23
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 변수에 할당하고 있다.

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 이다.

 

아래가 그 예시이다.

const obj = {
  name: "kim",
  age: 25,
  memo: "hello",
}

const { name, ...rest } = obj;
console.log(name}; // "kim";
console.log(rest); // {age:18, memo: 'Hello'}

obj객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아 rest변수에 모아 객체로 저장해준다.

 

객체의 구조 분해할당에서 위의 역할로 ...이 쓰이는 것을 가리켜 Rest Properties라고 부른다.

 

https://v8.dev/features/object-rest-spread

Object rest and spread properties · V8

위 object rest properties를 응용하면, 쓰고 싶은 프로퍼티만 골라 새로운 객체로 저장할 수 있는 효과를 볼수있다.

 

아래와 같이 코드가 있다고 가정하고 

 

const price = {
  apple: 1000,
  banana: 500,
  orange: 600,
  grape: 700,
};
const { apple, ...otherPrice } = price;
console.log(otherPrice); // { banana: 500, orange: 600, grape: 700 }

price객체에 담긴 프로퍼티 중, apple만을 제외한 나머지 프로퍼티들로 이루어진 객체를 만들고 싶다면 위처럼 

Rest Properties를 사용하면 객체 구조 분해 할당으로 otherPrice 객체에 apple을 제외한 나머지 프로퍼티들이

 

모여서 저장되므로, 특정 프로퍼티만을 제외한 새로운 객체를 만들어 낼수 있다.

 

참고 링크

https://chanhuiseok.github.io/posts/js-10/

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