[JAVASCRIPT] 알아두면 편리한 스프레드 spread 문법

javascript spread 문법

 

스프레드 SPREAD 문법의 사용법

 

ES6에 새롭게 추가된 문법 중에 스프레드(spread) 문법이 추가되었습니다. 말줄임표처럼 생긴 이 문법은 Spread Operator(스프레드 연산자, 전개 구문, 펼침 연산자 등)라고 하는데, 배열이나 문자열과 같이 반복이 가능한 문자를 0개 이상의 인수(파라미터, 함수로 호출시) 또는 요소 (배열 리터럴의 경우)로 확장할 수 있습니다. 

 

예를 들어서 아래와 같은 배열이 있다고 생각해봅시다.

 

const fruits = ['apple', 'banana', 'kiwi'];
const numbers = [1, 2, 3, 4, 5];
const str = 'market';

스프레드 가능한 대상은 배열이 될 수도 있고 문자열이 될 수도 있습니다. 배열이 스프레드가 되면 아래와 같이 배열 안의 요소들이 전개됩니다. 전개가 되면 배열 안의 요소들이 각각 출력됩니다. 

 

console.log(...fruits);
console.log(...numbers);

apple banana kiwi
1 2 3 4 5

 

문자열을 전개하면 어떻게 될까요?

console.log(str)
console.log(...str)

market
m a r k e t

문자열에 있는 문자들이 문자로 쪼개서 전개되는 것을 알 수 있습니다.

 

스프레드 문법은 키-쌍으로 된 객체도 전개시켜줍니다.

const transport = [{'bus': 4123, 'walk':9123, 'subway': 912}];
console.log(...transport)
> {bus: 4123, walk: 9123, subway: 912}

console.log(transport)
> [{...}]
> 	0 : {bus: 4123, walk: 9123, subway: 912}
    
typeof(...transport)
> Uncaught SyntaxError: Unexpected token '...'

typeof(transport)
> 'object'

typeof({...transport})
> 'object'

 

이런 식으로 스프레드 문법은 문자열이나 배열 내에 있는 요소들을 말 그대로 전개하여 전달해줍니다. 만약 변수에 할당하려고 하면 Unexpected token '...' 에러가 뜹니다. 할당하기 위해서는 {} 혹은 [] 로 감싸서 전개구문을 사용해야 합니다.

 

스프레드 문법은 알아두면 여러 곳에서 유용하게 사용할 수 있습니다. 다음에는 활용법에 대해서 다뤄보도록 하겠습니다.