[Javascript] 스프레드(spread) 문법

스프레드(spread)는 펼치다, 퍼뜨리다라는 의미가 있다.

이름 그대로 spread는 객체 또는 배열의 값을 펼칠 때 사용하는 문법이다.

 

const chicken = {
    ingre1 : '튀김가루',
    ingre2 : '닭'
};

const hotChicken = {
	...chicken, // ingre1 : '튀김가루', ingre2 : '닭'
    ingre3 : '소스'
};

const supremeChicken = {
	...hotChicken, // ingre1 : '튀김가루', ingre2 : '닭', ingre3 : '소스'
    ingre4 : '크림'
};

 

var arr1 = [1, 2, 3, 4, 5];

var arr2 = [...arr1, 10, 11, 12, 13, 14, 15];
console.log(arr2); // [1, 2, 3, 4, 5, 11, 12, 13, 14, 15]

var arr3 = [...arr2, 21, 22, 23, 24, 25];
console.log(arr3); // [1, 2, 3, 4, 5, 11, 12, 13, 14, 15, 21, 22, 23, 24, 25]

 

 

querySelectorAll()을 통해 select의 option 요소를 한꺼번에 가져왔을 때

배열인줄 알고 map(), filter()를 사용했지만 에러가 발생한 적이 있었다.

 

알고보니 이 요소의 집합은 배열이 아니라 HTMLCollection이라는 배열과 비슷한 객체였고

여기에 map(), filter()와 같이 배열을 처리하는 함수를 사용하기 위해서는

위의 스프레드 문법을 사용해야한다는 것을 알게 되었다.

var opts = document.querySelectorAll('#selection option');
var vals = [...opts].map(opt => opt.value);