함수를 선언할 때 질문

[yangbooom]

//case 1
const foo = n => n+10;

//case2
const foo = function (n){
  return n+10;
}

//case 3
function foo(n){
  return n+10;
}

이 세가지 경우에 대해, case1과 case2는 수업시간에 this의 사용에 따라 다른 결과를 낼 수 있다고 해주셨는데요, 혹시 case2와 case3는 다른 기능을 하는지, 혹은 javascript 문법상 조금 더 자연스러운 것은 어떤 경우인지 설명해주실 수 있나요?

[realcom]

this에 대해서는 다음 수업시간에 좀 더 자세히 다뤄보도록 하겠습니다. 쓰신 예제에서는 1,2,3은 조금 취향 차이라고 보시면 됩니다.

this를 dynamic scope해서 써야될 때 arrow function을 대신 function을 쓰게됩니다. 과제에선 event binding이 그런 예시인데,

document.body.addEventListener('click', function (e) {
   console.log(this);
});

를 수행하면 this에 body가 할당됨을 알 수 있습니다. 해당 예시에서 arrow function을 사용하면 this가 window로 세팅되있음을 확인할 수 있습니다.