(12) Modern JavaScript - 레스트 파라미터 (Rest Parameter)

함수 내부에서 arguments 객체를 활용하면 

불규칙하게 아규먼트가 전달되는 상황에서도 유연하게 다룰 수 있다.

function printArguments(a, b, c) {
  for (const arg of arguments) {
    console.log(arg);
  }
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");
 
printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

 

하지만 arguments 객체에도 문제점이 존재한다.

 

첫 번째 문제점은 arguments 객체가 유사 배열이기에 배열의 메소드를 사용할 수 없다.

두 번째 문제점은 항상 함수를 호출할 때 전달한 아규먼트 전체를 다루기 때문에 

각각 따로 묶어서 다루려면 인덱싱을 통해서 한번 더 세분화해야하는 과정이 필요하다. 

 

위 문제들을 해결하기 위해 레스트 파라미터(Rest Parameter) 문법을 사용한다.

---

레스트 파라미터 (Rest Parameter)

이전 글에서 다룬 arguments 객체 코드를 활용하여 간단하게 문법을 고쳐 쓸 수 있다.

function printArguments(...args) {
  for (const arg of args) {
    console.log(arg);
  }
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");
 
printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

보이는 것처럼 파라미터를 하나 생성하고 그 앞에 마침표 3개를 붙인 것이다.

그리고 arguments 객체 대신 'args' 파라미터를 사용하였고

실행 결과를 보면 arguments 객체를 사용한 것과 똑같이 동작하는 것을 확인할 수 있다.

---

위와 같이 일반 파라미터 앞에 마침표 3개를 붙여 준 것을 레스트 파라미터라고 하는데

 argument 객체는 유사 배열이기 때문에 배열의 메소드를 사용할 수 없다고 했을 때

레스트 파라미터는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있다.

function printArguments(...args) {
  console.log(args.splice(0, 2));
  console.log(arguments.splice(0, 2));
 
  console.log(`--------------------------`);
}
printArguments("Jung", "Sang", "hwa");
printArguments("Shin");
printArguments("Chang", "Seop");
 
printArguments("Ronaldo", "Messi");
printArguments("Doran", "Oner", "Deft", "Keria");

그래서 각각의 slice 메소드를 활용하여 결과를 확인해보면

레스트 파라미터 쪽에서는 0번부터 요소 2개가 나온 모습을 확인할 수 있고

argument 객체 쪽은 splice가 function이 아니라고 에러 메세지가 뜬다.

---

또한 레스트 파라미터는 아래와 같이 일반 파라미터와 함께 사용할 수 있다.

function Worlds2024(first, second, ...others) {
  console.log("2024 월즈 최종결과");
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  console.log("--------------------");
  for (const arg of others) {
    console.log(`우승맴버: ${arg}`);
  }
}
Worlds2024("T1", "BLG", "Zeus", "Oner", "Faker", "Gumayusi", "Keria");

"Rest(나머지)" 라는 이름 처럼

앞에 정의된 파라미터에 아규먼트를 먼저 할당하고

나머지 아규먼트를 배열로 묶는 역할을 하기 때문에 

일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성되어야 한다.

그래서 항상 전달된 모든 아규먼트를 다루는 arguments 객체와는 다르게 

위와 같이 명확하게 구분해서 다루어야하는 부분은 일반 파라미터를 사용하고

유연하게 다룰 수 있는 부분은 Rest Parameter로 나눠서

필요에 따라 부분적으로 유연하게 활용할 수 있다.

---

Rest Parameter는 이처럼 arguments 객체의 아쉬운 점들을 보완하기 때문에

단순하게 생각했을 때 arguments 객체보다 레스트 파라미터만 사용해도 될 거 같기도 하지만

실제도로 레스트 파라미터가 가지는 장점이 상대적으로 크기 때문에 

코드를 작성할 때 보통 레스트 파라미터를 우선적으로 활용하고 

정말 불가피할 때 arguments 객체를 활용하면 될 것이다.

 

하지만 무조건 레스트 파라미터가 100% 완벽하게 대체 할 수 없기 때문에

두 가지 장단점을 잘 이용하여 코드를 작성해야한다.

---

▶ GitHub

https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/Modern_JS/11.Rest_Parameter

JavaScript_soloPlay/Modern_JS/11.Rest_Parameter at main · SeopE9611/JavaScript_soloPlay

 

▶ Notion

https://purrfect-gargoyle-935.notion.site/2-14be9530b3e180bd897cef91843e296f?pvs=4

글자 추출 2 | Notion