1. 나머지 매개변수 rest parameter
👩🏻💻 가변 매개변수 함수 : 호출할 때 매개변수의 갯수가 고정적이지 않은 함수
👩🏻💻 자바스크립트에서는 이러한 함수를 구현할 때 '나머지 매개 변수'를 사용
👩🏻💻 함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수가 배열로 들어옴
/* 기본형 */
function 함수명 (...items) {}<script>
function sample(...items) {
console.log(items);
}
sample(1, 2); // [1, 2]
sample(1, 2, 3); // [1, 2, 3]
sample(1, 2, 3, 4); // [1, 2, 3, 4]
function sample2nd(items) {
console.log(items);
}
sample2nd([1,2]); // [1,2]
sample2nd([1,2, 3]); // [1,2,3]
sample2nd([1,2, 3, 4]); // [1,2,3,4]
</script>
(1) 나머지 매개 변수와 일반 매개변수 조합하기
/* 기본형 */
function 함수명 (매개변수, 매개변수, ...나머지 매개변수) {}<script>
function sample(a, b, ...c) {
console.log(a, b, c);
}
// 매개변수 a, b가 먼저 들어가고, 남은 것은 모두 c에 배열 형태로 들어감
sample(1, 2); // 1 2 []
sample(1, 2, 3); // 1 2 [3]
sample(1, 2, 3, 4); // 1 2 [3, 4]
</script>
매개변수의 자료형에 따라 다르게 작동하는 함수 만들기
<조건>
1) min(배열) : 매개 변수에 배열을 넣으면 배열 내부에서 최솟값을 찾아주는 함수
2) min(숫자, 숫자) : 매개변수에 숫자를 넣으면 숫자들 중 최솟값을 찾아주는 함수
<script>
function min(first, ...rests) {
/*
min(배열) 방식의 호출인 경우 first에는 배열이, ...rest에는 아무 값도 넘어오지 않음
min(숫자, 숫자) 방식의 호출인 경우 first에는 첫번째 인수가, ...rests에는 두번째 인수부터 나머지가 배열로 들어옴.
*/
// 변수 선언하기
let min; // 최솟값을 저장할 공간
let items; // 배열
// 매개변수의 자료형에 따라 조건 분리하기
if (Array.isArray(first)) { // first에 있는 변수가 배열인지 확인. 배열이면 나머지 매개변수가 없음
min = first[0];
items = first; // [52, 273, 32, 103, 275, 24, 57]
} else if (typeof(first) === 'number') {
min = first; // 52
items = rests; // [273, 32, 103, 275, 24, 57]
}
// 최솟값 구하는 공식
for (const item of items) {
if (min > item) {
min = item;
}
}
return min;
}
console.log(`min(배열): ${min(52, 273, 32, 103, 275, 24, 57)}`); // 24
console.log(`min(숫자, ...): ${min(52, 273, 32, 103, 275, 24, 57)}`); // 24
</script>
2. 전개 연산자 spread operator
👩🏻💻 배열을 전개해서 함수의 매개 변수로 전달 ▶️ 배열 안의 요소 하나 하나 출력함
👩🏻💻 전개 연산자는 일반적으로 함수 호출시 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용
/* 기본형: 함수 호출시 */
함수이름(...배열)
(1) 기본적인 전개 연산자 사용법
인수로 전달
<script>
'use strict';
const array = [1, 2, 3, 4];
function sample1st(a, b, c, d) {
console.log('sample1st() 실행');
console.log(a, b, c, d);
}
// 전개 연산자를 이용해서 배열을 인수로 전달.
// 배열은 개개로 전개해서 전달한 것과 결과가 같음
sample1st(...array);
sample1st(array[0], array[1], array[2], array[3]);
</script>
함수의 리턴 값 배열로 하고 결과 값을 전개 할당
<script>
function sample2nd() {
console.log('sample2nd() 실행');
let array = [1, 2, 3, 4];
return array;
}
console.log(sample2nd()); // [1, 2, 3, 4]. 결과값은 배열
// sample2nd() 호출 결과를 각각 변수에 저장하려면?
//let arrayNew = sample2nd();
//let a = arrayNew[0];
//let b = arrayNew[1];
//let c = arrayNew[2];
//let d = arrayNew[3];
let [a, b, c, d] = sample2nd(); // 배열을 각 변수에 할당
console.log(a); // 1
</script>
(2) 나머지 매개 변수와 함께 사용하는 경우
<script>
const array = [1, 2, 3, 4];
function sample3rd(...items) { // 단순하게 매개변수를 모두 출력하는 함수
document.write('<br>sample3rd() 실행<br>');
document.write(items, '<br>');
for (const item of items) {
document.write(item, '<br>');
}
}
console.log('# 전개 연산자를 사용하지 않은 경우');
sample3rd(array); // 배열의 요소로 배열을 가진 매개변수가 됨. [[1,2,3,4]]
console.log('# 전개 연산자를 사용한 경우');
sample3rd(...array); // 숫자 하나하나가 전개되어서 들어옴. 배열의 요소가 4개인 매개변수가 됨.
// [1,2,3,4]
</script>
(3) 일반 매개 변수에 전개 연산자 사용
<script>
const array = [1, 2, 3, 4];
function sample4th(items) {
document.write('<br>sample4th() 실행<br>');
document.write(items, '<br>');
for (const item of items) {
document.write(item, '<br>');
}
}
// 전개 되어서 전달이 됨. sample4th(1, 2, 3, 4)과 동일한 결과.
// items에 1만 전달이 되고, 배열이 아니기 때문에 for문으로 순회가 안됨
sample4th(array);
sample4th(...array);
// 1. Uncaught TypeError: items is not iterable at sample4th()
sample4th(array[0], array[1], array[2], array[3]);
// 1. Uncaught TypeError: items is not iterable at sample4th()
</script>
[ 내용 참고 : IT 학원 강의 ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 타이머 함수, 기본 매개변수, 즉시 호출 함수, 엄격모드 (0) | 2024.03.31 |
|---|---|
| [JavaScript] 재귀 함수, 콜백 함수, 화살표 함수 (0) | 2024.03.30 |
| [JavaScript] 사용자 정의 함수 예제 (0) | 2024.03.28 |
| [JavaScript] 함수란, 익명 함수, 선언적 함수, 호이스팅 (0) | 2024.03.28 |
| [JavaScript] 배열(Array)이란, 요소 추가 및 제거 (0) | 2024.03.28 |