[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션 - 27강 spread, rest

spread

ES6부터 도입된 spread와 rest를 알아볼 것이다. 이 문법은 점 세개를 사용한다. “…”
먼저 spread는 객체 혹은 배열을 펼칠 수 있다. 아래와 같은 코드가 있다고 가정해보자.

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

const cuteSlime = {
  name : '슬라임',
  attribute : 'cute'
}

const purpleCuteSlime = {
  name : '슬라임',
  attribute : 'cute',
  color : 'purple'
}

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

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

const cuteSlime = {
  ...slime, //기존의 slime의 정보를 다 가져옴
  attribute : 'cute'
}

const purpleCuteSlime = {
  ...cuteSlime, //기존의  cuteSlime의 정보를 다 가져옴
  color : 'purple'
}

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

console.log(slime === cuteSlime); //false

기존 객체를 복사해서 새로운 객체를 만들어서 사용할때 쓴다. 기존의 객체의 내용은 바뀌지 않는다는게 특징이다. 만약에 spread로 불러오고나서 color를 다른 값으로 설정한다면 그냥 덮어써진다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];

console.log(animals); //['개', '고양이', '참새']
console.log(anotherAnimals); //['개', '고양이', '참새', '비둘기']

이런식으로 배열에 값을 더해서 추가할때도 사용한다. 또 여러번 사용할 수도 있다.

const numbers = [1, 2, 3, 4, 5];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers) //[1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

rest

rest함수는 객체, 배열, 함수의 파라미터에서 사용할 수 있다. spread와 같이 …을 사용하는데 용도가 좀 다르다.
아래는 객체에서의 rest 사용 예시이다.

const purpleCuteSlime = {
  name : '슬라임',
  attribute : 'cute',
  color : 'purple'
}

const {color, ...rest } = purpleCuteSlime; //rest 이름 바꿔줄 수 있음.
console.log(color);
console.log(rest); //color를 제외한 나머지를 모아오는 역할

const {attribute, ...restMore} = rest; //rest
console.log(restMore); 

spread가 객체나 배열에 추가하는 값이었다면(더하기), rest는 반대로 남은 것들을 의미한다(빼기).
배열에서의 예시를 보자.

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
console.log(one); // 0
console.log(two); // 1
console.log(rest); // 2,3,4,5,6

배열에서도 역시 앞값을 제외한 남은 값들을 불러온다.
배열에서의 rest는 맨 마지막에 와야한다. […rest, last]이런식으로 사용할 수는 없다.

함수 파라미터에서의 rest

function sum(a, b, c, d, e, f) {
  return a + b + c + d + e + f;
};
const num = sum(1, 2, 3, 4, 5, 6);
console.log(num); //21

이런 코드가 있다고 가정하자. 여기서 num안의 숫자 하나만 빠지더라도 NaN이 뜨면서 오류가 난다. num에서 어떤 배열의 숫자를 던지든지간에 sum을 구할 수 있는 코드를 쓰려면 위에 배운 rest와 reduce를 활용할 수 있다.

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
};
const num = sum(1, 2, 3, 4, 5);
console.log(num);

위와 같이 rest는 단독으로 쓰면 나머지 모두의 값을 가져오기때문에 저렇게 파라미터로 넣어줄 수 있다. 그리고 그 나머지 모두의 값을 reduce를 사용해서 acc(누적값), current(현재값), 0(초기값) 순서대로 넣어서 최종적으로 합쳐진 숫자를 리턴하도록 한다. 아주 깔끔하게 sum을 구하는 함수가 완성 되었다.

함수 인자에서의 spread

파라미터란? 함수에서 받아오는 값.
인자란? 함수를 사용할때 넣어주는 값.

function subtract(x, y){ //파라미터
  return x + y;
}
const result = subtract(1, 2); //인자

이런식으로 인자에 던져줘야 하는 값이 많거나, 유동적일 경우 spread를 쓸 수 있다.

function sum(...rest) {
  return rest.reduce((acc, value) => acc + value, 0);
}
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(sum(...numbers));

개인적인 생각으로는 spread와 rest를 구분짓는 이유가 뭔지 잘 모르겠는데.. 암튼 둘다 던져주는 그대로를 다 가져오는 거 같다. 그냥 앞에 뭘 더 써주면 그거 빼고 가져오고.. 이런식인거 같은데.. 일단 퀴즈를 풀러 가보자.

퀴즈!

…을 활용해서 max()만들기. 어떤 배열이든지 그 안에서 가장 큰 숫자를 반환하는 함수를 만들면 된다.

function max(...rest) {
  return rest.reduce((acc, current) => (acc < current ? current : acc), rest[0]);
}
const result = max(1, 2, 3, 4, 5, 6, 7, 10, 8, 9);
console.log(result);

삼항연산자를 쓰면 되는구낭.. if문으로 해보려고 이러쿵저러쿵 하다가 힌트 살짝 봤다. 아무튼 ES6는 참으로 편리하구나!

마치면서

오늘은 여기까지..
시청 영상 27강 7~10까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp