[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 }