TIL | 자바스크립트 rest, spread 문법, 비구조화 할당

Parameter, Argument

• Argument: 함수를 실행할 때 넣는 값
• parameter: 함수에서 받을 수 있는 변수

// value1과 value2가 parameter
function add(value1, value2) {
  return value1 + value 2
}

add(2, 3) // 2와 3이 argument

add(1, 2, 3, 4, 5) // parameter는 2개 밖에 없지만, argument는 2개를 초과할 수 있다.

파라미터 기본값

ES6부터 함수 parameter에 기본값을 설정할 수 있다.

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) => {
  // parameter x, y에 인수를 할당하지 않은 경우, 기본값 0을 할당한다.
  return x + y
}

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

arguments

argument는 5개인데 parameter는 2개일 경우 어떻게 해야할까?
이런 경우에는 함수 내부에서arguments를 사용하면 된다.
arguments란 모든 argument를 유사배열 형태로 참조하는 값이다.

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

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

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

rest parameter

ES6부터는 arguments를 사용하지 않는다.
rest parameter라는 기능을 이용해서 나머지 argument를 배열로 사용할 수 있다.
arguments와는 다르게 배열이다.

// 반드시 마지막 parameter에 ...을 붙여서 사용해야 한다.
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)

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']
// 배열 복사에도 사용할 수 있다.

Object spread 연산자

ES6 이후에 ES9에는 Object 또한 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'}
// 기존 객체의 값을 수정해서 새로운 객체 만들기에 사용할 수 있다.

Array 비구조화 할당

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'

Object 비구조화 할당

Object 또한 비구조화 할당이 가능하다.

Array 비구조화 할당과 다른점은 순서대로가 아닌 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}