JavaScript 함수 파라미터 확장

Extended Parameter Handling(함수 파라미터 확장)

먼저 용어에 대해 알아보자

인수, 실행인자(argument) - 함수를 호출하는 입장에서 “넘겨주는 값”
인자, 매개변수(parameter) - “인자를 받은 값”

즉 함수를 선언할 때 인자를 입력해주고 인수로 호출한다!

1. 기본 파라미터 초기값
   기존 ES5에서는 함수 내에서 파라미터 체크와 초기화를 했다.

//ES5
function plus(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}
console.log(plus()); //0

위에 보는것과 같이 초기값을 || 뒤에 넣어 함수 내에서 설정을 함

//ES6
const plus = (x = 0, y = 0) => {
    return x + y;
}
console.log(plus()); //0

ES6는 직접 파라미터에 초기값을 담아, ES5보다 직관적으로 코드를 이해할 수 있다.

2. Spread 연산자(Spread Operator)
   Spread 연산자는 ...로 작성하며 배열을 다른 배열의 내부에 삽입할 때 사용한다.

//ES5
var arr = [1, 2];
console.log(arr.concat([3, 4])); // [1, 2, 3, 4]
//ES6
let arr = [1, 2];
console.log([...arr, 3, 4]); //[1, 2, 3, 4]

3. Rest 파라미터
   우선 ES5와 ES6을 비교하기 전에 먼저 알아야 하는 내용들을 알아보자.

ES5에서는 인자의 개수를 알 수 없을 때 arguments 객체로 인자값을 확인한다.
이는 호출시 전달된 인수들의 정보를 배열의 형태로 담고있는 객체로 함수 내부에서 지역변수처럼 사용됨.

function check() {
    console.log(arguments)
}
check("a", "b", "c"); // { "0": "a", "1": "b", "2": "c"}

이러한 유사배열객체(array-like object)를 배열로 바꾸기 위해 call 메서드를 사용한다.

function check() {
    var arr = Array.prototype.slice.call(arguments);
    console.log(arr);
}
check(1, 2, 3); //[1, 2, 3]

위의 코드를 분석해보면 call로 내용을 받아 하나하나 잘라서(slice) 배열로 만들겠다는 코드이다.

이제 위에서 익힌 내용을 기반으로 ES5와 ES6를 비교해보자.

// ES5
function sum() {
  var arr = Array.prototype.slice.call(arguments);
  return arr.reduce(function(pre, cur) {
    return pre + cur;
  });
}
console.log(sum(1, 2, 3, 4, 5));

// ES6
const sum = (...args) => {
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5));