[JS] ES6 화살표 함수와 기본 함수의 차이점을 알아보자

ES6문법 중에 화살표 함수 기능이 추가되었습니다. 

숫자 두 개를 받아서 더하는 함수를 만들어 설명해보겠습니다.

//ES5
let add = function(a,b){
    return a+b;
}
function add(a,b) {
	return a+b;
}

//ES6
let add = (a,b) =>{
    return a+b;
}

기본 함수에 비해 화살표 함수가 조금 더 간결하게 보입니다. 그럼 "기본 함수를 쓰는 것보다 화살표 함수를 쓰는 게 간결하고 보기가 편하니까 모두 화살표 함수를 쓰자"라고 하실 수 있겠지만, 큰 차이점이 있습니다. 

---

바로 this입니다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 함수 내부에서 this를 생성하지 않고 this를 사용하면 외부 함수 즉, 상위 스코프의 this 값을 가져옵니다. 때문에 화살표 함수를 작성할 때 함수 안에 클래스 메서드를 생성할 때 사용하기에는 적절하지 않습니다.  

// Bad
//this.name = "sungmin"; <-주석을 풀면 여기를 가르킵니다.
const person = {
  name: 'Sungmin',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

위의 코드를 참고하여 설명해보겠습니다. 메서드로 정의한 화살표 함수 내부의 this는 메서드를 소유한 객체, 즉 메서드를 호출한 객체를 가리키지 않고 상위 스코프의 this 값를 가리킵니다. 따라서 화살표 함수로 메서드를 정의하는 것은 바람직하지 않습니다.

// Good
const person = {
  name: 'Sungmin',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Sungmin

이런식으로 작성하는 방법이 좋습니다.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아닙니다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

 

결론적으로 객체지향적으로 코드를 작성할 때는 화살표 함수보다 기본 함수로 작성하는 방법이 좋겠네요.