[JavaScript] Arguments 와 나머지 매개변수에 차이에 대해 알아보자

자바스크립트는 매우 유연한 언어이다.

 

예시를 들어서 코드를 하나 봐보자.

 

  <script>
    function func1(x) {
      console.log(x);
    }
    func1(1, 2, 3, 4, 5);
  </script>

👉 위 코드에서 콘솔로 찍히는 값은 1 이다.

 

🤓 이때 함수의 인수는 1개인데 호출할 때 넣은 인자의 수는 5개이다.

      원래라면 에러가 발생했을 것이다. 인자 수에 맞게 해야하기 때문이다.

 

      하지만 자바스크립트는 다르다 . 

 

      인수 보다 더 많은 수를 전달하여도 에러가 발생하지않고 인수의 개수 만큼 할당 된 다음

      나머지는 무시 된다.

---

🤔 그렇다면 무시되는 나머지 값은 어디로 가는 것일까?

나머지 값은 두 가지 방식을 통해 값을 가져올 수 있다.

 

1️⃣ Arguments 

Arguments란 함수로 전달 되는 모든 인수들을 배열 형태로 나타낸 것으로 초과되는 인자 까지도 모두 저장된다.

Arguments[인덱스] 를 통하여 값을 꺼내오는 것이 가능하다.

 

function func1(x){
	      for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
      }
}
func1(1, 2, 4, 5, 4);

👉 인자로 넣은 5개의 값이 모두 출력 된다.

 

 

 

 

2️⃣ 나머지 매개변수

함수에 정해지지 않은 수의 인자를 전달 받게 될 경우 나머지 인자들을 배열로 저장해준다.

Arguments와 마찬가지로 인덱스를 통해 값을 가져온다.

 

    function func1(...rest) {
      for (let i = 0; i < rest.length; i++) {
        console.log(rest[i]);
      }
    }
    func1(1, 2, 4, 5, 4);

 👉 인수가 0개인 함수에서 나머지 매개변수를 통해 전달 받은 5개 인자 모두 출력

 

 

---

🤔 Arguments와 나머지 매개변수의 차이점이 무엇일까?

 

둘 다 전달 받은 인자를 배열 형태로 저장해두고 인덱스를 통하여 꺼낼 수 있다는 점은 동일하다.

 

그러나 이 둘의 차이점은 

 

Arguments는 전달 받은 모든 인자를 배열에 저장하고

나머지 매개변수는 초과 되는 인자만을 배열에 저장한다.

 

예시를 들어보자

 

인수를 1개만 받고 나머지는 나머지 연산자로 받게 하였다.

   function func1(x, ...rest) {
      for (let i = 0; i < arguments.length; i++) {
        console.log(`arguments : ${arguments[i]}`);
      }
      for (let i = 0; i < rest.length; i++) {
        console.log(`나머지 : ${rest[i]}`);
      }
    }
    func1(1, 2, 4, 5, 4);

👉 arguments는 1,2,4,5,4 전부 출력

      rest는 2,4,5,4 로 인수에 초과된 인자만 출력

 

 

 

이러한 미세한 차이점이 존재한다.