[TCP School/자바스크립트] 함수 - 매개변수와 인수

자바스크립트에서 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다.

함수를 호출할 때도 인수로 전달된 값에 어떠한 타입 검사도 하지 않는다.

 

함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다.

이 경우 자바스크립트에서는 전달되지 않는 나머지 매개변수에 자동으로 undefined 값을 설정한다.

function addNum(x, y, z) {
    return x + y + z;
}

addNum(1, 2, 3);  // 6
addNum(1, 2);  // NaN
addNum(1);  // NaN
addNum();  // NaN

위 예제에서 인수가 세개보다 적게 전달된 함수들은 NaN을 반환한다.

값이 전달되지 않은 매개변수에 자동으로 undefined 값이 설정되기 때문에 산술 연산이 불가능하기 때문이다.

 

하지만 undefined 값이 자동으로 설정되는 것을 이용해서 값이 정상적으로 반환되도록 할 수는 있다.

function addNum(x,  y, z) {
    if (x === undefined)
        x = 0;
    if (y === undefined)
        y = 0;
    if (z === undefined)
        z = 0;
    return x + y + z;
}

addNum(1, 2, 3);  // 6
addNum(1, 2);  // 3
addNum(1);  // 1
addNum();  // 0

---

arguments 객체

만약 함수의 정의보다 더 많은 수의 인수가 전달되면, 매개변수에 대입되지 못한 수들은 참조할 방법이 없게 된다.

하지만 arguments 객체를 사용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있다.

 

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다.

또한, 인수의 총 개수는 arguments 객체의 length 프로퍼티에 저장된다.

function addNum() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
         sum += arguments[i];
    }
    
    return sum;
}

addNum(1, 2, 3);  // 6
addNum(1, 2);  // 3
addNum(1);  // 1
addNum();  // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);  // 55

arguments 객체는 Array객체가 아님에 주의해야 한다.

---

디폴트 매개변수

ECMAScript 6부터 새롭게 정의된 매개변수이다.

디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않을 경우에 사용하게 될 기본값을 의미한다.

자바스크립트에서 매개변수의 기본값은 undefined 값으로 설정되어 있다.

function mul(a, b) {
    b = (typeof b === 'undefined') ? 1 : b;
    return a * b;
}

mul(3, 4);  // 12
mul(3);  // 3

 

하지만 디폴트 매개변수를 이용하면 이러한 매개변수의 기본값을 변경할 수 있다.

function mul(a, b = 1) {
    return a * b;
}

mul(3, 4);  // 12
mul(3);  / 3

---

나머지 매개변수

나머지 매개변수는 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있다.

다음 예제는 첫 번째 인수에서 두 번째 인수부터 마지막 인수까지를 뺀 후 그 결과를 반환하는 예제이다.

function sub() {
    var firstNum = arguments[0];
    for (var i = 0; arguments.length; i++) {
        firstNum -= arguments[i + 1];
    }
    
    return firstNum;
}

sub(10, 2, 3);  // 5
sub(10, 1, 5, 8);  // -4

 

나머지 매개변수를 사용하면 좀 더 직관적으로 코드를 짤 수 있다.

function sub(firstNum, ...restArgs) {
    for (var i = 0; i < restArgs.length; i++) {
        firstNum -= restArgs[i];
    }
    
    return firstNum;
}

sub(10, 2, 3);  // 5
sub(10, 1, 5, 8);  // -4

 

나머지 매개변수는 익스플로러, 사파리에서 지원하지 않는다.

---

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨