가변인자
가변인자 : 가변 인자를 사용하면 동적으로 개수가 달라지는 여러 개의 인자를 함수에서 처리할 수 있음
argumentsarguments객체는 배열과 유사한 객체, 함수에 전달된 모든 파라미터를 포함한 배열임(근데 엄밀히 말하면 배열은 아님)- 배열은 아니지만 length속성은 있음(파라미터 개수 확인 가능)
- 배열은 아니지만 인덱스 사용가능
- 배열은 아니지만 Array.from(arguments)을 하면 배열로 변환 가능
- REST 파라미터
- 매개변수앞에
...붙인다, 나머지 인자를 배열로 수집가능 - 얘는 배열메서드 사용 가능
- 마지막 파라미터에만 적용 가능
- 매개변수앞에
가변인자의 장점
- 유연성 : 인자의 개수를 자유롭게 조정가능
- 다양한 데이터 처리 : 여러 인자 하나의 함수에서 처리 가능
- 가독성 향상 :
...쓰면 코드 읽기 더 편함
예시 코드
<!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>
개발자