[JavaScript] 나머지 매개변수와 전개 연산자

 

---

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 학원 강의 ]