[JS] function keyword vs arrow function

1. 함수 선언 방식

함수 선언 방식에는 크게 function 키워드를 사용하는 방식과 화살표 함수 방식으로 나눌 수 있다.

1. function 키워드 사용

function temp() {
	console.log('temp');
}

2. 화살표 함수 사용

const temp = () => {
	console.log('temp');
}

document.querySelector('.temp').addEventListener('click', ()=>{
	console.log('click');
})

위 처럼 함수를 자유롭게 사용할 수 있다.

2. 차이점?

화살표 함수는 ES6 문법에서 새롭게 탄생한 함수 표현 방식이다.

화살표 함수가 기존의 function 키워드를 이용한 방식을 대체할 수 있을까?

두 방식이 정확히 같지 않기 때문에 완전히 대체할 수는 없다.

어떤 점에서 다른지 알아보자.

서로 가리키는 this의 값이 다르다.

hoisting에 관련해서도 차이가 있지만 여기선 다루지 않겠다.

1. function 키워드 사용

function person() {
  this.name='홍길동';
  return {
    name: '고길동',
    intro: function() {
      console.log('my name is' + this.name);
    }
  }
}


/* console >> my name is 고길동 */

2. 화살표 함수 사용

function person() {
  this.name='홍길동';
  return {
    name: '고길동',
    intro: () => {
      console.log('my name is' + this.name);
    }
  }
}

/* console >> my name is 홍길동 */

console에 찍힌 문자열을 보면 this.name의 결과다 다르다는 것을 알 수 있다.

3. 결론

일반 함수, function 키워드를 사용하여 함수를 표현하면 this는 자신이 종속된 객체를 가리키고, 화살표 함수를 사용하여 함수를 표현하면 this는 자신이 종속된 인스턴스를 가리킨다.