Spread
JavaScript ES6에는 spread syntax가 있는데 이는 여러 객체와 배열을 병합하거나 원본 객체와 배열의 불변성을 지킬 때 사용할 수 있다. spread 문법은 선언된 변수(배열, 객체)앞에... 을 붙혀 사용한다.
아래 예시를 살펴보자면,
// 예시) 배열
const ex1 = [1, 2, 3]
const ex2 = [...ex1, 4, 5, 6]
console.log(ex2) // [1, 2, 3, 4, 5, 6]ex2 라는 배열 안에 …ex1 을 넣어주게 되면 배열 ex1 을 포함한 모든 요소들이 출력된다.
const ex1 = [1, 2, 3]
const ex2 = [4, 5,...ex1, 6]
console.log(ex2) // [4, 5, 1, 2, 3, 6]위의 경우처럼 위치와 상관없이 …ex1 을 넣는 곳에 배열이 spread된다.
객체의 경우에도 마찬가지로
const one = {
jan : 1,
feb : 2,
mar : 3,
}
const two = {
apr : 4,
may : 5
}
const three = {...one, ...two}
console.log(three) // {jan : 1,feb : 2, mar : 3, apr : 4, may : 5}객체의 경우에도 위치와 상관없이 스프레드 문법이 들어가는 곳에 맞춰 객체에 병합된다.
리액트를 예로 들면 state의 불변성을 지켜주기 위해 변화가 일어나야할 컴포넌트에서 spread 문법을 사용하여 원본을 복사한 뒤 새로운 배열, 객체를 만들어 사용한다.
rest syntax
spread 문법 처럼 ...을 붙혀 사용하는 것은 같지만 역할이 다르다. rest는 객체와 배열, 함수의 파라미터에서 사용된다. 또한 rest를 객체와 배열에서 사용할 때는 구조 분해 할당 문법과 함께 사용된다.
객체에서 rest문법을 사용할 때
const one = {
jan : 1,
feb : 2,
mar : 3,
}
// 구조분해할당
const { jan, ...rest } = one
console.log(jan) // 1
console.log(rest) // {feb : 2, mar: 3}위의 경우처럼 rest안엔 jan을 제외한 값들이 객체형태로 들어있게 된다.
rest문법이라고 해서 꼭 rest라는 이름으로 하지 않아도 되며 다른 이름도 가능하다.
배열에서 rest문법을 사용할 때
const ex1 = [1, 2, 3, 4, 5, 6]
const [jan, ...rest] = ex1
console.log(jan) // 1
console.log(rest) // [2, 3, 4, 5, 6]
const ex2 = [1, 2, 3, 4, 5, 6]
const [...rest, jun] = ex2
// -> 해당 경우로 작성할 경우 오류 발생. ex1의 방식처럼 첫 요소를 빼고 나머지 배열을 rest에 담을 수 있지만
ex2처럼 중간이나 마지막요소를 빼오려고할 때는 오류가 발생한다.
매개변수로 rest문법을 사용할 때
// 매개변수를 모두 더하는 sum 함수
// 매개변수의 갯수가 예측되지 않을때 rest문법을 이용하여 매개변수 값들을 받을 수 있다.
const sum = (...rest) => {
// 고차함수인 reduce를 이용
return rest.reduce((acc, current) => acc + current, 0);
}
const result = sum(7,8,9)
console.log(result) // 25위의 경우처럼 파라미터의 값들이 몇 개가 들어갈지 예측할 수 없을 때 rest문법을 사용할 수 있다.
참조