[Javascript] 구조 분해 할당(Destructuring assignment)을 통해 값 분해해서 받기

구조 분해 할당을 통해서 값을 받아보자.


환경

  • Javascript


구조 분해 할당

정의

  • 구조 분해 할당(Destructuring assignment) : 배열이나 객체에서 원소나 속성을 해체하여 그 값들을 각각의 변수에 담을 수 있도록 하는 구문
  • 다양한 예제들은 아래 ‘참고자료’에 있는 링크에 많이 있다.


간단한 예제

배열 구조 분해

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;

console.log(arr);
console.log(a);
console.log(b);
console.log(c);
[ 1, 2, 3, 4, 5 ]
1
2
[ 3, 4, 5 ]

객체 구조 분해

let object = {
  a: 1,
  b: "test",
  c: [1, 2],
  d: { name: "test", age: 28 },
};

// Key must be same
let { a, b, c, d } = object;

/* Assign to different variable name example
let { a: e, b: f, c: g, d: h } = object;
*/

console.log(a);
console.log(b);
console.log(c);
console.log(d);
1
test
[ 1, 2 ]
{ name: 'test', age: 28 }


사용

  • 이러한 구조 분해 할당(Destructuring assignment)을 사용하면 함수에서 반환된 값을 여러개로 받을 수 있다. 이는 정확하게는 객체나 배열을 반환하고 이를 구조 분해 할당을 통해 받는거다.

배열 반환 예제

function test() {
  return [1, 2, 3, 4, 5];
}

let [a, b, ...c] = test();

console.log(a);
console.log(b);
console.log(c);
1
2
[ 3, 4, 5 ]

객체 반환 예제

function test() {
  let object = {
    a: 1,
    b: "test",
    c: [1, 2],
    d: { name: "test", age: 28 },
  };

  return object;
}

let { a, b, c, d } = test();

console.log(a);
console.log(b);
console.log(c);
console.log(d);
1
test
[ 1, 2 ]
{ name: 'test', age: 28 }


참고자료