파라미터 처리의 유연성을 넓혀보자: Argument와 Rest Parameter

aksen5240·2024년 9월 12일

목록 보기

13/15

💡 파라미터 처리의 유연성을 넓혀보자: Argument와 Rest Parameter

자바스크립트 함수에서 파라미터는 기본값을 가질 수 있으며, 여러 개의 아규먼트를 처리할 때 다양한 패턴이 존재한다. 특히, ES6 이후 Rest Parameter의 등장으로 아규먼트의 개수가 가변적일 때 보다 유연한 코드를 작성할 수 있게 되었다. 이에, 이번 글에서 함수의 파라미터 기본값 활용법과 Rest Parameter의 개념 및 활용 방법을 자세히 살펴보자.

📚 파라미터의 기본값과 Rest 파라미터, 그리고 아규먼트

1. 파라미터의 기본값

할당 연산자를 활용한 기본값 지정

함수에서 파라미터는 기본값을 가질 수 있다. 이를 통해 파라미터가 전달되지 않았을 때에도 함수가 정상적으로 동작하도록 만들 수 있다.

아래 예와 같이 파라미터에 할당 연산자를 활용해서 기본값을 지정하게 되면, 함수를 호출할 때 아규먼트를 전달하지 않았을 경우 이 기본값을 가지고 동작하는 모습을 살펴볼 수 있다.

function sayHi(name = 'Tags of TT') {
  console.log(`Hi! ${name}`);
}

sayHi()  // Hi! Tags of TT
sayHi('Tags of TT2')  // Hi! Tags of TT2

cf> parameter vs argument
parameter: 함수 선언 부분에서 소괄호 안에 작성되는 부분
argument: 함수를 호출하는 부분에서 parameter로 전달하는 값에 해당하는 부분

아규먼트 전달 방식 및 기본값 활용

조금 더 깊게 알아보자. 앞서 함수를 호출할 때 아규먼트를 전달하지 않았을 경우, 기본값을 가진다고 하였는데, 더 정확히 말하면, 아규먼트가 undefined인 경우 기본값을 가지게 되는 것이다.

추가적으로, 아규먼트는 함수를 호출할 때 작성한 순서 그대로 전달된다. 따라서, 예를 들어 파라미터가 a,b 3개가 존재하는 상황에서, 아규먼트를 A 한개만 전달하는 경우, 파라미터 a는 값 A를 가지게 되고, b는 undefined값을 가지게 된다.

이 때문에, name은 기본값으로 사용하되, age에 20을 할당하고 싶은 상태에서, 아래와 같이 코드를 구성한다면, 본인이 의도한 결과와 다른 값이 출력되는 당혹스러운 상황을 겪게 될 것이다.

function sayHi(name = "Tags of TT", age) {
  console.log(`Hello, I'm ${name}!`);
  console.log(`I'm ${age} years old.`);
}

sayHi(20); // Hello, I'm 20! I'm undefined years old.

이러한 상황 속, name은 기본값으로 사용하되, age에 20을 할당하는 방법은 크게 2가지가 있을 것이다. 먼저, 아규먼트가 undefined인 경우 기본값을 가진다 라는 특성에 주목하여 코드를 수정하면, 아래와 같이 코드를 구성할 수 있을 것이다.

function sayHi(name = "Tags of TT", age) {
  console.log(`Hello, I'm ${name}!`);
  console.log(`I'm ${age} years old.`);
}

sayHi(undefined, 20);  // Hello, I'm Tags of TT! I'm 20 years old.

두 번째로, 아규먼트는 함수를 호출할 때 작성한 순서 그대로 전달된다라는 특성에 주목해보면, 파라미터를 정의하는 순서를 변경하는 것도 좋은 해결책이 될 수 있을 것이다.

function sayHi(age, name = "Tags of TT") {
  console.log(`Hello, I'm ${name}!`);
  console.log(`I'm ${age} years old.`);
}

sayHi(20);

2. Rest Parameter를 통한 다양한 arguments 패턴 대응

다양한 argument 패턴에 따른 문제

만일 a,b,c 3개의 parameter를 받는 함수가 존재한다고 가정해보자. 이때 argument로 2개의 값만을 전달해준다면, c는 undefined값을 가지게 될것이다. 만일 argument로 4개의 값을 전달해준다면, 앞선 3개의 값은 a,b,c에 정상적으로 할당되지만, 3개 이후에 전달된 값은 그냥 무시되어버리는 문제가 발생한다.

이렇게 전달되는 argument의 패턴이 다양할 때, 아규먼트 개수에 따라 유연하게 동작하는 함수를 만들기 위해서는 어떻게 해야할까?

Rest Parameter의 등장

Rest Parameter는 파라미터 앞에 ...을 붙여서 여러 인수를 배열로 처리하는 기능을 제공한다. 특히, ES6전, 다양한 argument 패턴을 해결하기 위해 주로 사용했던 arguments 객체와 달리 Rest Parameter는 배열 메서드를 사용할 수 있다는 장점이 존재한다.

function printArgs(...args) {
  console.log(args.splice(1, 3)); // [ 2, 3, 4 ]
}
printArgs(1, 2, 3, 4, 5);

더 나아가, Rest Parameter는 일반 파라미터와 함께 사용할 수 있다는 큰 장점 또한 가지고 있다. Rest라는 이름처럼 앞에 정의된 파라미터에 아규먼트를 먼저 할당하고, 나머지 아규먼트를 배열로 묶는 역할을 한다.

한 가지 주의할 점은, 이러한 이유 때문에 일반 파라미터와 함께 사용할 때 Rest 파라미터는 반드시 가장 마지막에 작성되어야 한다.

function printArgs(first, ...args) {
  console.log(first); // a
  console.log(args); // [ 'b', 'c', 'd', 'e' ]
}
printArgs("a", "b", "c", "d", "e");

이러한 특징들을 잘 숙지하고 있다면, Rest Parameter를 사용하여 필요에 따라 아규먼트 값을 부분적으로 유용하게 활용할 수 있을 것이다.

📚 Outro

함수의 파라미터는 기본값 설정을 통해 아규먼트가 전달되지 않았을 때에도 안정적으로 작동하며, Rest Parameter를 활용하면 가변적인 아규먼트를 배열로 처리해 더욱 유연한 코드를 작성할 수 있다. 이러한 기능들을 잘 활용하면 코드의 가독성과 유지보수성을 높일 수 있을 뿐 아니라, 다양한 상황에 적응하는 범용적인 함수를 구현할 수 있다. 기본값과 Rest Parameter의 올바른 사용법을 적극 활용해, 더 효율적이고 직관적인 코드 작성을 실천해보자.