자바스크립트 문법 ... 을 이용한 전개 구문(spread syntax)

 

🔥 Javascript Spread Syntax (..)

 

다른 분의 코드를 보다가 배열안에 ... 을 사용한 걸 보고 뭔가 싶어서 찾아보니 전개 구문(Spread syntax)라 불리는 자바스크립트 문법이 있었다.

 

Spread syntax (...) - JavaScript | MDN

• Spread Syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

 

솔직히 뭔말인지 잘 모르겠다. 대충 복수의 엘리먼트들을 표현할 때 쓰인다는 것 같다.

 

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

const numbers = [1, 2, 3];

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

 

예제를 봐도 인수로 numbers를 전달하는 것과 무슨차이인지 알수가 없다.

 

해설을 보니 spread syntax의 특징은 이렇다고 한다.

 

• the real value in spread syntax is that it works with the same value, no matter how many elements are contained in object, array. etc.

요는 전달하는 배열이나 객체 등에 담겨있는 요소 수가 몇 개인지는 상관없다는 것이다.

 

위 예시에서 배열에 담긴 값을 [1,2,3,4] 로 늘려도 sum에는 1,2,3만 전달되어 결과는 동일하게 6이 나온다.

 

• It is commonly used when you want to add a new item to a local data store, or display all stored items plus a new addition.

흔히 로컬 데이터 저장소에 새로운 아이템을 저장할 때 쓰이거나 새롭게 추가한 후 저장된 아이템을 표시할 때 쓰인다고 한다.

 

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

 

위 코드를 콘솔에서 실행해보면

 

 

numberStore에 두 배열이 합쳐진 배열이 할당되는 것을 알 수 있다.

위와 같이 새로운 값을 계속해서 추가하는 코드를 짤 수도 있을 것 같다.

 

---

📣 Syntax

 

//For function calls: 
// pass all elements of iterableObj as arguments to function myFunction
myFunction(...iterableObj);

// For array literals or strings: 
// combine two arrays by inserting all elements from iterableObj
[...iterableObj, '4', 'five', 6]; 

// For object literals (new in ECMAScript 2018):
// pass all key:value pairs from an object
let objClone = {...obj};

 

---

📣 Spread in array literals

 

spread syntax는 특히 배열에서 위력을 발휘한다.

 

push나 splice같은 API없이도 배열을 수정할 수 있다.

 

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

 

 

스프레드를 이용하면 아래처럼 배열을 복사하는 것도 가능하다.

 

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()

arr2.push(4);
//  arr2 becomes [1, 2, 3, 4]
//  arr remains unaffected

 

또 concat()을 대체가능하다.

 

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

//  Append all items from arr2 onto arr1
arr1 = arr1.concat(arr2);

 

이 코드를 스프레드를 이용하면

 

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)

 

이렇게 쓸 수 있다. 

 

확실히 배열에 새로운 아이템을 추가할 때는 스프레드가 간결하고 쉽다. 그렇다면 API와 비교했을 때 장단점은 무엇인지도 궁금해지는데 일단 오늘은 여기까지만..

 

 

 

브라우저 호환성을 보니 익스플로러만 죽어있는 모습.. 어서 빨리 역사속으로 사라지길