[자바스크립트]- ★매개변수 / 매개변수 없이 인수 값 받아오기 arguments

매개변수가 있는 함수 정의문

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

하지만 매개변수가 있는 함수 정의문은 함수를 호출하고자 할 때 전달하려는 값을 인수로 넣어 전달할 수 있다. 
이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있다. 
매개변수에 함수호출문에 있는 인수가 순서대로 할당된다.   

 

매개변수 = 파라미터 라고 하기도 한다. 

---

 [기본형]

1. 매개변수의 갯수와 인수의 갯수가 일치하는 경우

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

함수명(인수1, 인수2, 인수3..);

 

호출할때 인수를 넣어준다. 

인수가 매개변수자리에 차례대로 값이 대입된다.

 function addNum(num1, num2) {
        let sum = num1 + num2;
        console.log(sum);
      }

addNum(10, 40);

( let sum은 함수 안에서 선언되어 지역 변수기 때문에 만약 console.log를 함수 바깥에 쓰면 sum은 없다고 오류 표시가 뜰 것이다.)

---

2. 매개변수에 기본 값을 정의한 경우

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

 함수명(인수1, 인수2);

//매개변수에 기본값을 할당한 경우
function multiple(a, b = 5, c = 10) {
        return a * b + c;
}

let result1 = multiple(5, 10, 20); //매개변수도 변수라서 새로운 값이 들어가면 기존의 값은 사라진다.
console.log(result1); //70이 나온다.

let result2 = multiple(10, 20); //a,b는 값이 전달되고 c는 기본값이 적용
console.log(result2); //210이 나온다.

let result3 = multiple(30); //a만 값이 전달되고 b,c는 기본값이 적용
console.log(result3); //160이 나온다.

'let result1 = multiple(5,10,20)'에서 앞에서부터 해석하지말고 뒤에서부터 해석하자- multiple(5,10,20)이 변수  result1에 대입되는 것이다.

 

*매개변수도 변수라서 새로운 값이 들어가면 기존의 값은 사라지고 새로운 값으로 대체된다. 

기본값을 할당해놨더라도 함수호출할 때 새로운 값을 넣으면 그 새로운 값이 적용된다. 

 

*기본값을 정의할 경우 매개변수의 뒤부터 정의할 수 있다. 인수는 첫번째 순서부터 차례대로 적용되기 때문. 

---

예제1)

---

예제2)

 

  //아이디와 비밀번호를 사용자로부터 입력받아서 올바른지 확인하는 함수, 서버가 없기에 const에 정보를 담아놓음

      const rightId = "ezen";

      const rightPw = "1234";

      function login(id, pw) {

        //서버의 아이디와 일치하는지 여부

        if (id == rightId) {

          if (pw == rightPw) {

            document.write(id + "님 환영합니다.");

          } else {

            document.write("틀린 비밀번호입니다");

          }

        } else {

          //아이디가 일치하지 않는 경우

          document.write("틀린 아이디입니다");

        }

      }

      //사용자로부터 입력받은 아이디와 비밀번호

      let userId = prompt("아이디 입력");

      let userPw = prompt("비밀번호 입력");

      //login함수 실행, 사용자가 입력해준 아이디와 패스워드 전달

      login(userId, userPw);

 

사용자로부터 받은 아이디 비밀번호 정보가 userId, userPw에 있으니깐 함수 호출할 때 인수에 이 값을 넣어줘야한다. 

---

  매개변수 없이 인수값 받아오기  arguments

매개변수 없이 인수를 받아오는 함수

만약 함수를 실행할 때마다 받아와야하는 인수의 갯수가 달라지거나, 혹은 인수가 너무 많은 경우

매개변수 없이 
arguments 키워드를 이용하여 인수를 대신 받아올 수 있다. 
함수 정의문에서 argument를 사용하면 arguments가 인수를 받아 배열로 데이터를 저장한다.  
배열로 담긴 이 데이터는 함수 안에서 자유롭게 사용할 수 있다. 
    

[기본형]

function 함수명(){
    arguments;
    자바스크립트 코드;
}

함수명(인수1, 인수2, 인수3....);

 

arguments에는 배열로 [10,20,30,40]이 들어가있는 것. (배열이니깐 인덱스 번호를 부여받음)

sum 함수가 실행되면 retrun문에 의해서 반환된 값이 sum의 자리로 온다. 

 function sum() {
        arguments;
        return arguments[0] + arguments[1] + arguments[2];
      }

let result1 = sum(10, 20, 30, 40);
console.log(result1); //60이 나온다.

---

예제1) 모든 데이터 누산하기 

   //arguments 배열 안에 있는 모든 데이터를 더하기(누산)

      function sum2() {

        arguments;

 

        let result = 0;

        for (let i = 0; i < arguments.length; i++) {

          result += arguments[i];

        }

        console.log(result);

      }

      sum2(10, 20, 30, 40, 50, 60, 70, 80, 90, 100);

 

인덱스 번호는 0번부터 시작하니깐 let의 초깃값은 0이여야하고, 조건식은 0부터 시작하기때문에 arguments.legth보다 <=이 아닌 <여야 한다. (데이터의 총 갯수가 10개라고 할 때 인덱스 번호는 0번부터 9까지 있기 때문이다)

---

예제2)

   /*사용자로부터 숫자를 입력받아서 0부터 사용자가 입력한 숫자까지를 모두 더하는 누산기

      parseInt(문자형숫자) : 문자형 숫자를 정수로 바꿔주는 매서드*/

      let userNumber = prompt("숫자 몇까지 더할까요?");

      if (userNumber !== null) {

        //clacSum함수 실행. 인수로 전달할 값이 prompt로 받아온 문자형 숫자라서 parseInt를 이용해 숫자로 변환

        clacSum(parseInt(userNumber)); //함수는 호이스팅기능이 있어서 함수 선언 위에 호출되도 괜찮다.

      }

      function clacSum(n) {

        let sum5 = 0;

        for (let i = 1; i < n + 1; i++) {

          sum5 += i;

        }

        document.write(sum5);

      }