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
function 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
function sum(...args) {
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5));

참고: Rest parameter


내용이 부족함 / 추가 예정


'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
  1. 2017.04.30 19:12

    비밀댓글입니다

+ Recent posts