본문 바로가기

Javascript/Javascript초급

함수 파라메터의 이해

반응형

파라메터와 인자


파라메터는 함수 정의 시점에 정의하는 변수로 넘겨받는 값들을 담기 위한 함수 내부 사용을 위한 변수입니다.

파라메터 갯수는 기본적으로 함수 선언 시점에 정해지지만, 나머지 파라메터를 사용할 경우 추가적인 가변 변수를 사용할 수 있어, 사실상 파라메터 갯수에 제한을 없앨 수 있습니다.


인자는 실제 함수를 호출하는 시점에 함수 호출과 함께 함수로 넘어가는 값(들) 입니다.


자바스크립트는 파라메터 갯수와 인자 갯수가 일치하지 않아도 에러가 발생하지 않습니다.


파라메터 갯수보다 인자 갯수가 많을 경우 파라메터 갯수 만큼만 값이 전달됩니다.

추가의 인자 값은 함수 내부의 독특한 객체인 arguments 를 통해 접근이 가능합니다.


파라메터 갯수보다 인자 갯수가 적을 경우 남는 파라메터에는 undefined가 전달됩니다.

인자값에 대한 사전 체크를 하지 않을 경우 인자와 파라메터 갯수 불일치 시 함수 내부 코드 실행중 에러가 발생할 수 있기 때문에 사전 체크를 해야할 필요가 있습니다. 

이런 경우를 위해 기본 파라메터 값을 정해줌으로써 인자값이 전달되지 않으면, 기본값이 대신 사용되도록 해 에러 발생 가능성을 현저히 낮출 수 있습니다.




기본 파라메터(Default Parameter)


ES6에서 새롭게 추가된 기능으로 함수를 정의할 때 함수 파라메터의 기본값을 설정할 수 있는 기능입니다.

ES6전에는 파라메터에 기본값이 없었기 때문에, 해당 파라메터에 값이 넘어오지 않을 경우 파라메터 값이 undefined 가 되었습니다.

그대로 사용하면 오류가 발생하게 되기 때문에 파라메터 값에 대한 사전 체크를 해야 하는 번거로움이 있었습니다.


function sum(a = 0b = 0){
    return a + b;
  }
  
  console.log(sum(45));
  console.log(sum(4));
  console.log(sum());



이렇게 파라메터 기본값을 지정해서 함수를 구현하면, 파라메터 값이 넘어왔는지를 체크하지 않아도 되기 때문에 에러가 없으면서도 최적화된 코드를 작성할 수 있습니다.




나머지 파라메터(Rest Parameter)


파라메터 갯수를 가변으로 사용할 수 있도록 해주는 기능입니다.

ES6에서 새로 추가된 기능으로 함수의 확장성을 높여주는 중요한 파라메터 기능입니다.


맨 마지막 파라메터 앞에 점 3개(...) 를 찍으면 해당 파라메터는 나머지 파라메터가 됩니다.

다른 파라메터가 없을 경우 나머지 파라메터만 사용할 수 있습니다.


나머지 파라메터만 파라메터로 사용한 경우 파라메터의 최소 갯수는 0개 부터 N개 가 됩니다.


function myFunc(...args){

}


최소 2개의 파라메터는 필수이고, 나머지 파라메터는 선택적인 파라메터라면


function myFunc(a, b, ...args){

}


나머지 파라메터는 배열 객체로 넘어오기 때문에 순환 구문으로 나머지 파라메터들에 대한 처리를 손쉽게 할 수 있습니다.


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


나머지 파라메터에 대한 자세한 사용법은 "나머지 파라메터의 이해" 글을 보시기 바랍니다.



arguments 객체


함수 안에서만 기본으로 사용할 수 있는 자바스크립트의 독특한 객체입니다.

함수 런타임 시점에 자동으로 생성되는 객체이며, 함수 코드 및 파라메터와는 무관하게 생성됩니다.

함수 실행시 함수로 전달된 실제 인자(들)의 정보를 담고 있는 객체입니다., 모든 파라메터에 대한 정보를 담고 있습니다.


함수 선언에서 파라메터로 정의한 변수 갯수보다 실제 함수 호출시 전달하는 인자의 갯수가 다를 수 있는 자바스크립트의 특성을 고려해 만들어진 객체입니다.


예를 들어 함수 선언시에 함수 파라메터를 2개를 정의했지만, 함수 실행시에 인자를 5개를 넣어 호출했다면, 나머지 3개의 인자값에는 파라메터로는 접근할 수 없습니다.


이런 경우에 arguments 객체를 통해 추가의 인자에 접근할 수 있습니다.


function sum(){
    let result = 0;
    for(let i = 0i < arguments.lengthi++){
        result += arguments[i];
    }
    return result;
}

console.log(sum(1,2,3,4,5));




나머지 파라메터를 사용한 경우 추가의 인자값은 나머지 파라메터를 통해 접근할 수도, arguments 객체를 통해 접근할 수도 있습니다.


반응형

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

연산자 기초  (0) 2020.05.24
템플릿 리터럴의 기초  (0) 2020.05.24
Null, Undefined, 0  (0) 2020.05.24
원시형 데이터 타입과 참조형 데이터 타입의 이해  (0) 2020.05.23
함수 파라메터의 이해  (0) 2020.05.23
숫자 표시와 변환  (0) 2020.05.23
에러 발생과 예외 처리  (0) 2020.05.23
함수의 이해  (0) 2020.05.22
나머지 파라메터(Rest Parameter)의 이해  (0) 2020.05.22

닫기