JavascriptES6

화살표 함수

javascript, es6, arrow

화살표 함수

화살표 함수란 es5의 function키워드 대신 =>를 사용하여 쉽게 함수를 선언하는 것을 말한다.

  • 기본 문법

() => {}는 매개변수가 없을 경우에 사용하는 방법, x => {}는 매개변수가 한 개일 경우, 소괄호를 생략 가능하다. (x,y) => {} 매개변수가 여러개일 경우 소괄호에 묶어 사용한다.

  • 호출

화살표 함수는 익명함수만 사용이 가능하기 때문에 함수 표현식으로 사용하여야 한다.

const plus = x => x + x;
console.log(plus(2)); // 4

또는 콜백함수로 사용이 가능하다.

const arr = ['a','b','c'];
const pow = arr.map(x => x * x);
console.log(pow);
  • this

일반 함수의 this는 함수를 호출하는 패턴에 따라서 this에 바인딩되는 객체가 달라진다. 우선적으로 콜백 함수의 this는 기본적으로 전역을 가리킨다.

function Strarr(str) {
  this.str = str; // 1
}

Strarr.prototype.StrarrArray = function (arr) {
  return arr.map(function (x) {
    return this.str + ' ' + x; // 2
  });
};

var res = new Strarr('Nice to meet you');
console.log(res.StrarrArray(['Jang', 'Park']));

Strarr이라는 함수를 만들어서 새로운 프로토타입에서 문자열을 리턴하는 메서드를 다시 만들어 반환해보았다. 예상되는 결과값이 있는가?
상식적으로 [‘Nice to meet you Jang’, ‘Nice to meet you Park’]이 나올 것으로 예상했지만 결과는 Nice to meet you 부분은 undefined가 반환된다.

1번 this는 Strarr이 생성한 객체(인스턴스인 str)을 가리킨다. 2번에서이 this는 전역 객체를 가리킨다. 그 이유는 생성자 함수와 객체의 메서드를 제외한 모든 함수 내부의 this는 전역객체를 가리키기 때문이다.

그래서 es5에서는 이를 대체할 몇가지 방법을 제시하고 있다.

  1. that = this
function Strarr(str) {
  this.str = str;
}

Strarr.prototype.StrarrArray = function (arr) {
  var that = this; // 참조값을 변경해준다.
  return arr.map(function (x) {
    return that.str + ' ' + x;
  });
};

var res = new Strarr('Nice to meet you');
console.log(res.StrarrArray(['Jang','Park']));
  1. 생성자 함수의 인스턴스로 this 넣어주기
  2. bind메서드 이용하기
  • 화살표 함수의 this

화살표 함수의 this는 상위 컨텍스트의 this를 계승하게 된다.

function Strarr(str) {
  this.str = str; // 1
}

Strarr.prototype.StrarrArray = function (arr) {
  return arr.map(x => `${this.str} ${x}`);
};

const res = new Strarr('Nice to meet you');
console.log(res.StrarrArray(['Jang', 'Park']));
  • 화살표 함수는 언제 쓰면 안될까?

화살표 함수가 매우 편리한 기능인 것은 맞지만, 그것을 남용하는 것은 문제가 된다. 특히 몇가지 경우에는 화살표 함수를 사용해서는 안된다.
첫 번째로 화살표 함수로 객체의 메서드를 정의하는 경우이다. 화살표 함수의 this는 상위 컨텍스트를 가리키기 때문에 객체 메서드를 생성할 경우 this가 전역객체를 가리켜 문제가 될 수 있다.

이 경우 축약 메서드 표현을 사용하기로 하자!

const person = {
  name: 'Jang',
  sayHello() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHello();

또한 같은 이유로 prototype에 할당하는 경우도 배제해야 한다. prototype에 메서드를 할당하려는 경우에는 일반 함수로 하자!

세 번째로는 생성자 함수이다. 생성자 함수는 prototype 프로퍼티와 그가 가리키는 constructor 객체를 사용한다. 근데 화살표 함수에는 prototype 프로퍼티가 존재하지 않는다.

마지막으로 addEventListner의 콜백함수로 사용하면 안된다. 이도 마찬가지로 this가 상위 컨텍스트인 전역 객체를 가리켜버리기 때문이다. 이도 마찬가지로 this를 사용하고 싶다면 일반 함수를 사용하도록 하자.(이 때의 this는 이벤트 리스터에 바인딩된 요소를 가리킨다.)

Share