[JavaScript] spread 와 rest

Spread

spread는 ES6부터 도입된 문법이다. ' ... '을 사용하여 작성하며 이 문법을 사용하여 객체나 배열을 다른 객체나 배열에 복사할 수 있다. 단어 뜻은 '퍼뜨리다' 인데 너무 추상적이므로 코드를 통해 알아보자. 

 

const damienMovies = ['LaLaLand', 'Whiplash'];
const myMovies = ['LaLaLand', 'Whiplash', 'MadMax', 'Inception'];

console.log(damienMovies);
console.log(myMovies);

 

위와 같이 damienMovies란 배열과 myMovies라는 배열을 선언하려고 할 때 라라랜드와 위플래쉬가 겹치는 것을 볼 수 있다. 이렇게 이전에 선언된 배열이나 객체의 값을 그대로 갖다 쓰면서 또 다른 값을 추가시켜 새로운 배열이나 객체를 만들 때에는 spread 문법을 사용하면 더 편하게 코드를 작성할 수 있다. spread를 사용하여 작성한 코드는 아래와 같다.

 

const damienMovies = ['LaLaLand', 'Whiplash'];
const myMovies = [...damienMovies, 'MadMax', 'Inception'];

console.log(damienMovies);
console.log(myMovies);
console.log(damienMovies);

 

이렇게 myMovies 배열을 선언할 때, 배열 내에서 ...damienMovies 와 같이 작성해주면 이 것은 damienMovies 배열의 값들을 가져다 쓴다는 의미이다. 여기서 핵심은 spread 문법을 통해 다른 배열을 선언해주어도 기존의 배열(damienMovies) 값에는 영향을 끼치지 않는다는 점이다. myMovies를 선언하기 전과 후의 damienMovies의 값을 출력한 결과를 보자. 

 

 

객체에서도 똑같이 spread 문법을 사용할 수 있다.

 

const actor = {
  name: 'Ryan Gosling'
};

const movie = {
  ...actor,
  title: 'LaLaLand'
};

console.log(actor);
console.log(movie);

 

 

이처럼 기존의 객체를 ' ...actor '와 같이 작성하고, 추가로 넣어줄 키와 값을 입력해준다. 그리고 아래와 같이 필요하면 spread 문법을 여러번 사용할 수도 있다.

 

const actor = {
  actor: 'Ryan Gosling'
};

const actress = {
  actress: 'Emma Stone'
};

const movie = {
  ...actor,
  ...actress,
  title: 'LaLaLand'
};

console.log(movie);

---

rest

rest는 spread와 같이 ' ... ' 을 통해 작성하지만 쓰임새가 완전히 다르다. 일단 rest의 단어 뜻을 살펴보면 "rest of my life" 와 같이 남은, 여분의 쯤으로 해석할 수 있다. 즉 spread가 기존의 배열을 그대로 복사시켜주었다면, rest는 기존 배열의 남겨진 부분을 가져온다고 생각하면 된다. 코드를 통해 살펴보자.

 

const movie = {
  title: 'LaLaLand',
  actor: 'Ryan Gosling',
  actress: 'Emma Stone',
  director: 'Damien Chazelle'
};

const { actress, ...rest } = movie;

console.log(actress);
console.log(rest);

 

 

비구조화 할당을 통해 actress와 actress를 제외한 movie 객체의 값으로 이루어진 rest를 추출한다. 근데 이렇게 비구조화 할당을 통해 rest 문법을 사용할 때는 rest 키워드가 가장 마지막 값이어야 한다. 안그러면 오류가 나기 때문에 주의한다.

 

const movies = ['LaLaLand', 'Whiplash', 'MadMax'];

const [ movie, ...rest ] = movies;

console.log(movie);
console.log(rest);

 

배열에서의 rest