[JavaScript] - 매개변수(Parameters)

NOWANDHERE·2020년 10월 12일

JavaScript

목록 보기

10/12

매개변수(Parameters)

🌻 매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(arguement)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다.

Achievement Goals

Parameter의 갯수가 유동적인 함수를 만들 수 있다.
ES6에서 사용하는 Rest parameter 및 ES5의 방법인 arguments 키워드를 이용할 수 있다.
Default parameter를 사용할 수 있다.

예시

                      -> 매개변수(parameters)를 통해 전달받은 인자를 사용할 수 있다.
function timeToGoHome(speed, distance) {
  let time = distance / speed;
  return time;
}

timeToGoHome(20, 100);
             -> 전달인자(arguments)와 함께 함수에 전달한다.

만일, 전달인자의 길이가 유동적이라면?

Math.max(3, 5, 8, 10);             // 10
Math.max(3, 5, 8, 10, 20);         // 20
Math.min(3, 5, 8, 10, 100, 1000);  // 3

보통 optional한 parameter는 대괄호로 표시한다.

▶︎ Math.max와 같은 기능을 하는 getMaxNum([값1[, 값2[, ...]]]) 함수를 만들어보자. parameter를 어떻게 지정해주어야 할까?

1. [ES6] ... : Rest Parameter

function getMaxNum(...nums) {
  console.log(nums); // [3, 5, 8, 10]
}

getMaxNum(3, 5, 8, 10);

function getMaxNum(...nums) {
  return nums.reduce(function(acc, current) {
    if (acc > current) {
      return acc;
    } else {
      return current;
    }
  });
}
getMaxNum(3, 5, 8, 10); // 10

ES6 : Rest Parameter를 이용해 매개변수를 지정해준다. 매개변수가 배열의 형태로 전달된다.

2. [ES5] arguments 라는 키워드를 이용할 수도 있다.

function getMaxNum() {
  console.log(arguments); // {0:3, 1:5, 2:8, 3:10}
}                           

getMaxNum(3, 5, 8, 10);

다만, 이 arguments 객체는 배열 같아 보이지만, 배열이 아니다. 이를 유사 배열이라고 부른다.

매개변수에 기본값을 넣어주고 싶은 경우

function getRoute(destination, departure = 'ICN') {
  return '출발지: ' + departure + ','
       + '도착지: ' + destination;
}

getRoute('PEK'); // "출발지: ICN, 도착지: PEK"

ES6 : Default Parameter를 할당해줄 수 있다. 문자열/숫자/객체 등 어떠한 타입도 가능하다.

function getRoute(departure = 'ICN', destination) {
  return '출발지: ' + departure + ','
       + '도착지: ' + destination;
}

getRoute(undefined, 'PEK'); // "출발지: ICN, 도착지: PEK"