매개변수 패턴

매개변수 (function paremeter)

JavaScript에서, 함수의 매개변수는 undefined가 기본이다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있다. 이때가 바로 기본값 매개변수가 필요할 때이다.

multiply호출시 b에 할당된 값이 없다면, b 값은 a*b를 평가할 때 undefined일 거고 multiply 호출은 NaN이 반환된다.

function multiply(a, b) {
  return a * b
}

multiply(5, 2)  // 10
multiply(5)     // NaN

매개변수 b에 기본값 1을 넣어준다. 함수가 호출 될때에 b값이 할당 되지 않아도 기본값으로 함수 값을 산출 한다.

function multiply(a, b = 1) {
  return a*b
}

multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

'…'로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"]

alert(name1) // Julius
alert(name2) // Caesar

// `rest`는 배열입니다.
alert(rest[0]) // Consul
alert(rest[1]) // of the Roman Republic
alert(rest.length) // 2

rest는 나머지 배열 요소들이 저장된 새로운 배열이 된다. rest 대신에 다른 이름을 사용해도 되는데, 변수 앞의 점 3개(...)와 변수가 가장 마지막에 위치해야 한다는 점은 지켜주어야 한다.

나머지 매개변수

함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다.

function sum(a, b) {
  return a + b
}

alert( sum(1, 2, 3, 4, 5) )

함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 ‘여분의’ 인수를 전달했지만, 에러가 발생하지 않았습니다. 다만 반환 값은 처음 두 개의 인수만을 사용해 계산됩니다.

이렇게 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ...뒤에 붙여주면 함수 선언부에 포함시킬 수 있습니다. 이때 마침표 세 개 ...는 "남아있는 매개변수들을 한데 모아 배열에 집어넣어라."는 것을 의미합니다.

function sumAll(...args) { // args는 배열의 이름입니다.
  let sum = 0

  for (let arg of args) sum += arg

  return sum
}

alert( sumAll(1) ) // 1
alert( sumAll(1, 2) ) // 3
alert( sumAll(1, 2, 3) ) // 6

나머지 매개변수는 항상 마지막에 있어야 합니다.
나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 아래 예시에선 에러가 발생합니다.

function f(arg1, ...rest, arg2) { // ...rest 후에 arg2가 있으면 안 됩니다.
  // 에러
}

전개 연산자 (Spread operator)

전개 연산자는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 사용법은 객체나 배열을 담은 변수 앞에 ...을 붙이면 된다.

// obj 객체를 newObj 객체에 복제
var obj = {
  a: 10,
  b: 20
};
var newObj = {...obj}
console.log(newOjb) // {a: 10, b: 20}

...obj는 obj의 배열 요소나 객체를 나열 해준다.

// arr 배열을 newArr 배열에 복제
var arr = [1,2,3]
var newArr = [...arr]
console.log(newArr) // [1, 2, 3]

위 코드들은 모두 스프레드 오퍼레이터를 이용하여 특정 객체, 배열의 값을 각각 새로운 객체와 배열에 복제하는 코드이다.

배열 병합할 때에도 쓰인다.

let leftArr = [1, 2, 3, 4, 5]
let rightArr = [6, 7, 8, 9, 10]
let mergeArr = [...leftArr, ...rightArr]
console.log(mergeArr)

rightArr 배열 중간에 leftArr을 병합 할 수도 있다.

let leftArr = [1, 2, 3, 4, 5];
let rightArr = [6, 7, ...leftArr, 8, 9, 10]; // 중간에 전개 연산자를 이용한 배열 삽입
console.log(rightArr);

argument 객체

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체이다.

"Array 형태"란 arguments 객체는 배열과 비슷할 뿐, 실제로 Array 객체는 아니다.
숫자로 된 인덱스와 length 프로퍼티만을 가지고 있을 뿐, 모든 것을 배열처럼 다룰 수는 없다.

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다. 첫 번째 인수는 arguments[0]에 저장되며, 다음 인수는 arguments[1]에 저장된다. 또한, 인수의 총 개수는 arguments 객체의 length 프로퍼티에 저장된다.