[Javascript] destructuring( 구조분해할당 ) 사용법 (feat. object, array)

destructuring 은 array나 object에서 값(value)과 프로퍼티(property) 를 분해하여 새로운 변수에 담을 수 있게 해준다.

Array 에서의 구조 분해 할당

 

기본형태

다음과 같이 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다.

 

• 배열 [1, 2] 이 destructuring 되어 각각 num1, num2 변수에 할당되었다.

let [num1, num2] = [1, 2];

console.log(num1); 

출력 : 1

 

• 이전에 선언된 배열에서 destructuring하는것도 가능하다.

let arr = [-1, 0, 1];
let [negative, zero, positive] = arr;
console.log(zero); 

출력 : 0

 

• destructuring 하기위해 rest 문법을 사용할 수 있다.

let arr = [-2, -1, 0, 1, 2];
let [a, b, ...rest] = arr;
console.log(rest); 

출력 : [0, 1, 2];

 

Object에서의 구조 분해 할당

 

destructuring은 객체 내에 존재하는 property를 분해해서 변수에 저장할 수 있게 해준다. 배열에서 destructuring한것과 크게 다를것 없이 사용한다. 

• 기본형태

let test = {
  first: '인공지능',
  second: '소스2',
  third: '컴파일러'
};

const { first, second, third } = test;
console.log(first); 
console.log(second); 
console.log(third); 

출력 : 
인공지능
소스2
컴파일러

 

destructuring을 사용하지 않으면 일일이 변수에 값을 할당해주어야 한다.

let test = {
  first: '인공지능',
  second: '소스2',
  third: '컴파일러'
};

let first = test.first;
let second = test.second;
let third = test.third;

 

이처럼 test객체의 first, second, third  property들을 각각 first, second, third 변수로 자동으로 destructuring 된다.

 

• 객체의 새로운 key 값으로 destructuring 하기

test 객체로부터 destructuring된 first key 값을 새로운 이름의 FirstMidterm 변수에 할당하고 있다.

 

let test = {
  first: '인공지능',
  second: '소스2',
  third: '컴파일러'
};

const { first : FirstMidterm, second, third } = test;
console.log(FirstMidterm); 

출력 : 
인공지능

 

• Object Destructuring은 Key를 기준으로 하기 때문에, destructuring 순서가 바뀌어도 그 프로퍼티의 값을 가져올 수 있다. 하지만 배열의 변수의 순서대로 destructuring 된다.

let test = {
  first: '인공지능',
  second: '소스2',
  third: '컴파일러'
};

const { second, third, first } = test;
console.log(first); 
console.log(second); 
console.log(third); 

출력 : 
인공지능
소스2
컴파일러

 

• Rest 문법을 이용한 destructuring

let test = {
  first: '인공지능',
  second: '소스2',
  third: '컴파일러'
};

const { first, ...others } = test;
console.log(first); 
console.log(others); 


출력 : 
인공지능
{second: '소스2', third: '컴파일러'}