[JS] 구조 분해 할당 (destructing assignment)

• 구조 분해 할당은 객체나 배열을 변수로 분해할 수 있게 해주는 문법이다.
• 함수에 객체 또는 배열의 일부만 전달하고자 하는 경우에 사용할 수 있다.

 

1. 배열 분해

• 배열을 분해하고 변수에 초기화 하는 과정이 짧아진다.
• 대상 배열이 실제로 파괴되거나 분해되는 것은 아니다.

let arr = ["injuk", "hong"];
console.log(`Arr: ${arr}`);

let [last, first] = arr;
console.log(`Last: ${last}
First: ${first}`);


/* 실행
Arr: injuk,hong
Last: injuk
First: hong
*/

let [a, b] = 'hong ingnoh'.split(' ');

console.log(`last: ${a}
first: ${b}`);

/* 실행
last: hong
first: ingnoh
*/

 

• 필요 없는 배열 요소는 버릴 수 있다.
• 좌항에는 객체 속성도 올 수 있다.

let user = new Object();
[user.a, , user.c] = 'hong discard ingnoh discard'.split(' ');

console.log(user.a, user.c);

/* 실행
hong ingnoh
*/ 

 

• 2개 이상의 변수를 교체할 때에도 사용할 수 있다.

let a = 'injuk';
let b = 'ingnoh';
console.log(a, b);
// let temp = a;
// a = b;
// b = a;
// delete temp;
// console.log(a, b);

[a, b] = [b, a];
console.log(a, b);

/* 실행
injuk ingnoh
ingnoh injuk
*/

 

• 좌항과 우항은 반드시 변수 개수가 같을 필요는 없으며, 할당받으려는 항목 외는 모두 하나의 변수에 초기화하는 것도 가능하다.

let uselessArr = [
  1, "abc", 2, true, false, {}
];

let [num, str, ...rest] = uselessArr;
console.log(num);
console.log(str);
console.log(rest);

/* 실행
1
abc
[ 2, true, false, {} ]
*/

 

• 좌항의 변수가 구조 분해하려는 배열의 개수보다 적을 수 있다.
• 이 경우, 등호를 사용하여 기본값을 지정할 수 있다.

let [firstname, lastname] = [];
console.log(firstname, lastname);

[firstname, lastname = "unknown"] = ["injuk"];
console.log(firstname, lastname);

/* 실행
undefined undefined
injuk unknown
*/

 

 

2. 객체 분해

• 배열과 달리 프로퍼티 명으로 분해해야만 한다.

let obj = {
  "policyName": "abc",
  "policyArn": "arn"
}

console.log(obj.policyName);
console.log(obj.policyArn);

let { policyName, policyArn } = obj;
console.log(policyName);
console.log(policyArn);

/* 실행
abc
arn
abc
arn
*/

 

• 프로퍼티명이 아닌 새로운 변수 이름을 사용하고 싶은 경우는 다음과 같이 작성할 것.

let obj = {
  "policyName": "abc",
  "policyArn": "arn"
}

let { policyName:foo, policyArn:bar } = obj;
console.log(foo);
console.log(bar);

/* 실행
abc
arn
*/

 

• 중첩된 객체는 구조를 맞춰주어야만 한다.

let obj = {
  "hello": {
    "a": 1,
    "world": "hello world"
  },
  "true": true
}

let { 
  "hello": { 
    "a": num, 
    "world": world
  }, 
  "true": str
} = obj;
// let { hello: { a: num, world: world}, true: str} = obj; <- 이렇게도 사용 가능
console.log(num); // key와 다른 이름의 변수를 사용해도 무방
console.log(world); // key와 같은 이름의 변수를 사용해도 무방
console.log(str);

/* 실행
1
hello world
true
*/