노트 #5 | 구조 분해 할당(Spread syntax, ...)

구조 분해 할당(Spread syntax, ...)

• 정의
  • 배열이나 문자열이 변수자리에서 사용 되어질때 배열이나 문자열을 구조 분해하여 할당이 가능되어지게 하는 문법
• 구문

// For function calls:
 myFunction(...iterableObj); // pass all elements of iterableObj as arguments to function myFunction
 
 //For array literals:
 [...iterableObj, '4', 'five', 6]; // combine two arrays by inserting all elements from iterableObj
 
 //For object literals (new in ECMAScript 2018):
 let objClone = { ...obj }; // pass all key:value pairs from an object

• 예시

function sum(x, y, z) {
   return x + y + z;
 }

 const numbers = [1, 2, 3];

 console.log(sum(...numbers));
 // expected output: 6

let numberStore = [0, 1, 2];
 let newNumber = 12;
 numberStore = [...numberStore, newNumber];

function myFunction(x, y, z) { }
 let args = [0, 1, 2];
 myFunction(...args);

function myFunction(v, w, x, y, z) { }
 let args = [0, 1];
 myFunction(-1, ...args, 2, ...[3]);

let parts = ['shoulders', 'knees'];
 let lyrics = ['head', ...parts, 'and', 'toes'];
 //  ["head", "shoulders", "knees", "and", "toes"]

let arr1 = [0, 1, 2];
 let arr2 = [3, 4, 5];

 arr1 = [...arr1, ...arr2];
 //  arr1 is now [0, 1, 2, 3, 4, 5]
 // Note: Not to use const otherwise, it will give TypeError (invalid assignment)

• 사견
  • 클론코딩이나 알고리즘 문제를 풀다보면 가끔 사용하게 되는데 정확한 문법 및 용법을 몰라서 구글링, MDN 등으로 완벽하게는 아니지만 이해하고 사용할 수 있는 수준으로 정리하려고 이 글을 남깁니다.
  • 제가 이해한 간단한 정의는 위와 같고 위의 정의 외에 'key-value pairs' 와 같은 용어도 있는 데 그와 관련된 이해가 부족해서 앞으로 더 알아보겠습니다.(key-value pairs 는 object 에서 사용 되는 것 같은데 이와 관련해서 아직 사용해본적이 없어서 나중에 한 번 필요할때 사용하면 체득할 수 있을 것 같습니다.)