[JavaScript] 매개변수(parameter)와 전달인자(arguments)

매개변수(parameter)가 있는 함수 정의문

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 함수를 실행했다.

함수를 호출할 때 값을 전달할 수 없었던 것이다.

하지만 매게 변수가 있는 함수 정의문은 함수를 호출하고자 할 때 전달하려는 값을 인수로 넣어 전달할 수 있다.

매개변수의 키워드에는 let, var, const와 같은 예약어는 생략하여 입력한다.

 

매개변수는 함수호출문에 있는 인수가 순서대로 할당된다.

그렇기 때문에 매개변수와 인수의 개수가 같아야 오류가 발생하지 않는다.하지만, 만약 둘의 갯수를 다르게 사용하고 싶을 때는 어떻게 해야 할까?이때 매개변수에 초기값을 설정하면 값을 입력하지 않아도 그 부분은 초기값으로 설정되어 오류가 발생하지 않는다.

1. 매개변수와 인수의 개수가 같을 경우

//기본형
function 함수명(매개변수1, 매개변수2, 매개변수3){
     자바스크립트코드;
}
함수명(인수1, 인수2, 인수3);

매개변수 없이 함수를 만들 경우 아래와 같이 함수 안에 변수와 값을 입력해야 한다.
입력된 값은 그 안에서 고정된다.

      function addNum() {
        let num1 = 10;
        let num2 = 2;
        let sum = num1 + num2;
        document.write(sum, "<br/>");
      }
      addNum();

함수에 매개변수를 넣으면 함수를 호출할 때 입력하는 값으로 계산된다.
내가 원하는 값을 원할 때마다 사용할 수 있는 것이다.

      function addNum2(num3, num4) {
        let sum = num3 + num4;
        document.write(sum, "<br/>");
      }

      addNum2(50, 12); // 62
      addNum2(13, 1231); // 1244

2. 매개변수에 기본값을 할당할 경우

function 함수명(매개변수1 = 기본값, 매개변수2 = 기본값, 매개변수3 = 초기값){
      자바스크립트코드;
}
함수명(인수1, 인수2, 인수3);

아래의 예시에서는 매개변수의 기본값을 b와 c에만 넣어보았다.
함수 multiple은 a 곱하기 b 더하기 c의 기능을 가지고 있다.
이때 매개변수에 3만 입력했을 경우 순서대로 들어가기 때문에 인수 3은 매개변수 a한테 입력되게 된다.
b와 c는 기본값이 있기 때문에 그 값이 자동으로 들어가기 때문에 multiple의 결괏값은 3 곱하기 5 더하기 10이 된다.

      function multiple(a, b = 5, c = 10) {
        return a * b + c;
      }
      document.write(multiple(3));

---

※ 문제
: 아이디와 비밀번호를 사용자로부터 입력받아서 올바른지 확인하는 함수 만들기

//아이디와 비밀번호를 사용자로부터 입력받아서 입력받아서 올바른지 확인하는 함수
      const rightId = "abc";
      const rightPw = "1234";

      function login(id, pw) {
        if (id == rightId) {
          if (pw == rightPw) {
            document.write("환영합니다.");
          } else {
            document.write("틀린 비밀번호 입니다.");
          }
        } else {
          document.write("틀린 아이디 입니다.");
        }
      }
      let userId = prompt("아이디 입력");
      let userPw = prompt("비밀번호 입력");
      
      login(userId, userPw);

---

매개변수 없이 인수를 받아오는 전달인자(arguments)

만약 함수를 실행할 때마다 받아와야 하는 인수의 개수가 달라지거나,

혹은 인수가 너무 많은 경우 매개변수 없이 arguments 키워드를 이용하여 인수를 받아올 수 있다.

함수 정의문에서 arguments를 사용하면 arguments가 인수를 받아 배열로 데이터를 저장한다.

배열로 담긴 이 데이터는 함수 안에서 자유롭게 사용할 수 있다.

// 기본형
function 함수명(){
     arguments;
     자바스크립트 코드;
}
함수명(인수1, 인수2, 인수3...)

예시를 들어보겠다.
함수 sum에 arguments를 넣어 계산식 틀을 먼저 만들어 놓았다.
그리고 result1에 sum()의 인수값을 입력하는데 이때 10, 20, 30, 40으로 여러 개의 값을 넣어보았다.
이렇게 여러개의 값을 입력하였을 경우 sum 내부의 arguments는 배열로 값을 가지게 된다.
arguments = [10, 20, 30, 40] 이 되는 것이다.
즉, arguments[0] 은 10이 되고 arguments[1]은 20이 arguments[3]은 40이 된다.
sum()의 return 값은 10 + 20 + 40 이 되어 총 70이 result1로 들어가게 된다.

      function sum() {
        arguments;
        return arguments[0] + arguments[1] + arguments[3];
      }
      
      let result1 = sum(10, 20, 30, 40);
      document.write(result1, "<br/>");

만약에 더 많은 값을 더해야 할 경우에는 어떻게 해야 할까?
이럴 경우 함수에 반복문을 넣어 코드를 짜면 된다. 

      function sum2() {
        arguments;
        let result2 = 0;
        //arguments 배열 안에 있는 모든 데이터를 더하기(누산)
        for (let i = 0; i < arguments.length; i++) {
          result2 += arguments[i];
        }
        document.write(result2);
      }
      sum2(10, 20, 30, 40, 50, 60, 70, 80, 90, 100, "<br/>");

사용자에게 값을 받아 0부터 사용자에게 받은 값까지 모두 더해보는 계산식을 만들어보겠다.
먼저 사용자에게 값을 받아야 하기 때문에 userNumber에 prompt로 값을 받는다.

그리고 clacSum이라는 함수를 만들어 값을 모두 더하는 계산식을 만들어준다.
n이라는 매개변수를 통해 후에 userNumber를 n의 값으로 대체할 것이다.
0부터 모두 더하기 위해 반복문 for를 통해 계산식을 만들었고 맨 처음 더할 기본값이 필요하기 때문에 result3 = 0이라는 값을 지정해 놓았다.

마지막으로 조건문 if 로 사용자가 입력한 값이 빈값이 아니면 함수가 호출되게 하였는데,
함수 clacSum 안에 들어가는 내용이 현재 prompt로 받은 "문자" 이기 때문에 parseInt 메서드로 정수로 바꿔 입력한다.

      let userNumber = prompt("어디까지 더할까요?"); //사용자에게 값을 받는다.
      
      function clacSum(n) {
        let result3 = 0;
        for (let k = 1; k < n + 1; k++) {
          result3 += k;
        }
        document.write(result3);
      }
      
      if (userNumber !== null) {
        clacSum(parseInt(userNumber)); //clacSum 함수 호출
      }