[JavaScript][기초] Spread / Rest (...)

 

1. Spread는 객체나 배열에 저장 된 값을 개별적으로 만들기 위함(Spread : 흩뿌리다, 펼치다.)

// 1. Spread 연산자
// -> Spread : 흩뿌리다. 펼치다
// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할

// 배열 spread
let arr1 = [1, 2, 3];
// 4, 1, 2, 3, 5, 6 를 만들고 싶을 때
let arr2 = [4, ...arr1, 5, 6];
console.log(arr2); // [4, 1, 2, 3, 5, 6]

// 객체 spread
let obj1 = {
  a: 1,
  b: 2,
};
let obj2 = {
  ...obj1, // obj1의 속성을 그대로 사용할 수 있다.
  c: 3,
  d: 4,
};

console.log(obj2); // {a: 1, b: 2, c: 3, d: 4}

// 함수 spread
function funcA(p1, p2, p3) {
  console.log(p1, p2, p3);
}

function funcB(arr) {
  console.log(arr);
  console.log(arr[0]);
  console.log(arr[1]);
  console.log(arr[2]);
}

funcA(...arr1); // 1 2 3
funcB(arr1);
// [1, 2, 3]
// 1
// 2
// 3

 

 

2. Rest는 배열, 객체, 함수에서 사용할 수 있으며 각각 용도가 다르다.

// 2.1 함수 파라미터의 Rest
// -> 여러개의 매개변수를 배열 형태로 한 번에 받을 수 있게 함
function funcC(...rest /* 여기서 ...은 spread가 아니라 Rest매개변수 임 */) {
  console.log(rest);
}

function funcD(one, two, ...rest /* one, two 할당 후 나머지를 rest에 할 당 */) {
  console.log(one);
  console.log(two);
  console.log(rest);
}

funcC(...arr1); // [1, 2, 3]
funcC(1, 2, ...arr1); // [1, 2, 1, 2, 3]

funcD(...arr1);
// 1
// 2
// [3]

// 2.2 객체에서의 Rest
// => 특정 속성을 뽑아내고 나머지(Rest)만 남기고 싶을 때
const person = {
  name: "DY",
  job: "Develo[er",
  age: 99,
  hobby: "Reading",
};

const { hobby, ...rest } = person;
console.log(hobby); // Reading
console.log(rest); // {name: 'DY', job: 'Develo[er', age: 99}

// 2.3 배열에서의 Rest
// => 배열의 특정 값을 뽑아내고 나머지(Rest)만 남기고 싶을 때
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, two, ...arrRest] = numbers;
console.log(one, two); // 0 1
console.log(arrRest); // [2, 3, 4, 5, 6]