[JavaScript] 구조분해할당

❓ 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

간단히 알아보기

var x = [1, 2, 3, 4, 5];
var [y, z] = x; // 미리 저장해둔 배열로부터 할당받음
console.log(y); // 1
console.log(z); // 2

활용

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];

응용

1. 배열의 첫번째 요소와 두번째 요소를 변수에 담기

보통의 경우

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

구조 분해 할당 사용

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

객체에서의 구조 분해 할당

❓ 배열에선 분해되는 대상이 배열의 값(element) 였다면 객체는 객체의 property 이다.

 

const obj = {
  name: "chae yeon",
  age: 23,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "chae yeon"
console.log(age); // 23
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다.
const name = obj.name;
const age = obj.age;
const memo = obj.memo;

여기서 위에서 사용했던 […] 을 추가로 사용할 수 있다.

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

함수에서의 비구조화 할당

const obj = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(obj);