[JS] 디스트럭처링 할당 (해체 할당)

디스트럭처링 할당이란?

디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다.

배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

 

Object 디스트럭처링

const obj = {b : 2, c: 3, d: 4};

const [a,b,c] = obj;
a; // undefined
b; // 2
c; // 3
d; // ReferenceError;

• 객체를 해체할 때는 반드시 변수 이름과 객체의 프로퍼티 이름이 일치해야한다. 
• 프로퍼티 이름이 유효한 식별자인 프로퍼티만 해체 후 할당된다.

const obj = {b : 2, c: 3, d: 4};

let a, b, c;

{a,b,c} = obj;

// -> 에러가 일어남

({a,b,c} = obj);

// -> 정상 동작

• 객체할당은 반드시 괄호를 써야한다.

 

Array 디스트럭처링

const arr = [1,2,3];

let [x,y] = arr;
x; // 1
y; // 2
z; // 참조 에러

--------------------------------
const arr = [1,2,3,4,5];
let [x, y, ...rest] = arr;
x; // 1
y; // 2
rest; // [3,4,5]

• 배열 요소에 대응할 변수 이름을 마음대로 쓸 수 있다.
• 배열 순서대로 대응한다.
• spread operators (...)를 사용하면 남은 요소를 새 배열에 할당할 수 있다.

 

Default Value 디스트럭처링

const { id, name, addr = 'Seoul' } = { id: 1, name: 'Hong' }; 
// addr = 'Seoul'
const [ a, b, c = 3 ] = [ 1, 2 ];  
// a = 1, b = 2, c = 3

 

Function Arguments 디스트럭처링

const user = { id: 1, name: 'Hong', addr: { city: 'Seoul' } };
function fn(arg1, {id, name}, arg2) { console.log(arg1, id, name, arg2); }
fn(10, user, 20);  
// 10, {id : 1, name : 'Hong' }, 20

 

예제

key를 전달하면 해당 값의 첫 글자를 제외한 문자를 리턴하는 함수를 destructing을 최대한 활용하여 작성하기

const user1 = { name: "Hong", passwd: "xyz", addr: "Seoul" };
function getUserValueExceptInitial(k) {
  const { [k]: val } = user1;
  const [a, ...word] = val;
  return word.join("");
}

console.log(getUserValueExceptInitial("name")); // 'ong'
console.log(getUserValueExceptInitial("passwd")); // 'yz'
console.log(getUserValueExceptInitial("addr")); // 'eoul'