20210402#(26)JavaScript (매개변수)

#나머지 매개변수

 

매개변수로 배열을 받은 예시를 살펴보자

 

fuc([1,22,333,444])

fuc([1,22,333,444,5555,666)]

 

소괄호와 대괄호가 같이 있어서 보기 불편하다.

 

만약 위 예시같이 여러 개의 숫자를 매개변수로 실행하고 싶다면 어떻게 해야 할까?

그리고 매개변수가 1개일 때도 있고 10개일 때도 있고 그 이상이 될 수도 있는데, 일일이 다 쳐야 할까?

 

매개변수의 개수가 10개가 될 수도 있고, 5개도 될 수도 있듯이 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다. 

JS에서 가변 매개변수를 나타낼 때에는 나머지 매개변수라는 문법을 사용한다. 사용법은 다음과 같다.

 

function 함수 이름(... 나머지 매개변수) {}

 

위와 같이, 함수의 매개변수 앞에... (마침표)를 입력하면 매개변수들이 배열로 들어오게 된다.

 

function sample(...items){

console.log(items)

}

 

sample(1,2)

sample(1,2,3)

sample(1,2,3,4)

 

위 사진에 나오는 결과에서 볼 수 있듯이, sample(1,2) , sample(1,2,3) 그리고 sample(1,2,3,4)로 호출했던 매개변수가 배열의 형태로 들어온다는 걸 확인할 수 있다.

 

-나머지 매개변수를 이용한 최솟값 찾기

 

#2 나머지 매개변수 + 일반 매개변수

 

나머지 매개변수는 일반 매개변수와 같이 조합해서 사용 가능하다.

 

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수){}

 

함수를 호출할 때 매개변수 a, b가 먼저 들어가고, 남은 것들은 c에 배열 형태로 들어가는 걸 확인할 수 있다.

 

-min(배열), min(숫자, 숫자,...) 형태로 베개 변수를 넣으면 최솟값을 찾아주는 함수를 만들어보자.

 

이를 구현하기 위해서는 매개변수로 들어온 자료형이 배열인지 숫자인지 구분이 돼야 한다. 숫자 자료형은 typeof 연산자를 이용하면 된다. 배열에 typeof를 사용하면 object라는 결과가 나오기 때문에 확인이 가능하지만, 정확하게 배열인지 확인하기 위해서 Array.isArray() 메서드를 활용할 것이다. 

 

#3 전개 연산자

 

이전에 본 min() 함수는 매개변수로 배열을 넣는 경우와 숫자를 넣는 경우 모두 대응할 수 있었다. 

하지만 다음과 같이 매개변수로 배열을 입력할 수 없고 숫자를 입력해야 하는 함수가 있다고 해보자.

 

min(11,23,333,12)

min(11,23,333,12,534,123)

 

이때 배열 자료형으로 읽었다면 위와 같은 형태의 min() 함수를 어떻게 호출할 수 있을까?

 

const array = [1,2,3,4]

 

일반적으론 다음과 같이 배열 요소를 하나하나 입력하는 방법이 있다.

 

min(array [0], array [1], array [2], array [3]]

 

이런 상황을 위해 JS는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공한다.

 

함수 이름(... 배열)

 

-전개 연산자를 사용해 매개변수를 전달하고, 전달받은 매개변수를 단순하게 나머지 매개변수로 출력하는 예제

전개 연산자를 사용하지 않은 경우엔 배열이 매개변수로 들어오고, 전개 연산자를 사용한 경우엔 숫자가 하나하나 전개되어 매개변수로 들어오는 걸 확인할 수 있다.

 

#4 기본 매개변수

 

함수의 매개변수로 항상 비슷한 값을 입력하는 경우가 있다 이러한 경우엔 매개변수에 기본값을 지정하는 기본 매개변수를 사용하면 된다. 

 

함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

 

매개변수로 시급과 시간을 입력받아 급여를 계산하는 함수를 만들어보자. 

*

\함수이름\ earnings

\매개변수\ name, wage, hours

\함수역할\ 이름, 시급, 시간을 출력하고, 최종 급여 출력

*

 

 

Rmx