[ECMAScript] Javascript ES6 Spread, Rest 정리

[ECMAScript] Javascript ES6 Spread, Rest 정리

 

ES6을 사용한 프로그램에서 … 이라는 기호를 많이 보게 될텐데, 이것은 Spread Operator와 Rest Parameter입니다.

레퍼런스에서는 상세하게 설명이 되어 있는데, 이런 연산자가 생소한 사람에게는 … 기호가 섞인 복잡한 코드를 보면 멘탈이 붕괴됩니다….(본인처럼)

확실하게 개념을 잡고 넘어가기 위해 쉽게 정리해보겠습니다!

 

 

1. Spread

Spread 연산자는 iterable 객체를 함수의 인자, 또는 배열 literal의 요소로 확장합니다.

이 말은 즉슨 배열과 같은 여러 개의 데이터를 가진 데이터형이 있을텐데, [ , , , ]과 같이 여러 개의 콤마로 구분되는 저장소에 펼쳐서(Spread) 초기화를 해준다고 생각하면 됩니다.

펼친다는 개념으로 기억하겠습니다!

 

1) 함수의 인자로 펼치기

대표적인 사용법으로는 Iterable 객체를 함수의 인자로 펼쳐서 호출하는 것입니다. 각 요소가 [ , , , ]으로 펼쳐진 모습을 생각해보겠습니다.

 

function foo(a, b, c, d) {
  console.log(a, b, c, d)
}
const arr = ["a", "b", "c", "d"]
foo(...arr)

 

위의 코드에서 arr은 foo 함수에 펼쳐서 각각의 요소에 들어갑니다. 

 

Map과 Set 또한 iterable 객체이므로 다음과 같이 작성할 수 있습니다.

 

function foo(a, b, c, d) {
  console.log(a, b, c, d)
}
 
const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
  ["d", 4],
])
foo(...map)
 
const set = new Set(["a", "b", "c", "d"])
foo(...set)

  

 

 

 

2) 다른 배열의 요소로 펼치기

아마도 이 모습을 자주 보았을 것이고, 이 모습 때문에 이해하기가 어려웠을 거라 생각합니다.

먼저 [1,2,3,4]와 같은 형태를 array literal이라고 합니다. 배열을 정의하기 위해서 흔하게 사용하는 방법인데, spread는 이 array literal에 다른 배열의 요소를 넣기 위해서 사용됩니다.

 

const arr = ["a", "b", "c", "d"]
const arr2 = [...arr] // 배열의 얕은 복사. 새로운 배열의 생성하되 그 요소들을 arr을 펼쳐서 새로운 배열의 요소로써 채웁니다.
const arr3 = [...arr, "e"] // 요소 추가.
 
const brr = ["a", "b"]
const brr1 = ["c", "d"]
const brr2 = [...brr, ...brr1] // 두 배열의 요소를 합친 새로운 배열 생성
 
const crr = ["b", "c"]
const crr1 = ["a", ...crr, "d"] // 중간에 다른 배열의 요소를 추가하여 새로운 배열 생성

 

arr2에는 arr과 같은 내용이 복사가 되고, arr3에는 a,b,c,d와 추가로 e가 복사가 됩니다!  

이러한 spread 연산자를 사용함으로 push(), splice(), concat(), unshift()와 같은 배열 조작 함수를 대체할 수 있습니다.

 

 

 

3) 추가적인 기능

 

객체의 복사 

const obj = { a: 1, b: 2 }
const obj1 = { ...obj } // obj객체를 펼쳐서 새로운 객체를 생성한다.
console.log(obj === obj1) // false, 같은 요소를 가졌지만 새로 생성된 객체이므로 서로 다른 객체입니다.

 

객체의 연결 

const obj = { a: 1, b: 2 }
const obj1 = { c: 3, d: 4 }
const obj2 = { ...obj, ...obj1 } // 두 객체를 펼쳐서 새로운 객체를 생성한다.

 

 객체의 property 수정, property 추가 

const obj = { a: 1, b: 2, c: 3 }
const obj1 = {
  ...obj,
  c: 100, // 기존의 property를 한 번더 정의해줌으로써 property를 수정할 수 있다.
  d: 200, // 새로운 property를 추가할 수 있다.
}
// 결과적으로 a:1, b:2, c:100, d:200

  

 

 

 

 

 

2. Rest

Rest Parameter는 함수에서 사용하는 것으로, 여러 개의 인자를 받을 때, 앞쪽에서 받은 인자를 제외한 나머지(rest) 인자들을 배열로 합쳐서 받을 수 있게 해줍니다.

 

const arr = ["a", "b", "c", "d"]
const [f, ...rest] = arr
console.log("first:" + f) // "a"
console.log("first rest:" + rest) // ["b", "c", "d"]
// 변수명은 f지만 a가 출력됩니다. f가 배열에서 맨 앞에 있기 때문입니다.
 
 
const arr2 ={a:1, b:2, c: 3}
const {c, ...rest2} = arr2 // [a:1, b:2]
console.log("rest2: " + rest2.c)
// 여기서 c는 undefined가 출력됩니다. c라는 키값을 지정해서 rest했기 때문입니다.

 

 

코드 확인 

https://codesandbox.io/s/admiring-darkness-3kmb4?file=/src/App.js

admiring-darkness-3kmb4 - CodeSandbox

 

사실 rest와 spreat를 헷갈릴 수 있는데

rest의 특징은 아래와 같습니다.

1) rest는 미리 선언되는 변수가 아닙니다.

2) rest는 대입 연산자의 좌항에 존재합니다.

3) IDE에서 마우스 포인터를 변수명에 놓아서 배열이라는 것을 확인합니다.

 

사실 Rest의 풀네임이 Rest Parameter이기 때문에 함수 인자가 아닌 곳에서 사용하면 헷갈림을 유발할 수 있습니다.

이때, spread는 펼치고, rest는 모은다, spread는 주는 쪽이고 rest는 받는 쪽이다, spread는 기존의 변수를 사용하고 rest는 새로운 변수를 만든다는 개념을 알고 있으면 됩니다.