[TIL] 210723 오늘 공부는 this와 화살표 함수

TIL을 쓰는 날짜가 하루씩 밀리는 것은 기분탓이다(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

어찌됬든 일주일에 5번쓰면 되니깐~~ \(@^0^@)/ 껄껄

 

arrow function을 쓰면서 나는 오 function 키워드 쓰는 시간도 아끼라고 ES6에 좋은 문법이 나왔구나~ 라고만 생각했다 ㅎ 무식하면 용감하고 밝다 ㅎㅎㅎ

this 챕터를 스터디 하면서 화살표 함수가 this를 바인딩 하지 않는다고 스치듯이 지나갔는데, 조금 더 구체적으로 알고 싶었다. 

 

화살표 함수에는 this가 없다

함수 내부에서 this는 window로 결정되기 때문에 우리는 this를 바꿔주기 위해 call, apply, bind 메서드를 통해 첫번째 매개변수로 this를 정해줬다.

그러나 ES6에서는 호출된 방식과 상관 없이, 화살표 함수를 쓰면 this는 상위 스코프의 this로 자동으로 바인딩 되어버린다. 이게 좋은걸까 나쁜걸까를 알고 싶었는데,

좋은거 아닌가? 상위 스코프의 this를 바로 받고 싶으면 메서드 쓸 수 없이 화살표 함수로 써주면 간단하게 쓸 수 있고, 다른 객체로 바인딩 하고 싶을때만 메서드를 쓰면 되니깐?

 

객체의 메서드로는 화살표 함수를 쓸 수 없다.

꼬인다. 객체의 메서드는 객체가 this가 되어야하는데, 화살표 함수는 상위 스코프의 this를 정하니 충돌이 발생할 수 있다 undefined undefined undefined 를 만나게 될 수 있다.

 

화살표 함수는 bind, call, apply의 사용이 의미가 없다.

 this가 요로코롬 결정되니, bind 메서드를 사용하여 새로운 this를 정해주고 싶어도 화살표 함수에는 먹지 않는다. 지조있는 녀석이다.

따라서 this를 다른 객체로 바인딩해주고 싶을때는 일반 익명함수를 쓰는 것이 좋다. 

 

코드예제와 자세한 것은 이 포스팅에서 볼 수 있습니다.