function선언과 화살표 함수의 this 바인딩 차이를 가장 간단하게 깨닫는 법

Gomi·2022년 4월 23일
0

🙃 function식과 화살표함수의 차이...?

초심자들이 화살표함수를 배우면 가장 먼저 드는 의문이지만, ㅠㅠ
대부분의 선생님과 레퍼런스들은 초심자에게 당장 이 둘의 차이를 가르쳐주지는 않을것이다. (아마도)
학습자나 교수자가 일단 생산성을 늘이고 나중에 구멍을 메우는 식의 학습을 좋아한다면 더더욱....
이건 그냥 경험담이다. 나의 경우는 차이가 없다고 생각하라는 대답을 들었던 것 같다.
누군지는 기억이안나지만...ㅋㅋ


  최근에서야 자바스크립트를 좀 깊게(?) 배울 기회가 생겨서 기초공사를 하게되었다.
사실 호기심이 조금이라도 있고, 검색하는 방법을 안다면 바로 MDN에 대문짝만하게 걸려있는 화살표 함수의 차이점을 볼 수 있을 것이다.


  • this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
  • new.target키워드가 없습니다.
  • 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
  • 생성자(Constructor)로 사용할 수 없습니다.
  • yield를 화살표 함수 내부에서 사용할 수 없습니다.

 공통적으로 화살표함수의 제약사항은 this에 대한 바인딩이 없는 것에서 온다. 따라서 함수의 제어권을 외부로 넘기는 모든 행위들에 제약이 붙는다.

 가장 간단하게 알아볼 수 있는 예제는 object내에 함수선언을 해 보는 것이다. class나 setTimeout을 통한 예제도 있지만 예제는 간단한게 제일 좋은 것 같다.

const obj = {
	name: "gomi",
  	getName: function(){return this.name},
  	getNameArrow: ()=>this.name
}

console.log(obj.getName())//1
console.log(obj.getNameArrow())//2

1(getName)은 이름이 정상 출력되지만 2(getNameArrow)는 이름이 출력되지 않는다. 이는 function식 선언은 함수의 호출 환경을 this로 바인딩 하지만 화살표 함수는 함수가 선언된 환경을 둘러싼 렉시컬 범위(lexical scope)만 정적으로 기억하기 때문이다....라는게 MDN식 설명이고, function이 확인하는 범위와 화살표 함수가 확인하는 범위를 각각 보자.

function식 선언 의 this가 참조하는 범위. 함수가 호출될 때 obj.getName처럼 obj를 거쳐야 하기 때문에 그 환경을 참조한다.

반면 화살표함수는 함수가 선언될때 딱 그 범위만을 정적으로 기억해서 호출 시 사용한다.

이를 응용해서 setTimeout, class등의 예제도 설명 가능하다.

profile
터키어 배운 롤 덕후

0개의 댓글