모던 자바스크립트에는 더욱 좋은 문법이 많이 추가되었습니다.

rest, spread 문법과 destructuring도 그 중 하나입니다.

오늘은 이에 관련된 내용을 작성하겠습니다.

1. 파라미터와 아규먼트

저도 이 stack over flow 문서를 보기 전에는,
파라미터와 아규먼트를 명확히 구분하지 못했습니다.

아규먼트(argument)란 함수를 실행할 때 넣는 값입니다.

파라미터(parameter)란 함수에서 받을 수 있는 변수입니다.

function add(value1, value2) { // value1과 value2가 파라미터입니다.
  return value1 + value1
}

add(2, 3) // 2와 3이 아규먼트입니다

add(1, 2, 3, 4, 5) // 파라미터는 2개밖에 없지만 아규먼트는 2개를 초과할 수 있습니다.

2. 파라미터 기본값

ES6부턴 함수 파라미터에 기본값을 설정할 수 있습니다.

ES5

function add(x, y) {
  x = x || 0 // 매개변수 x에 인수를 할당하지 않은 경우, 기본값 0을 할당합니다.
  y = y || 0 // 매개변수 y에 인수를 할당하지 않은 경우, 기본값 0을 할당합니다.

  return x + y
}

console.log(add())     // 0
console.log(add(1, 2)) // 3

ES6

const add = (x = 0, y = 0) => {
  // 파라미터 x, y에 인수를 할당하지 않은 경우, 기본값 0을 할당합니다.
  return x + y
}

console.log(add())     // 0
console.log(add(1, 2)) // 3

3. arguments

아규먼트는 5개인데 파라미터는 2개일 경우 어떻게 해야할까요?

함수 내부에서 arguments를 사용할 수 있습니다.

arguments란 모든 아규먼트를 유사배열 형태로 참조하는 값입니다.

function f(value1, value2) {
  console.log(arguments)
}

f(2, 3) // { "0": 2, "1": 3 }

f('a', 'b', 'c', 'd', 'e') // { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e" }

4. rest 파라미터

하지만 ES6부터는 arguments를 사용하지 않습니다.

rest 파라미터라는 기능을 이용해서 나머지 아규먼트를 배열로 사용할 수 있습니다.

arguments와는 다르게 배열입니다.

const add = (a, b, ...rest) => { // 반드시 마지막 파라미터에 ...을 붙여서 사용해야 합니다.
  console.log(a)    // 5
  console.log(b)    // 3
  console.log(rest) // [ 9, 2, 1, 6 ]
}
add(5, 3, 9, 2, 1, 6)

const add2 = (one, two, ...args) => { // 파라미터 이름은 자유롭게 할 수 있습니다.
}

const add3 = (...allValues) => { // 아예 모든 파라미터를 ...으로 지정할 수도 있습니다.
  console.log(allValues) // [1, 2, 3, 4, 5]
}
add3(1, 2, 3, 4, 5)

5. spread 연산자

ES6에 추가된 spread 연산자 기능을 이용하면

배열, 문자열 등의 이터러블을 분해해서 개별요소로 만들 수 있습니다.

이터러블을 모른다면 지금 이해하지 않으셔도 됩니다.

간단하게 배열을 분해한다고 생각하시면 됩니다.

const arr = ['a', 'b', 'c']
console.log(arr) // ['a', 'b', 'c']
console.log(...arr) // 'a' 'b' 'c'

const arr2 = [1, 2, 3]
console.log([...arr, ...arr2]) // ['a', 'b', 'c', 1, 2, 3]
// 배열 합치기에 사용할 수 있습니다.

const copiedArr = [...arr]
console.log(copiedArr) // ['a', 'b', 'c']
// 배열 복사에도 사용할 수 있습니다.

6. 객체 spread 연산자

ES6을 넘어 ES9에는 객체 또한 spread 연산자 사용이 가능합니다.

const obj1 = {a: 1, b: 2}
const obj2 = {c: 3}
console.log({...obj1, ...obj2}) // {a: 1, b: 2, c: 3}
// 객체 합치기에 사용할 수 있습니다.

const copiedObj = {...obj1}
console.log(copiedObj) // {a: 1, b: 2}
// 객체 복사에 사용할 수 있습니다.

const obj3 = {...obj1, b: 'b'}
console.log(obj3) // {a: 1, b: 'b'}
// 기존 객체의 값을 수정해서 새로운 객체 만들기에 사용할 수 있습니다.

7. 배열 디스트럭처링

배열 디스트럭처링(array destructuring)은 배열의 값 추출을 더욱 쉽게 합니다.

한글로 구조분해라고도 합니다.

...과 함께 이용하면, 배열의 값을 좀 더 간편하게 할당할 수 있습니다.

const arr = [1, 2, 3]
const [one, two, three] = arr // 기본 destructuring

console.log(one)   // 1
console.log(two)   // 2
console.log(three) // 3

const arr2 = ['a', 'b', 'c', 'd', 'e', 'f']
const [a, b, c, ...rest] = arr2 // ...을 이용해서 나머지를 모두 배열 몰아넣습니다.

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

const arr3 = ['z', 'y', 'x']
const [x, y, z] = arr3 // 배열은 무조건 순서대로 할당됩니다.

console.log(x) // 'z'
console.log(y) // 'y'
console.log(z) // 'x'

8. 객체 디스트럭처링

객체 또한 디스트럭처링이 가능합니다.

배열 디스트럭처링과 다른점은 순서대로가 아닌 key에 따라 할당되고 값(value)만 추출한다는 것입니다.

const obj1 = {a: 1, b: 2, c: 3}
const {c, b, a} = obj1 // key의 값을 가져오므로 순서는 상관없습니다.

console.log(c) // 3
console.log(b) // 2
console.log(a) // 1

const obj2 = {aa: 1, bb: 2, cc: 3, dd: 4, ee: 5}
const {aa, bb, ...rest} = obj2 // ...을 이용해서 나머지를 모두 객체에 몰아넣습니다.

console.log(aa)     // 1
console.log(bb)     // 2
console.log(rest)   // {cc: 3, dd: 4, ee: 5}

전술한 문법을 사용한다면 더욱 가독성 좋고 간결하고 유지보수가 원활한 자바스크립트 코드를 작성할 수 있을거라고 생각합니다.