함수 질문

document.querySelectorAll(".btn").forEach(btn => {
  btn.addEventListener("click", () => {
    console.log(this.textContent);
  });
});

위 코드에서 이벤트 콜백함수를 화살표 함수로 하면 콘솔에 undefined가 뜹니다.

그런데 강의처럼 function()으로 하면 가위, 바위, 보 모두 잘 뜹니다.

둘 다 같은건데 왜 결과가 다른건가요??