자바스크립트 this에 대해서

Question

Javascript 공부를 하던 중에 궁금한 것이 생겨서 질문 남깁니다.
아래의 코드에서 일반 function으로 정의했을때는 this가 window로 설정되고 Arrow function으로 정의했을때는 undefined로 나오는 이유가 뭔가요?

const x = 10;

setTimeout(function test() {
  console.log(this); // Window 객체
  console.log(x); // 10
}, 1000);

setTimeout(() => {
  console.log(this); // undefined
  console.log(x); // 10
}, 1000);

이재린 · Answer

일반 함수(함수 선언문, 함수 표현식)로 호출했을 때의 this와 화살표 함수로 호출했을 때 this가 가리키는 객체가 다르기 때문입니다.
일반 함수로 함수를 호출했을 때 this는 전역 객체를 가리킵니다. 
하지만 화살표 함수로 함수를 호출했을 때엔 호출된 자신의 함수의 상위 스코프의 this를 참조합니다.

현재 setTimeout 콜백함수로 선언된 화살표 함수는 전역 스코프에 선언되어있습니다. 
전역이 최상단이기 때문에 전역의 상위 스코프는 존재하지 않습니다. 그렇기 때문에 undefined를 반환하는 것입니다.

누군가를 이해할 수 있도록 명쾌한 답변을 드리고 싶으나 제 실력의 한계인것같습니다ㅠㅠ
스코프에 대한 내용을 이해하시면 금방 이해하실 수있을거에요!

유근수 · Answer

두번째 예제.. window가 찍히는거 같은데요; 😮

mdn arrow function 설명에 질문 주신 내용이 살짝 나오는데요. 이것만 봐서는 이해가 힘드실 수도 있는거 같고,

저는 코어 자바스크립트 라는 책을 좀 추천드리고 싶네요.
상세하고 친절하게 잘 설명되어 있어요~