📖ES6 함수의 추가 기능

이번 포스팅에서는 ES6 스펙에서 추가된 함수에서의 추가 기능에 대해서 다뤄본다.

ES6란?🤔

ES6란 무엇일까? ES6는 ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙을 말한다.

많은 버전 중 ES6가 자주 언급되는 이유는 화살표 함수, Promise, Spread 연산자, 템플릿 리터럴등 최신 자바스크립트 개발 환경에서 이용되는 문법들이 대거 새로 등장했기 때문이다.

ECMAScript

ECMAScript에 대해서 조금 더 알아보자. ECMAScript란 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서 정의한 표준 규격을 말한다.

ECMA 국제 기구에서 'ECMAScript standard'라는 스크립트 표준을 만든다.

💡 ECMASCript 스펙 정의서는 이곳에서 확인해 볼 수 있습니다.

ES6 함수의 추가 기능

자, 그러면 ES6에서 정의된 함수의 추가 기능에 대해 살펴보자.

다음과 같은 기능들의 등장 배경을 살펴본다.

• 메서드 함수
• 화살표 함수
• rest 파라미터

ES6 등장 전 모든 함수는 일반 함수, 생성자 함수로써 호출이 가능했다.
다음 코드를 보자.

var foo = function () {
  return 1;
}

// 일반 함수로 호출
foo();

// 생성자 함수로 호출
new foo();

// 메서드로 호출
var obj = {foo: foo}
obj.foo()

즉, ES6 전의 모든 함수는 [[Constructor]] 이면서 [[Callable]]이었다. (내부 슬롯과 내부 메서드에 대해 익숙하지 않으신 분들은 프로퍼티 어트리뷰트 포스팅을 참조하세요!)

언뜻 보면 편리해 보일 수 있으나 이러한 방식은 자칫하면 버그를 유발할 수 있다. 예를 들면, 생성자 함수로써 이용되면 안 되는 함수들이 new 키워드를 통해 생성자 함수로 호출 하는 것을 막을 방법이 없다.

또한, 생성자 함수로써 사용하지 않을 함수들도 prototype 객체를 만들기 때문에 성능적으로도 좋지 않다.

이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 3가지로 명확히 구분한다.

1. 일반 함수
2. 메서드
3. 화살표 함수

여기서 일반 함수만이 생성자 함수로써 호출 될 수 있다.

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

const obj = {
  x: 1,
  foo(){ return this.x;}, // 메서드
  bar: function(){ return this.x} // 메서드 아님
}
// bar만 생성자 함수로 new 키워드와 함께 호출 가능

// new obj.bar() ??

obj.foo.hasOwnProperty('prototype') // false
obj.bar.hasOwnProperty('prototype') // true

위 코드에서 보면 메서드 축약 표현으로 생성된 foo만 메서드이고, bar은 메서드가 아니다. 따라서 ECMAScript에서는 메서드 생성 시 메서드 축약 표현으로 함수를 선언할 것을 권장한다.

메서드인 foo의 경우 prototype 객체를 갖지 않고, 메서드가 아닌 bar의 경우 prototype 객체를 갖는것을 확인할 수 있다.

화살표 함수

화살표 함수는 ES6 사양에서 처음 등장한 함수로, this 바인딩을 갖지 않는 것이 가장 큰 특징이다. 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결할 수 있다.

this 관련 포스팅에서도 활용했던 코드인데, 이해를 위해 한번 더 가지고 왔다.
아래 코드를 보자.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(function (item) {
      return this.prefix + item; 
      // TypeError: Cannot read property 'prefix' of undefined
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

Prefixer Class 내부의 add 메서드가 의도한 동작은 전달한 배열의 원소를 돌며 prefix인 '-webkit-'을 붙인 문자열을 반환하는 것이다.

하지만 add 메서드 arr.map안의 콜백 함수는 일반 함수로 호출되었고, 일반 함수에서 this는 전역 객체인 window를 가리키기 때문에 prefix값을 참조할 수 없다.

이런 경우 기존에는 bind를 통해 this를 binding하거나 class의 this를 다른 변수에 저장하고 그 변수에 접근하는 방식으로 해결하여야 했다.

ES6 이상의 개발환경에서는 아래와 같이 화살표 함수를 이용하여 해결 가능하다.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

화살표 함수는 this 바인딩이 없기 때문에 상위 스코프인 Prefixer class를 참조하게 된다.

Rest 파라미터

rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

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

foo(1,2,3,4,5)

ES6 이전에 자주 사용된 argument와 거의 같은 기능을 하지만, arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 배열로 변환해야 한다는 단점이 있었다.

function sum() {
  var array = Array.prototype.slice.call(arguments);
  
  return array.reduce(function(pre,cur){
    return pre + cur;
  }, 0);
}

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

Rest 파라미터를 사용한다면 변환 과정이 없이 사용 가능하다.

function sum(...args){
  return args.reduce((pre,cur) => pre+cur,0))
}

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