[Javascript] spread와 rest 문법 사용하기 (feat. ...문법)

spread와 rest는 서로 생김새는 비슷하게 생겼지만 다르게 사용된다.

 

spread

spread 문법은 새로운 객체 혹은 배열에 이전에 만들어 놓은 공통 부분을 추가하려고 할때 많이 사용한다.

예를 들어서 다음과 같은 객체들이 있다고 가정해봅시다.

 

const countryA = { name1: '한국' }; 
const countryB = { name1: '한국', name2: '일본' }; 
const countryC = { name1: '한국', name2: '일본', name3: '중국'};

이 코드에는 countryA라는 객체를 선언하고 나머지 객체는 기존에 선언한 것을 추가로 선언한 것이다.

즉 기존의 것은 수정하지 않고 새로운 객체를 만드는데 이전의 만들어진 객체와 똑같은 내용이 들어가 있다는 것이 핵심이다. 이 때 사용하는 것이 spread이다.

 

spread 문법(...)을 사용하면 다음과 같이 작성 할 수 있습니다.

const countryA = { name1: '한국' }; 
const countryB = { ...countryA, name2: '일본' }; 
const countryC = { ...countryB, name3: '중국'};

배열에서도 똑같이 사용할 수 있다.

 

const department = ['공대', '인문대']; 
const additionalDept = [...department, '음대'];

---

rest

rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.

 

객체에서의 rest

const countryC = { name1: '한국', name2: '일본', name3: '중국' }; 
const { name1, ...rest } = countryC;

console.log(rest);

출력 : 
{name2: '일본', name3: '중국' }

rest 변수 안에는 name1 값을 제외한 객체가 변수에 할당되어있다.

 

 

배열에서의 rest

배열도 객체와 같이 사용가능하다.

const num = [ 1, 2, 3, 4 ]; 
const [first, ...rest] = num; 

console.log(first); 
console.log(rest);

출력 :
1
[2, 3, 4]

 

함수 파라미터에서의 rest

rest 를 함수 parameter에서 사용 할 수도 있다. 현재 함수의 parameter로 받은 것을 console에 나타내려고 한다. g값을 넣지 않아서 

function test(...days) 
{ days.map((day) => console.log(day)); }


days = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', Sun]
test(...days)