화살표함수 vs 일반함수

1. 함수 최소화

일반함수와 달리 일부 내용을 생략하여 축약형으로 함수 최소화가 가능합니다.

화살표 함수의 축약

• 실행문을 제외하고 {}와 return을 생략해줄 수 있습니다.
• 단, return 키워드 앞에 특정 로직이 들어 있다면 축약이 어렵습니다.
• 매개변수가 1개인 경우에는 ()도 생략을 해줄 수 있습니다.
• 단, 실행문 부분을 {}로 감싸게 되면 실행문이 반환될 수 없습니다. 반환하기 위해서는 반드시 return 키워드를 써야합니다.

2. this

아래 코드를 살펴보면 기본적인 로직은 똑같지만 일반함수로만든 normal 값과 arrow값이 다르게 출력되는 것을 확인할 수 있습니다. 이는 화살표함수와 일반함수에서의 this가 다르기 때문입니다.

const Yseo = {
  name: '0seo',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
  console.log(this.name)
  }
}
Yseo.normal() //noraml함수가 호출될 때 연결되어 있는 객체가 Yseo이기 때문에 this는 "0seo"가 됩니다
Yseo.arrow() // undefined : 호출위치와 상관 없이 함수 범위에서 this가 정의됩니다.(즉, 화살표함수가 만들어지는 위치에서 정의됩니다.)

일반(Normal) 함수는 "호출 위치"에 따라 this 정의

• 화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의
• 화살표 함수는 콜백 함수 내에서 this가 정의되지 않으면, window 전역 객체로 설정

예제

const timer = {
  name: '0seo!',
  timeout: function () {
    setTimeout(function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // undefined

아래 코드의 경우 timeout이 호출된 위치가 setTimout이라는 함수 내부이기 때문에 this.name은 undefined가 출력되게 됩니다. 따라서 timer의 name을 출력하고 싶었다면 코드를 아래와 같이 일반함수가 아닌 화살표함수로 수정해야합니다.

const timer = {
  name: '0seo!',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // 0seo! (2초 뒤)

setTimeout 또는 setInterval과 같은 타이머 함수를 실행시키는 경우 콜백함수로는 일반함수보다는 화살표함수를 사용하는 것이 활용도가 높습니다.