TIL 2020-10-24 (매개변수)

nyongho·2020년 10월 24일

TIL 매개변수

JavaScript

목록 보기

8/23

Level 2-2 매개변수

TIL List

매개변수

1) 매개변수와 전달인자

이번 시간에는 간단하게 매개변수의 개념에 배운 것을 설명하겠다.

우선 매개변수와 전달인자의 뜻에 대해 알고 넘어가자.

함수 선언에서 활용하기 위하여 사용하는 변수를 '매개변수'라고 부릅니다.
이름에서 드러나듯이 나중에 함수를 호출할 때 매개 역할을 하는 변수입니다.
함수를 호출할 때 사용하는 것을 '인자'라고 합니다.
즉, '전달인자'를 뜻합니다.

아래 코드를 봐보자.

function timeToGoHome (speed, distance) {
   let time = distance / speed;
   return time;
}
timeToGoHome (20, 100);

speed, distance 와 같이 함수 선언에서 활용하기 위하여 사용하는 변수를 매개변수(parameters) 라고 한다.

timeToGoHome (20, 100); 에서 20, 100 값은 함수를 호출할 때 사용하는 것이고 이를 전달인자(arguments) 라고 한다.

2) 전달인자의 길이가 유동적이라면?

1. Math.max, Math.min 함수

우리는 Math.max 와 Math.min 라는 함수를 통해 문제를 해결할 수 있다.

아래 코드를 봐보자.

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

Math.max 함수는 매개변수 중 가장 큰 값을 리턴한다.

Math.min 함수는 매개변수 중 가장 작은 값을 리턴한다.

2. Math.max 함수 구현하기

그렇다면 이번엔 위 두 함수가 작동하는 방식을 우리 손으로 직접 구현해보자.

function getMaxNum() {

}
getMaxNum(3,5,8); // 8
getMaxNum(3,5,8,10); // 10

우선 Math.max 먼저 구현해볼건데 만들기전에 먼저 어떤 조건이 있어야 할까?

어떤 값이 들어올지 모르므로 전달인자의 길이는 유동적이다.
전달인자 중 가장 큰 값을 리턴해야 한다.

전달인자로 3,5,8 이 들어온다면 8 을 리턴해야하고 3,5,8,10 이 들어온다면 10 을 리턴해야 한다.

이렇게 전달인자의 길이가 유동적이면 우리가 그전까지 해왔던 하드코딩 방식(값을 미리 정해두는 방식을 말한다) 으로는 해결할 수가 없다.

이럴때 사용하는 것이 Rest Parameter 이다.

우선 Rest Parameter 에 대해 알아보자.

Rest Parameter는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest Parameter를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.

출처: https://jeong-pro.tistory.com/117 [기본기를 쌓는 정아마추어 코딩블로그]

Rest Parameter 를 코드에 적용시켜 보자.

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

일단 매개변수로 어떤 값들이 오든 간에 "배열" 의 형태로 그대로 리턴해줄 수 있게 됐다.

이제 전달인자 중 가장 큰 값을 리턴해야 하는데 내가 그전부터 "배열"의 형태 라는걸 강조했다.

즉, 우리는 배열을 입력받았으므로 배열의 메소드를 가지고 이 문제를 해결해 나가야 한다는 뜻이다.

나는 여기서 reduce() 함수를 사용할 것이다.

reduce() 함수는 배열 원소들을 반복하면서 값들을 조합(함수로)해서 특정 값을 만든다. 배열이 아니라 특정 값으로 반환된다. (물론 배열로 만들수도 있다.)
보통 배열값들을 이용해서 하나의 결과를 낼 때 사용한다.

(Array.prototype.reduce() 함수 MDN 설명)

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

reduce 함수를 설명하려면 먼저 앞서 나간 개념을 배워야 하는데 이건 나중에 따로 블로깅 하겠다.

어쨋든 이러한 방법을 통해 Math.Max 함수를 우리 손으로 구현한 모습이다.

3. arguments 객체 이용하기

Rest Parameter 대신 또 다른 방법으로 arguments 라는 객체를 이용할 수 있다.

arguments 에 대해 간략하게 소개하자면 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미한다.

한 마디로 객체인데 마치 배열처럼 생긴 친구다.

역시 이해를 못하겠으니 아래 코드를 봐보자.

function getMaxNum() {
 console.log(arguments);
}

getMaxNum(3,5,8,10);

getMaxNum(3,5,8,10); 을 했을 때 arguments 객체에 아래와 같이 담기게 된다.

{0:3, 1:5, 2:8, 3:10}

0번째 인덱스는 3, 1번째 인덱스는 5 이런식으로 마치 배열의 형태와 유사하다.

사실 이 방법은 ES5 방식으로 이전까지는 이러한 방식으로 문제를 해결했었다. 우리는 그냥 더 편하고 최신 기술인 Rest Parameter 를 쓰자.

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

이것도 ES6 부터 도입된 기술이다.

예를 들어 우리가 인천공항에서 어느 항공에 도착하는지를 출력한다고 했을 때

인천공항을 기본값(Default)으로 넣어줄 수 있다.

코드로 짜면 아래와 같다.

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

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