/ JAVASCRIPT

화살표 함수와 일반함수의 차이

JavaScript 관련 글입니다.




화살표함수?

ES6에 추가된 함수를 표현할 때 사용할 수 있는 다른 방식입니다. 조금 더 간결하게 함수를 정의할 수 있습니다.

// 화살표함수 (arrow function)
const arrowfun = () => {
    ~
}

일반 함수와의 차이

일단 크게 3가지가 있습니다.

1) this의 차이

일반함수는 함수가 호출될 때 this의 값이 동적으로 결정이 됩니다.

그 값은 상황에 따라 다른데,

  1. 그냥 함수를 실행했을 경우에는 전역객체(window)를 가리킴.
  2. 객체 안의 메소드안에 this를 사용했을 경우 그 메소드를 가지고 있는 객체를 가리킴.
  3. 생성자안에서 실행했을 경우 새롭게 만들어지는 객체, 즉 인스턴스를 가리킴.
  4. 이벤트리스너에서 사용했을 경우 e.currentTarget을 가리킴.

그러나 화살표함수의 경우는 함수를 선언할 때 this값이 정적으로 결정이 됩니다. 화살표함수에서 this는 언제나 상위스코프의 this를 가리킵니다.

2) 생성자 함수로 사용이 가능한가

일반함수와 다르게 화살표함수는 생성자함수로 사용할 수 없습니다.

const arrowFun = () => {
    this.name = 'kim'
}

const kim = new arrowFun(); // Error

3) arguments를 사용할 수 있는가?

일반함수에서는 arguments변수를 사용할 수 있다.

function 함수() {
    console.log(arguments);
}

그러나 화살표함수에서 사용하면 에러가 발생합니다.



End.