[Frontend Interview] 화살표 함수의 특징

ES6 화살표 함수방식은 작성에도 편리하고 보기에도 간결하기 때문에 자주 쓰이는 함수 표현법이다.

하지만 사람이 쓰고 읽기에 좋다는 이유만으로 남용하게 된다면 의도치 않은 실수를 범할 수 있다.

 

그 이유는 기존 function 키워드와는 달리 화살표 함수는 this, prototype, arguments 정보를 생성하지 않는다는 점이다.

 

1. this

일반 함수와 달리, 화살표 함수는 자신이 호출되면서 생성된 실행 context에서 thisBinding 정보를 생성하지 않는다.

쉽게말해서 호출이 되더라도 '누가' 자신을 호출하는지에 대한 정보를 생성하지 않는다.

그렇기 때문에 화살표 함수 내에서 this가 참조된다면 화살표 함수가 선언되어 있는 스코프상의 this를 참조한다.

해당 스코프에 this가 없다면 스코프 체인을 타고 올라가며, 가장 가까운 this를 참조하게 된다.

 

2. prototype

화살표 함수는 prototype이 존재하지 않는다.

그래서 만약 화살표 함수로 선언된 함수를 new와 함께 호출하더라도 prototype 객체가 없기 때문에 인스턴스 객체가 만들어질 수 없다.

 

 

사실상 this,prototype 관련해서의 함수를 사용하지 않는한, 화살표 함수를 사용해도 큰 이상은 없는 것같다.

그럼 왜 화살표 함수를 만든 것일까?

 

- 화살표 함수의 장점

1. 짧은 함수 작성 가능

2. 콜백 함수와 내부 함수에 유용

자신만의 this를 생성하지 않고 자신을 포함하고 있는 context의 this를 이어받을 수 있다.

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x;;
  }.bind(this)); // this: Prefixer 생성자 함수의 인스턴스
};

var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

위에 bind해주는 과정을

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(x => `${this.prefix}  ${x}`);
};

const pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']));

으로 대체 가능

 

참고: velog.io/@raram2/%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%82%A8%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

 

hanjungv.github.io/2018-02-03-1_JS_arrow_function/