Spread & Rest에 대해 알아보자

Spread

...target
iterator 타입의 변수를 풀어(unpacking) 준다

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

Spread를 통해 추가, 병합과 같은 작업을 쉽게 할 수 있다

const lowNumber = [1, 2, 3, 4];
const highNumber = [6, 7, 8, 9];
const fullNumber = [...lowNumber, 5, ...highNumber];
console.log(fullNumber); // 1 ~ 9

const newFullNumber = [...fullNumber, 10];
console.log(newFullNumber); // 1 ~ 10
// Spread를 이용하지 않았다면 [Array(9), 10]가 출력 되었을 것이다

그리고 오브젝트에도 사용 할 수 있다

const obj = { name: "jcy" };
const newObj = { ...obj, age: 28 };
console.log(newObj); // {name: "jcy", age: 28}

Rest

...target
Spread와 생김새는 같지만 역할은 정반대로 Spread는 변수의 값들을 풀어 확장시켜주었지만 Rest는 값들을 변수에 담아 축소시킨다

// 배열 비구조화
const arr = [1, 2, 3, 4];
const [one, ...rest] = arr; // 단, [...rest, one]와 같이 rest가 앞에 들어갈 순 없다 앞에 들어 갈 경우
// Rest element must be last element 에러!
console.log(one); // 1
console.group(rest); // [2, 3, 4]

// 오브젝트 비구조화
const obj = { name: "jcy", age: 28, male: true };
const { name, ...rest } = obj;
console.log(name); // jcy
console.log(rest); // { age: 28, male: true }

// 함수 파라메터
function func(...rest) {
  console.log(rest); // 1, 2, Array(2), "cd", 5]
}
func(1, 2, ["a", "b"], "cd", 5);

Spread & Rest & Destructuring

Spread & Rest & Destructuring는 같이 사용 되었을 때 다양한 작업을 효율적으로 할 수 있다

const obj = { name: "jcy", age: 28, male: true };

// 속성 추가
const addProperty = ({ like = "animal", ...rest }) => ({ like, ...rest });
console.log(addProperty(obj)); // {like: "animal", name: "jcy", age: 28, male: true}

// 속성 제거
const deleteProperty = ({ male, ...rest }) => rest;
console.log(deleteProperty(obj)); // {name: "jcy", age: 28}

// key 변경
const changeKey = ({ name: myName, ...rest }) => ({ myName, ...rest });
console.log(changeKey(obj)); // {myName: "jcy", age: 28, male: true}

끝! 🚀