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

반응형

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

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

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

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

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

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

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

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

    console.log(args);

}

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

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

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

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

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

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

const rest2 = (arg1, arg2, ...args)=>{

    console.log([arg1,arg2,args]);

}

rest2(1, 2, 3, 4);

rest2(1, 2);

rest2(1);

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

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

function sum(a, b, ...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(1, 2, 3, 4));

console.log(sum(1, 2));

console.log(sum(1));

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

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

const sum = (a, b, ...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(1, 2, 3, 4));

console.log(sum(1, 2));

console.log(sum(1));

반응형

저작자표시비영리변경금지

'Javascript > Javascript초급' 카테고리의 다른 글

함수 파라메터의 이해  (0)	2020.05.23
숫자 표시와 변환  (0)	2020.05.23
에러 발생과 예외 처리  (0)	2020.05.23
함수의 이해  (0)	2020.05.22
나머지 파라메터(Rest Parameter)의 이해  (0)	2020.05.22
화살표 함수  (1)	2020.05.22
location.href 와 location.replace() 의 차이와 구분 사용 방법  (0)	2020.05.12
HTML, CSS, Javascript 코딩과 테스트를 할 수 있는 클라우드 기반 프론트엔드 에디터 JSBin  (0)	2020.05.11
ES2015, ES2016, ES2017, ES6, ES7, ES8 ? 자바스크립트 버전의 이해  (2)	2020.05.11