[Javascript] spread 연산자 / ...rest

https://learnjs.vlpt.us/useful/07-spread-and-rest.html

07. spread 와 rest 문법 · GitBook

 

spread 연산자

-

기존의 것을 건들이지 않고 새로운 객체, 배열을 만드는 방법

 

 

...객체

const slime = {
	name:'슬라임'
}

const cuteSlime = {
	...slime,
    attribute:'cute'
};

console.log(cuteSlime) // { name:'슬라임' , attribute:'cute' }

 

...배열

const animal = ['개','고양이']
const anotherAnimal = [...animal , '참새']

console.log(anotherAnimal) // ['개','고양이','참새']

 

 

 

 

rest

spread 연산자 안에서의 나머지.

객체, 배열, 함수의 파라미터에서 사용이 가능

 

객체 예시

const korean = {
	first : '가',
        second : '나',
        third : '다'
};

const { first, ...rest } = korean;

console.log(first); // 가
console.log(rest); // { second:'나' , third:'다' }

 

const { first, ...rest } = korean;

여기서 rest에는 first를 제외한 나머지 값들이 들어있다.

이때 꼭 rest의 이름이 rest일 필요는 없다. 어떤 이름이든지 사용할 수 있다.  ex ) const { first, ...gin } = korean;

또한, rest를 쓰려면 저렇게 비구조 할당문과 함께 쓰인다.

 

 

 

 

배열 예시

const numbers = [0,1,2,3,4,5]

const [zero,...rest] = numbers;

console.log(zero); // 0
console.log(rest); // [1,2,3,4,5]

요런 식으로 배열 비구조화 할당을 이용해서, 원하는 값을 제외하고 나머지 값을 rest에 넣었다.

 

주의할 점은 순서를 반대로 하는건 안된다

(X)

const numbers = [0,1,2,3,4,5]
const [...rest,last] = numbers; //오류남

 

 

 

-------

함수에서 사용하는 spread / rest

spread - rest 문법을 함수에서 사용할 때 주의할 점

: 파라미터와 인자의 구분이 필요하다!

 

함수에서 기본적으로 받는 값은 parameter이고, 넣는 값은 인자이다.

예를 들면

const myFunction(a) { // 여기서 a 는 파라미터
  console.log(a); // 여기서 a 는 인자
}

myFunction('hello world'); // 여기서 'hello world' 는 인자

이렇게 된다.

 

파라미터는 rest로만 사용이 가능하고, spread는 인자로 사용.

예를 들면

function sum(...rest) { // 파라미터를 받을 때는 rest
  return rest.reduce((acc, current) => acc + current, 0); // 이부분을 자세히 몰라도 중요한건 아님
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers); //인자를 넣어줄 때는 spread

console.log(result);