자바스크립트 | arrow function +(화살표 함수에서의 this)

Chloe K·2022년 6월 30일
0
post-thumbnail

arrow (화살표) 함수 표현법

  • 화살표 함수는 ES6에 도입된 함수 표현법이다.
  • 보다 간단하게 함수를 표현할 수 있다.
  • 화살표 함수는 항상 익명함수이다.
  • return 명령어 없이도 함수 실행을 종료시키고 값을 반환한다.

화살표함수와 일반함수의 차이

일반함수

  • 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. (함수 실행시에는 전역 window 객체를 가리킨다) 📌this에 대한 내용은 다음에 deep하게 다룰 예정
  • 일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

화살표함수

  • 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
  • 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
  • call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
<script>
//일반함수 화살표함수 차이

function fun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {
      console.log(this.name);
    },
  };
}

function arrFun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {
      console.log(this.name);
    },
  };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

</script>

설명
func1 함수

  1. func1.speak() 함수를 호출한다.
  2. func1에 의해서 speak 함수가 호출됐다 즉, speak 함수의 this는 func1 (this는 나를 누가 호출했는가에 의해서 결정된다. *화살표함수 예외)
  3. 그래서 func1 함수 내의 객체 '하이' --> '바이'로 할당되었으므로 '바이'출력

func2 함수

  1. func2.speak() 함수를 호출한다.
  2. func2에 의해서 speak() 함수가 호출됐다. 하지만 speak 함수는 화살표 함수로 표현되었다. 그러므로 상위 스코프에게 this를 계승 받아서 '하이'를 출력한다.
profile
Frontend Developer

0개의 댓글