ES6+ 함수의 화살표 함수 알아보기

ES6+ 에서는 화살표 함수를 이용해 함수를 정의하는 방법이 추가되었다. 화살표 함수를 사용하면 함수를 정말 간결하게 작성할 수 있다.

const add = (a,b) => a+b;

이런식으로 사용되는데 화살표 함수를 중괄호로 감싸지 않으면 오른쪽의 계산 결과가 반환된다. 

const add = a => a+b;

 

매개변수가 하나라면 매개변수를 감싸는 소괄호도 생략할 수 있다.

const addAndReturnObject = (a,b) => ({return: a+b})

객체를 반환해야 한다면 소괄호로 감싸야 한다.

 

화살표 함수의 코드가 여러줄인 경우

const add = (a,b) => {
  if(a <0 || b<= 0) {
    throw new Error('must be position number');
  }
  return a+b;
}

화살표 함수에 여러 줄의 코드가 필요하다면 이와 같이 전체를 중괄호로 묶고 반환값에는 return이라는 키워드를 사용함 된다.

그리고 ES6는 this 바인딩 때문에 버그가 발생하는 경우 화살표 함수를 사용하면 그 버그를 제어할 수 있다.

function Something() {
  this.value = 1;
  this.increase = () => this.value++;
}

const obj = new Something();
obj.increase();
console.log(obj.value);

const increase = obj.increase;
increase();
console.log(obj.value);

화살표 함수의 increase의 this는 가장 가까운 일반 함수인 Something의 this를 참조한다. Something 함수는 생성자이고 밑에 obj 객체가 생성될 때 호출된다. new 키워드를 이용해서 생성자 함수를 호출하면 this는 생성되는 객체를 참조한다는 점에 유의하자. increase함수의 this는 생성된 객체를 가르킨다. 그러니 호출되는 시점의 객체와는 무관하게 increase함수의 this는 항상 생성된 객체를 참조하고 obj.value는 계속 증가한다.