기본 콘텐츠로 건너뛰기

라벨이 ES6인 게시물 표시

[Javascript ES6] Spread(...) 연산자 활용법

Spread 연산자는 ES6에서 도입되었다.  Spread는 ...을 변수 앞에 붙여서 사용하는데, 배열이나 문자열같이 반복 가능한 내용들을 각각의 요소(element)로 풀어 헤쳐준다.  예시를 통해 살펴보자.   1 2 const positive = [ 1 , 2 , 3 , 4 ]; console.log(positive); 아래와 같이 평범하게 array가 출력된다. 이번에는 positive 변수명 앞에 ...을 붙여서 spread를 사용해서 출력해본다.   1 console.log(...positive); 이번에는 array가 그대로 출력되지 않고, 각 요소(element)로 풀어 헤쳐져 출력된다. 그럼 Spread 연산자는 어떻게 활용할 수 있을까? 배열들을 합치는데 사용하면 편리하다.   const positive = [ 1 , 2 , 3 , 4 ]; const negative = [- 1 , - 2 , - 3 , - 4 ]; const number = [...negative, ...positive]; console.log(number);   위와 같이 2개의 array를 Spread 연산자를 이용해 간단하게 합칠 수 있다. 결과는 아래와 같다. 만약 Spread 연산자를 쓰지 않고 바로 합치게 되면 아래와 같이 array 속에 각각의 array가 존재하는 방식으로 합쳐지게 된다. Spread 연산자는 Array 뿐만 아니라, Object를 합치는 데에도 활용할 수 있다. const name = { "firstName" : "Namu" , "lastName" : "Kim" }; const bio = { "height" : 170 , "age" : 30 }; const userInfo = {...name, ...bio}; console.log(userInfo); 위와 같이 2