Section 4. 자바스크립트 매개변수

자바스크립트에서는 오류를 일으키지 않고 무시가 된다. 예시를 보자.

function add(a, b) {
  return a + b;
}

console.log(
  add(1, 3), //4
  add(1, 3, 5), //4
  add(1, 3, 5, 7) //4
);

딱 범주까지만 계산이 되고 나머지는 무시가 되는 것을 볼 수 있다. 

 

매개변수의 기본값

function add(a = 2, b = 4) {
  console.log(`${a} + ${b}`);
  return a + b;
}

console.log(
  add(), //2+4 
  add(1), //1+4
  add(1, 3) //1+3
  //6 5 4
);

add라는 function에 매개변수를 예시와 같이 설정을 해서 넣어주면 그것이 기본값 즉, 함수를 호출할때 인자를 주지 않으면 설정된 기본값으로 매개변수를 셋팅하여 실행된다는 말이다. 그리고 매개변수를 호출할때 넣어주면 기본값을 덮어 쓰는 것을 볼 수 있다. 

 

arguments란?

• 함수내에서 사용가능한 지역 변수를 말한다. 
• 배열의 형태를 한 객체이다. (배열도 사실 객체임을 명심하자)
• 함수 호출 시 전달된 모든 인수들을 배열 형태로 가진다. 

function add(a, b) {
  console.log('1.', arguments); //[1, 3, 5, 7]
  console.log('2.', arguments[0]); //1
  console.log('3.', typeof arguments); //object
  return a + b;
}

console.log(
  '4.', add(1, 3, 5, 7) //4
);

arguments에는 우리가 함수를 실행했을때 인자로 넣어준 모든 것들이 배열의 형태로 들어간다. 

add 함수의 인자에 1, 3, 5, 7이 들어갔는데 arguments에는 [1, 3, 5, 7] 이런 형태로 들어 간다는 뜻이다. 

*화살표 함수에서는 arguments 사용이 불가하다는 점을 외우고 넘어가자.

 

또 다른 예시를 보자

function getAverage() {
  let result = 0;
  for (const num of arguments) {
    result += num;
  }
  return result / arguments.length;
}

console.log(
  getAverage(1, 4, 7), //4
  getAverage(24, 31, 52, 80) //46.75
);

이번엔 getAverage 함수에 매개변수가 없는 것을 볼 수 있다.

하지만 getAverage(1, 4, 7)을 하면 arguments 에는 [1, 4, 7] 이 저장되게 되고 이걸 이용하여 함수를 실행 할 수 있게 된다. 

num이라는 곳에 arguments에 담긴 1, 4, 7이 순서대로 돌면서 그 반환값이 result에 저장이 되고 그 값이 arguments의 길이 만큼 즉, 3만큼 나누어 져서 결국 평균값을 구할 수 있게 되는 것이다. 

 

나머지 변수 rest parameters 란?

• ...변수그룹명
• 특정 매개변수들 뒤에 정해지지 않은 수의 매개변수들을 받을 때 사용한다.
• 마지막 인자로만 사용 가능힌다.
• arguments와는 달리 실제 배열이다. 

console.log(
  '3.',
  classIntro(3, '김민지', '영희', '철수', '보라', '돌준') 
); //3. 3반의 선생님은 김민지, 학생들은 영희, 철수, 보라, 돌준입니다.
//호이스팅 되었다

function classIntro (classNo, teacher, ...children) {
  console.log('1.', children); // ['영희', '철수', '보라', '돌준']
  console.log('2.', arguments); //[3, '김민지', '영희', '철수', '보라', '돌준']

  let childrenStr = '';
  for (const child of children) {
    if (childrenStr) childrenStr += ', ';
    childrenStr += child;
  }
  return `${classNo}반의 선생님은 ${teacher}, `
    + `학생들은 ${childrenStr}입니다.`
}

몇개가 올지 모르는 인자들에 한해서 ...을 사용하여 함수의 마지막 인자로 넣어주는 것을 나머지 변수라 한다. 

예시를 보면 ...children 출력 결과와 arguments 결과가 다른 것을 볼 수 있다. 

for문을 보면 다른 것들은 설명이 딱히 필요가 없지만 if문만 살펴보면 처음 '영희' 가 childrenStr에 추가될때 저 if문이 없으면 '영희' 앞에 ,가 붙게 되어 출력문이 이상해지기 때문에 넣은 것이다. 

 

const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

function doMultiArms (x, y, ...arms) {
  let result = x;
  for (const arm of arms) {
    if (typeof arm !== 'function') continue;
    result = arm(result, y);
  }
  return result;
}

console.log(
  doMultiArms(8, 3, add, mul, 1, true), //33
  doMultiArms(8, 3, add, mul, sub), //30
  doMultiArms(8, 3, add, mul, sub, div), //10
  doMultiArms(8, 3, add, mul, sub, div, (x, y) => x ** y) //1000
);

첫번째 출력문을 보면 여기서도 마찬가지로 ...arms에는 add, mul, 1, true가 입력되어 실제로는 [add, mul, 1, true]가 된다. 

for문에서 arm에 [add, mul, 1, true]가 순서대로 실행되면서 그 결과가 반환되어 들어가게 된다. 다만 if문에서 arm이 함수가 아니면 걸러져서 result에 영항을 주지 않게 된다. 즉, 함수인 것만 계산되게끔 하는 함수인 것이다. 

 결과적으로 add, mul 인것들만 계산된다. add일때 11이 반환되어 result가 11이 되고 mul에서 11 * 3이 되어 33을 최종적으로 반환하게 된다.