[JS 스터디] 매개변수와 인수

사칙연산 함수 만들기

function calculator(a, b, operator){
    if(operator === '+') {
        return a + b;
    } else if (operator === '-') {
        return a - b;
    } else if (operator === '/') {
        return a / b;
    } else if (operator === '*') {
        return a * b;
    }
};

calculator(10, 20, '+')
calculator(20, 5, '/')
calculator(30, 3, '*')
calculator(50, 7, '-')

매개변수(parameter)

함수가 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수
function func(a) {
    return a;
};

인수(argument)

함수를 실행할 때 함수로 전달하는 값
func('hello!')

 

1. arguments

함수에 전달된 인수를  Array 형태로 참조하는 객체 (유사배열객체)

전달되는 매개변수의 숫자를 알 수 없을 경우(가변 인자 함수), arguments를 이용해 모든 인수 참조 가능

함수 내부에서 지역변수처럼 사용할 수 있다.

function arg(){
	console.log(arguments)
}

arg(2, 4, 6, 8, 10);

// Arguments(5) [2, 4, 6, 8, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]

index 속성은 가지고 있지만 배열이 아님 -> index, length O / forEach, map X

배열 메소드를 사용하려면 Function.prototype.call을 사용해줘야 한다.

function arg() {
  let array = Array.prototype.slice.call(arguments);
  return array.reduce(function (prev, curr) {
    return prev + curr;
  });
}

console.log(arg(1, 2, 3, 4, 5)); // 15

rest 파라미터를 이용하면 arguments를 배열로 변환하지 않고 가변 인수 목록을 배열로 전달받을 수 있다.

화살표 함수는 argument 지원하지 않으므로, 화살표 함수로 가변 인수를 넣고자 할 때는 반드시 rest 파라미터를 사용해야 한다.

 

 

2. rest parameter

나머지 매개변수. 

전달되는 매개변수의 갯수를 알 수 없을 경우 사용.함수의 마지막 파라미터 또는 하나의 파라미터에 ... 붙여 전달된 인수들을 배열로 받아옴

function restParam(...parameters){
    console.log(parameters);
}

restParam(2, 4, 6, 8, 10);

// (5) [2, 4, 6, 8, 10]

 

rest 파라미터는 반드시 마지막 파라미터여야 한다.

function restParam(a, b, ...parameters){
    console.log(parameters);
}

restParam(2, 4, 6, 8, 10)

// (3) [6, 8, 10]


function restParam(...parameters, a, b){
    console.log(parameters);
}

restParam(2, 4, 6, 8, 10)

// Uncaught SyntaxError: Rest parameter must be last formal parameter

 

3. rest parameter VS arguments

rest 파라미터는 인수 중 구분된 이름이 없는 대상 / arguments는 전달된 모든 인수 포함

rest 파라미터는 Array 메소드 사용 가능 / arguments는 실제 배열 아님

 

4. rest parameter VS spread operator

rest 파라미터는 분리된 요소들을 함수 내부에 배열로 전달한다.

function rest(param, ...rest){
	console.log(param); // 1
    console.log(rest); // [2, 3]
}
rest(1, 2, 3)

 

spread operator는 배열 인수가 분리되어 순차적으로 매개변수에 할당된다.

function spread(a, b, c){
	console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
}
spread(...[1, 2, 3])