Javascript rest 파라미터, spread 연산자, destructuring

... 는 rest parameter와 spread 연산자로 사용될 수 있다.

🤔 parameter

함수에서 받을 수 있는 변수

const add = function (num1, num2) => num1 + num2
# num1, num2

🤔 Arguments

함수를 실행할 때 넣는 값

add(3, 8) 
# 3과 8

합치기

💡 rest parameter

마지막 parameter에 ...(rest parameter)를 붙여서 Arguments를 분리한 후 필요한 부분을 함께 사용할 수 있다.

const addPeople = (first, ...developers) => { 
  const FIRST = first    // 'kim'
  const DEVELPOERS = developers 
  // [ 'lee', 'ko', 'um', 'choi']
}
addPeople('kim', 'lee', 'ko', 'um', 'choi')

펼쳐 놓기

💡 spread operator

이터러블요소 앞에 ... 를 붙여 개별요소로 만들 수 있다.

const array = [1, 2, 3]
console.log(array) // [1, 2, 3]
console.log(...array) // 1 2 3

❗️ 불변성으로 인한 문제 방지용 객체 및 배열 복사

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

❕ concat 대신 사용

const arr1 = [1, 2, 3]
const arr2 = ['a', 'b', 'c']
console.log([...arr1, ...arr2]) 
// [1, 2, 3, 'a', 'b', 'c']

구조 분해 할당 - 분리 / 추출하기

💡 destructuring

배열, 객체 등을 필요한 부분만 분해하여 추출할 수 있다
❗️ 배열은 순서대로, 객체는 순서가 중요하지 않다.

❕모든 요소 분해

const numbers = [1, 2, 3]
const [first, second, third] = numbers

const obj = {a: 1, b: 2, c: 3}
const {c, b, a} = obj // 3 2 1 

❕필요 요소 분해

const chars = ['a', 'b', 'c', 'd', 'e', 'f']
const [a, b, c, ...rest] = chars
console.log(rest) // ['d', 'e', 'f']


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