1. 가변 인자란?
일반적으로 함수는 정의된 매개변수의 개수에 맞춰 호출되어야 하지만, 가변 인자를 사용하면 동적으로 개수가 달라지는 여러 개의 인자를 함수에서 처리할 수 있습니다. 즉, 함수는 호출될 때 전달된 인자의 개수와 관계없이 이를 모두 받아서 처리할 수 있습니다. 이를 통해 함수 호출 시 인자의 개수를 고정하지 않고, 유연하게 처리할 수 있습니다.
2. 가변 인자 처리 방법
1. arguments 객체
arguments 객체는 함수 내에서 자동으로 생성되는 배열과 유사한 객체로, 함수에 전달된 모든 인자를 포함합니다. 이 객체는 모든 함수에서 자동으로 사용 가능하며, 함수의 매개변수를 지정하지 않아도 전달된 모든 인자에 접근할 수 있습니다.
- 특징:
arguments객체는 배열이 아니지만,length속성을 가지고 있어 인자의 개수를 확인할 수 있습니다.- 인덱스를 사용하여 각 인자에 접근할 수 있습니다.
- 배열 메서드를 직접 사용할 수는 없지만,
Array.from(arguments)등을 통해 배열로 변환할 수 있습니다.
2. REST 파라미터 (...)
REST 파라미터는 ES6에서 도입된 문법으로, 함수 정의 시 마지막 매개변수 앞에 ... 을 붙여 사용합니다. REST 파라미터는 함수에 전달된 인자 중 나머지 모든 인자를 배열로 수집하여 사용할 수 있게 합니다.
- 특징:
- REST 파라미터는 배열이므로, 배열 메서드를 바로 사용할 수 있습니다.
- 함수 정의에서 가장 마지막 매개변수로만 사용할 수 있습니다. REST 파라미터 다음에 다른 매개변수를 둘 수는 없습니다.
- 코드의 가독성과 간결함을 높여줍니다.
3. 가변 인자의 장점
가변 인자는 다양한 상황에서 유용하게 사용될 수 있으며, 특히 다음과 같은 장점이 있습니다.
- 유연성: 함수 호출 시 인자의 개수를 자유롭게 조정할 수 있어 코드의 유연성이 높아집니다.
- 다양한 데이터 처리: 여러 개의 인자를 하나의 함수에서 처리할 수 있어 데이터 집합이나 여러 값을 한꺼번에 다루기에 편리합니다.
- 가독성 향상: REST 파라미터(
...)를 사용하면 코드를 더 읽기 쉽고 간결하게 만들 수 있습니다.
4. 가변 인자의 사용 시 주의점
- REST 파라미터는 반드시 마지막에 위치: REST 파라미터는 함수의 마지막 매개변수로만 사용할 수 있습니다. 예를 들어,
function example(a, ...rest, b)와 같은 형태는 허용되지 않습니다. - 메모리 사용에 유의: 가변 인자는 많은 인자를 처리할 수 있지만, 너무 많은 인자를 전달하면 메모리 사용이 늘어나거나 성능에 영향을 줄 수 있습니다. 따라서 필요한 만큼만 사용하도록 해야 합니다.
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 가변 인자 예제 - 인자의 개수에 상관없이 함수를 호출할 수 있음
// func1 함수: arguments 객체를 사용하여 가변 인자 처리
const func1 = function () {
// arguments.length로 전달된 인자의 개수 출력
console.log(arguments.length);
// 전달된 모든 인자를 순회하며 출력
for (let data of arguments) {
console.log(data); // 각 인자 값 출력
}
};
// func1 함수 호출
func1(1); // 예상 출력: 1, 1
func1(1, 2); // 예상 출력: 2, 1, 2
func1(1, 2, 3); // 예상 출력: 3, 1, 2, 3
// func2 함수: REST 파라미터(...datas)를 사용하여 가변 인자 처리
const func2 = function (...datas) {
// datas.length로 전달된 인자의 개수 출력
console.log(datas.length);
// 전달된 모든 인자를 순회하며 출력
for (let data of datas) {
console.log(data); // 각 인자 값 출력
}
};
// func2 함수 호출
func2(1); // 예상 출력: 1, 1
func2(1, 2); // 예상 출력: 2, 1, 2
func2(1, 2, 3); // 예상 출력: 3, 1, 2, 3
</script>
</body>
</html>