[5주차 스터디]26장-ES6 함수 추가 기능

ES6 함수의 추가 기능

함수의 구분

• es6 이전의 함수는 사용 목적에 따라 명확 하게 구분 되지 않음

  • 일반 함수로서 호출 가능
  • new연산자와 함께 호출하여 생성자 함수로 호출 가능
  • 객체에 바인딩 되어 메서드로서 호출 가능

• 즉, es6이전의 모든 함수는 일반 함수, 생성자 함수 둘다 호출 가능

  es6이전의 모든 함수는 callable 이면서 constructor 이다

• 실수를 유발할 수 있으며 성능 면에서도 손해

• 이러한 문제를 해결하기 위해 es6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal, ES6 이전 함수)	O	O	X	O
메서드(Method)	X	X	O	O
화살표(Arrow)	X	X	X	X

• 일반 함수는 함수 선언문이나 표현식으로 정의한 함수 (이전의 함수와 동일)
• 메서드와 화살표 함수는 이전의 함수와 명확한 차이 존재

  일반 함수는 constructor이지만 es6의 메서드와 화살표 함수는 non-constructor 이다.

메서드

• es6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미

// ES5 
var obj = {
     name: 'Lee', 
     sayHi: function() { 
         console.log('Hi! ' + this.name); 
        } 
};
/*------------------------------------------------------ */
// ES6 
const obj = { 
    name: 'Lee', 
    // 메소드 축약 표현 
    sayHi() {
     console.log('Hi! ' + this.name); 
    } 
}; 

• es6의 메서드는 인스턴스를 생성할 수 없는 non-constructor
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가짐.
• super 참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼 클래스의 메서드를 참조하므로, [[HomeObject]]를 갖는 ES6 메서드는 super 키워드를 사용 가능.

화살표 함수

• 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.
• 함수 표현식으로 정의해야 한다.
• 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다.

const power = x => x ** 2;
power(2); // 4

이 때 함수 몸체 내부의 문이 평가 될 수 있다면 암묵적으로 반환, 표현식이 아닌 문이라면 반환 할 수 없기 때문에 에러

• 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호 생략 못함
• 객체 리터럴 반환하는 경우 소괄호로 ()감싸 주어야 한다.
• 화살표 함수도 일급 객체 이므로 고차 함수(Higher-Order Function, HOF)에 인수로 전달할 수 있다.

[1,2,3].map(v => v * 2); // [ 2, 4, 6]

• 화살표 함수는 콜백함수로 정의할 때 유용
• 일반 함수의 기능을 간략화 했으며, this도 편리하게 설계되었다.

화살표 함수와 일반 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.

const Foo = () => {};
// 화살표 함수는 생성자 함수로 호출 할 수 없다.
new Foo(); // TypeError : Foo is not constructor

인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

2. 중복된 매개변수 이름을 선언 할 수 없다.

   • 일반 함수는 중복된 매개변수 이름을 선언해도 에러 x (strict mode 에서는 에러)

3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

   • 화살표 함수 내부에서 this, arguments, super, new.target을 참조하면 상위 스코프의 this, arguments, super, new.target를 참조
   • 화살표 함수가 중첩 되어있다면 상위 함수 중에서 화살표 함수가 아닌 함수의 this, arguments, super, new.target를 참조

this

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 this
화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

• 일반 함수의 this와 다르게 동작하는 이유 : "콜백 함수 내부의 this 문제"를 해결하기 위해

  콜백 함수 내부의 this가 외부 함수의 this와 다르기 때문에 문제 발생
  this는 함수가 어떻게 호출 되는 지에 따라 바인딩 될 객체가 동적으로 결정 됨

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix; // this는 생성할 인스턴스에 바인딩
  }

  add(arr) {
    return arr.map(function (item) {
      // 콜백 함수 내부의 this는 undefined
      // 클래스 내부는 strict mode, strict mode에서 일반 함수 호출 시 전역 객체 아니라 undefined에 this 바인딩됨
      return this.prefix + item; 
    });
  }
}

const prefixer = new Prefixer('-webkit-');
prefixer.add([])// 여기서 this 바인딩됨
// 생성자 내부 this는 함수를 호출한 객체(prefixer)에 바인딩됨

• es6 이전의 해결 방법

1. this를 회피 시킨 후에 콜백함수 내부에서 사용

add(arr) {
  // this를 일단 회피시킨다, 여기서는 this가 호출한 객체 가리킴
  const that = this;
  return arr.map(function (item) {
    // this 대신 that을 참조한다.
    return that.prefix + ' ' + item;
  });
}

2. map의 두번째 인수로 this전달

add(arr) {
  return arr.map(function (item) {
    return this.prefix + ' ' + item;
  }, this); // this에 바인딩된 값이 콜백 함수 내부의 this에 바인딩된다.
}

3. bind 메서드 사용

add(arr) {
  return arr.map(function (item) {
    return this.prefix + ' ' + item;
  }.bind(this)); // this에 바인딩된 값이 콜백 함수 내부의 this에 바인딩된다.
}

• es6에서는 화살표 함수를 사용하여 문제 해결

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

• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.
• 화살표 함수 내부에서 this 참조하면 상위 스코프의 this를 그대로 참조 이를 lexical this 라고 한다.

  마치 lexical scope 처럼 화살표 함수 내부의 this는 함수가 정의된 위치에 의해 결정 됨

• 만약 화살표 함수가 전역 함수라면 this는 전역 객체 가리킨다. (상위 스코프 따라)
• 화살표 함수는 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, bind, apply 메서드 사용해도 내부의 this 교체 불가능
• 클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아니라 인스턴스의 메서드가 됨 => 메서드 정의시에는 메서드 축약 표현 권장

Rest 파라미터

• Rest 파리미터(나머지 매개변수)는 매개변수 이름앞에 세게의 점 ...을 붙여 정의한 매개변수를 의미
• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 받는다.

function foo(...rest) {
  // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다.
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

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

• Rest 파라미터는 일반 매개 변수와 함께 사용할 수 있으나 반드시 마지막에 와야한다.
• Rest 파라미터는 단 하나만 선언가능

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

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

• 함수 객체의 length 프로퍼티에 영향 x

function foo(...rest) {}
console.log(foo.length); // 0

function bar(x, ...rest) {}
console.log(bar.length); // 1

Rest 파라미터와 argument 객체

• es6에서는 Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 받을 수 있다.
• 함수와 es6 메서드는 Rest 파라미터와 argument 객체를 모두 사용가능
• 화살표 함수는 자체의 argument 객체 갖지 않는다. 따라서 화살표 함수로 가변 인자 함수 구현 시 반드시 Rest 파라미터 사용