[TIL 14] Spread/Rest

yezo cha·2021년 5월 31일

JavaScript Spread arguments js rest parameter 유사배열

JavaScript

목록 보기

7/19

Spread/Rest 문법

Spread

이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다.
spread - 펼치다, 퍼뜨리다

***** 1 *****
const slime = {
  name: '슬라임'
};

const twinkleSlime = {
  name: '슬라임',
  attribute: 'twinkle'
};

const blueTwinkleSlime = {
  name: '슬라임',
  attribute: 'twinkle',
  color: 'blue'
};

console.log(slime);		// {name: "슬라임"}
console.log(twinkleSlime);	// {name: "슬라임", attribute: "twinkle"}
console.log(blueTwinkleSlime);	// {name: "슬라임", attribute: "twinkle", color: "blue"}

***** 2 *****
const slime = {
  name: '슬라임'
};

const twinkleSlime = {
  ...slime,
  attribute: 'twinkle'
};

const blueTwinkleSlime = {
  ...twinkleSlime,
  color: 'blue'
};

1 코드를 spread문법을 사용하여 2처럼 작성했다.
여기서 사용한 ...문자가 바로 spread 연산자이다.

const fruits = ['apple', 'orange', 'grape'];
const anotherFruits = [...fruits, 'melon'];

console.log(fruits);		// ["apple", "orange", "grape"]
console.log(anotherFruits);	// ["apple", "orange", "grape", "melon"]

const arr = [1, 2, 3, 4, 5];
const spreadArr = [...arr, 22, ...arr];
console.log(spreadArr);		// [1, 2, 3, 4, 5, 22, 1, 2, 3, 4, 5]

배열에서 spread 연산자를 적용했다.
여러 번 사용할 수도 있다.

Rest

함수를 호출할 때 spread 연산자로 파라미터를 작성한 형태를 Rest parameter라고 한다.
Rest parameter는 배열이므로 Array 오브젝트의 메서드를 사용할 수 있다.
파라미터를 배열의 형태로 받아서 사용한다.
객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.
파라미터 개수가 가변적일 때 유용하다.
spread가 확장이라면, rest는 압축의 느낌이 있다.

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

const spreadNums = [...numbers, "반복", ...numbers];
console.log(spreadNums);	// [1, 2, 3, 4, 5, '반복', 1, 2, 3, 4, 5]
const [first, second, ...restNums] = numbers;
console.log(restNums);		// [3, 4, 5]