[ Javascript ] Spread, Rest 문법

• Spread와 Rest 문법 모두 ...처럼 생김새는 같으나 용도와 동작 방식이 다르다.

1. Spread 문법(...)

• 펼친다는 의미이며, 배열 또는 객체를 개별 요소로 분해해서 사용한다.
• iterable 객체에서 사용할 수 있기에 배열, 객체, Map, Set 또한 확장해서 사용이 가능하다.

// 배열에서 사용
const arr = ["a", "b", "c", "d"]
const arr2 = [...arr] // 배열의 얕은 복사.
const arr3 = [...arr, "e"] // 요소 추가.

// 객체에서 사용
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };  // { a: 1, b: 2, c: 3 }

// 함수 호출에 사용
function sum(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];
sum(...nums); // 6

2. Rest 문법(...)

• 나머지를 모은다는 의미로 함수의 인자나 객체/배열 구조 분해 시 남은 요소들을 하나의 변수로 수집한다.

// 배열 구조 분해에서 사용
const [first, ...rest] = [10, 20, 30, 40];
// first: 10
// rest: [20, 30, 40]

// 객체 구조 분해에서 사용
const { a, ...rest } = { a: 1, b: 2, c: 3 };
// a: 1
// rest: { b: 2, c: 3 }

function foo(a, ...rest) {
  console.log(rest) // ["a","b","c"]
}
foo("a", "b", "c", "d")

const obj = { a: 1, b: 2, c: 3 }
const { c, ...obj2 } = obj
console.log(c, obj2) // 3 {a: 1, b: 2}

• 조금 헷갈리긴 한데, 변수 할당 코드 줄이 있을 때 왼쪽에 ...이라면 Rest, 오른쪽이라면 펼치는 형태기 때문에 Spread라고 보면 괜찮지 않을까 싶다...? 의도가 더 중요해보이긴 한다.