구조분배할당

구조분배할당이란?

Destructuring Assignment

... 연산자를 이용해서 배열이나 Object를 분해 ( Spread ) 하는 것을 의미

형식

배열

const numbers = [10, 20, 30, 40, 50];
const [a, b, ...rest] = numbers;

console.log(a, b); // 10, 20
console.log(rest); // 30, 40, 50

활용 1 - 할당

/* 할당 */
let num1, num2 = [ 10, 20 ];
console.log( num1, num2 ); // 10, 20

const arr1 = [ 40, 50, 60 ];
let [ tmp1, ,tmp3 ] = arr1;
console.log( tmp1, tmp3 ); // 40, 60

활용 2 - swap

/* swap */

let num1 = 10, num2 = 20;
console.log( num1, num2 ); // 10, 20
 
[num1, num2] = [num2, num1];
console.log( num1, num2 ); // 20, 10

활용 2 - copy

/* copy */

let arr1 = [ 10, 20, 30, 40 ];
let arr2 = [ ...arr1 ];

console.log( arr1 ); // [ 10, 20, 30, 40 ];
console.log( arr2 ); // [ 10, 20, 30, 40 ];

arr2[0] = 60;
console.log( arr1 ); // [ 10, 20, 30, 40 ];
console.log( arr2 ); // [ 60, 20, 30, 40 ];

Object

const obj = { a: 10, b: 20, c: 30, d: 40 };
const { a, b, ...rest } = obj;

console.log( a, b ); // 10, 20
console.log( rest ); // { c: 30, d: 40 }

활용 1 - 함수 인자

function func( { key1, key3, ...restKey } ) {
	console.log( key1, key3 );
  console.log( restKey );
}

func( { key1: "value1", key2: "value2", key3: "value3" } );
// value1, value3
// { key2: "value2" }

활용 2 - copy

/* copy */

const obj1 = { a: 10, b: 20, c: 30, d: 40 };
const obj2 = { ...obj1 };

console.log( obj1 ); // { a: 10, b: 20, c: 30, d: 40 };
console.log( obj2 ); // { a: 10, b: 20, c: 30, d: 40 };

obj2.a = 60;
console.log( arr1 ); // { a: 10, b: 20, c: 30, d: 40 };
console.log( arr2 ); // { a: 60, b: 20, c: 30, d: 40 };