...args / 스프레드 변수 / 확산 매개변수 / 나머지 매개변수에 대하여

인트로

다른 사람의 Javascript 코드를 보다보면 매개변수로 들어오는 ...args를 자주 볼 것이다.
과연, ... 이 무엇일까?

용어의 다른 이름은?

function sum(...args){
    ...
}

먼저 위 코드처럼 매개변수의 위치에 존재하고 있다. 따라서, 아래처럼 여러가지 이름으로 불리고 있다.
우선 여기선 확산 매개변수 라고 부르겠다.

• 확산 매개변수
• 나머지 매개변수
• 스프레드 변수
• (외국) ...
• (외국) three dots

정의

확산 매개변수는 자바스크립트의 함수 선언의 매개변수에서 활용되는 개념이다. ES6에서 추가된 문법으로 ... 을 사용하여 매개변수로 들어오는 변수의 나머지 값들을 받아오게 하는 기능이다.

... 은 확산 연산자 / 스프레드 연산자 이다.
이는 배열의 나머지 값들을 손쉽게 받아오는 기능으로 ES6에서 추가되었다.
이를 함수의 매개변수 부분에 선언하면 손쉽게 함수를 확장 할 수 있는 확산 매개변수의 기능을 할 수 있게 된다.

사용법

함수의 매개변수 부분에서 ... 을 선언하여 나머지로 인입되는 매개변수를 받으면 된다.

function getGrade(a,b,c ...args){
    ...
}

getGrade(10,20,30,40,50);
// 위 처럼 실행할 경우, 10, 20, 30은 정상적으로 a,b,c라는 변수명으로 맵핑된다.
// 나머지 추가적으로 들어오는 40, 50은 나머지로 취급되어 args 객체 안으로 들어간다.

• args 는 배열처럼 사용 가능한 객체 이다.
• ...args 는 매개변수의 맨 마지막에 쓴다.
• 매개변수에서 ...args 는 하나만 존재해야 한다.

  • function getGrade(a, b, c, d, e, ...agrs){}; // [O]
    function getGrade(...args1, ...args2, ...args3){}; // [X]

넌 왜 사용했는데?

이번에 외부 스크립트를 삽입하는 개발건을 진행중에 있다. 이 과정에서 코드의 직관성을 높이고 함수의 재사용성을 높이기 위해 다양한 방법을 고민했다.

 

그리고 자바스크립트에서 함수를 여러가지 방면으로 활용하는 방식을 고민했다. 자바에서는 메소드 오버로딩 을 통해 하나의 함수명을 다방면으로 쓸 수 있는데, 자바스크립트에선 이를 지원하지 않는다.

 

자바스크립트 함수는 매개변수에 따라 다르게 활용될까?

자바스크립트 함수는 매개변수에 따라 다르게 활용될까?

 

위 글 처럼, 자바스크립트는 매개변수에 따라 다르게 활용되지 않는다 그렇담 함수를 다양하게 사용하려면 어떻게 해야할까?

바로 이 궁금증에서 시작해서 확산 매개변수를 찾아보게 되었고, 관련된 함수를 작성하게 되었다.

확산 매개변수의 사용법

function printAll(arr){
  for(let i = 0; i < arr.length; i++){
      console.log(arr[i]);
  }
}

function getText(a,b, ...args){
    console.log('첫번째 매개변수 : ' + a);
    console.log('두번째 매개변수 : ' + b);
      printAll(...args);
}

getText(10, 20, [1,2,3,4,5]);

// 첫번째 매개변수 : 10
// 두번째 매개변수 : 20
// 1
// 2
// 3
// 4
// 5

• 만약 args로 들어왔다고 해서 args 만 쓴다면 이는 객체로 인식한다.
  • 따라서, 위 상황에서 printAll(args)를 했다면, 그냥 객체 1개, 매개변수 1개를 입력한 상황이 된다.
  • typeOf(args) = Object 이다.
• 따라서, 나머지 매개변수(배열)로 입력된 값을 고~대로 배열로 보내주기 위해선 printAll(...args) 를 입력하여 그대로 보내주면 된다.

확산 매개변수의 존재 유무 파악하기

args 는 배열처럼 사용 가능한 객체이기 때문에, args.length로 판단이 가능하다.

• args.length == 0 : 넘어온 매개변수 없음
• args.length > 0 : 넘어온 매개변수 있음