화살표 함수와 일반 함수(function)의 차이

// 일반 함수
function function1() {
	...
}

// 화살표 함수
const function2 = () => {
	...
};

결론부터 말하자면 다음과 같은 차이가 존재한다.

• this의 역할
• 생성자 함수로 사용 불가능(prototype 프로퍼티가 없음)
• arguments 변수가 암묵적으로 전달되지 않음

이중 가장 큰 차이는 this이다. this는 어떤 방식으로 실행하느냐에 따라서 역할이 구분된다. 크게 4가지 방식이 존재한다.

1. 일반 함수 실행 방식(기본 바인딩)

• 함수 실행시에는 전역(window) 객체를 가리킴
• 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킴
• 생성자 실행시에는 새롭게 만들어진 객체를 가리킴
• 일반 함수 실행 방식으로 this를 호출 시 Global Object(브라우저에서는 window 객체)를 가르킴

2. 암시적 바인딩

• 어떤 객체를 통해 함수가 호출되면 그 객체가 this의 context 객체가 됨

3. 명시적 바인딩

• 함수 객체가 가진 call, apply, bind 메소드를 사용시 첫번째 인자로 넘겨주는 것이 this. context 객체가 됨

4. new 바인딩

• new 키워드로 생성자 함수를 만들어 사용 시, this는 빈 객체가 됨

여기서 일반 함수 실행 방식은 this = Global Object가 성립하지만, 화살표 함수를 사용하는 경우에는 화살표 함수가 선언된 부분 스코프의 this context를 this context로 사용한다. 즉 화살표 함수의 this는 상위 스코프의 this를 가리킨다.

function func() {
  this.scope = '상위'
  return {
    scope: '하위',
    callScope: function () {
      console.log(this.scope)
    },
  }
}

function arrFunc() {
  this.scope = '상위'
  return {
    scope: '하위',
    callScope: () => {
      console.log(this.scope)
    },
  }
}

const function1 = new func()
fun1.callScope() // 하위

const function2 = new arrFunc()
fun2.callScope() // 상위