본문 바로가기

Javascript&jQuery/Javascript기초

나머지 파라메터(Rest Parameter)의 이해

ES6에서 추가된 함수 파라메터를 확장하는 기능입니다.

가변 파라메터를 사용할 수 있도록 해 사실상 함수 파라메터를 무한대로 활용할 수 있습니다.


나머지 파라메터를 사용하면 함수의 파라메터 갯수 별로 별도의 함수를 정의할 필요가 없어집니다.

함수 내부에서 가변 파라메터를 처리할 수 있도록 추가 파라메터 배열을 제공하기 때문에 가변 파라메터에 대한 대응도 가능합니다.


나머지 파라메터는 가변 파라메터 앞에 3개의점(...) 을 찍어 나머지 파라메터임을 표시합니다.

나머지 파라메터 변수는 배열로 선언되며, 파라메터를 배열에 담아 넘깁니다.

파라메터가 없을 경우 빈 배열이 넘어갑니다.


function(...args){ // 파라메터를 args 변수(배열)에 담아 함수 내부로 넘김
    console.log(args);
}



최소 2개의 필수 파라메터를 필요로 하는 경우 아래와 같이 표현할 수 있습니다.

나머지 파라메터는 화살표 함수에도 동일하게 사용할 수 있습니다.


필수 파라메터는 별도의 변수로 함수로 전달되며, 파라메터 갯수가 2개가 초과될 경우, 초과되는 파라메터만 나머지 파라메터 배열에 담겨서 전달됩니다.


파라메터 갯수가 필수 파라메터 갯수보다 작은 경우 나머지 파라메터는 빈 배열로 전달되며, 부족한 필수 파라메터는 undefined 가 전달됩니다.


나머지 파라메터는 반드시 마지막 파라메터로 사용해야 합니다.

나머지 파라메터가 마지막 파라메터가 아니면 "Rest parameter must be last formal parameter" 구문 오류가 발생합니다.


const rest2 = (arg1arg2, ...args)=>{
    console.log([arg1,arg2,args]);
}

rest2(1234);
rest2(12);
rest2(1);



나머지 파라메터는 배열이기 때문에 순환 메서드를 사용해 파라메터를 손쉽게 처리할 수 있는 장점이 있습니다.

최소 2개 이상의 파라메터 값을 받아 합계값을 반환하는 함수를 구현하는 경우 


function sum(ab, ...args){
    let result = 0;
    if(a != undefined){result = a;}else{return 0;}
    if(b != undefined){result += b;}
    args.forEach(function(arg){
        result += arg;
    })
    return result;
}

console.log(sum(1234));
console.log(sum(12));
console.log(sum(1));




위 구현 방법을 화살표 함수와 reduct() 메서드를 사용해 아주 고급스럽게 구현하면 아래처럼 간결하게 만들 수 있습니다.

reduce() 메서드는 배열의 누적합을 구할 수 있는 메서드입니다. 중급 과정에서 배우게 됩니다.


const sum = (ab, ...args)=>{
    let result = 0;
    if(a != undefined){result = a;}else{return 0;}
    if(b != undefined){result += b;}
    result += args.length > 0 ? args.reduce((subsum,arg)=>subsum+=arg) : 0;
    return result;
}

console.log(sum(1234));
console.log(sum(12));
console.log(sum(1));



닫기