자바스크립트 화살표 함수 정리

함수 선언식 - 함수 호이스팅 발생, arguments 존재 (파이썬의 *args와 비슷) 

function main() {
  console.log("working")
  console.log(arguments[1]) // 3
}

main(2, 3, 4)

 

함수 표현식 - 익명 함수를 만드는 경우에 사용. 함수 호이스팅 x

const main = function() {
  console.log("working")
}

 

화살표 함수 - 익명 함수를 변수에 할당하는 위의 함수 표현식과 동일, arguments 존재 x

const main = () => {
  console.log("working")
}

// ...을 사용해서 가변인자를 받음
const main = (...args) => {
  console.log(args[1]) // 3
}

main(2, 3, 4)

일반 함수의 this - 함수의 호출 방식에 따라 달라지며 

화살표 함수의 this - 함수의 호출 방식과 상관 없이, 항상 함수가 선언된 위치의 상위 스코프의 this를 바인딩한다.

const obj = {
  name: "유자차",
  main1: () => {
    console.log(this)
  },
  main2: function () {
    console.log(this)
  }
};

// 화살표 함수: main1의 상위 스코프는 window에 바인딩 된다.
obj.main1 // window 객체

// 일반 함수: obj에 바인딩 된다.
obj.main2 // {name: "유자차", main1: f, main2: f}

const obj = {
  name: "유자차",
  main1: function () {
    setTimeout(() => {
      console.log(this)
    }, 1000);
  },
  main2: function () {
    setTimeout(function() {
      console.log(this)
    }, 1000);
  }
};

// 화살표 함수: 함수가 선언된 상위 스코프인 main1의 this가 바인딩 된다. main1의 this는 obj에 바인딩 된다.
obj.main1 // {name: "유자차", main1: f, main2: f}

// 일반 함수: setTimeout에 this가 바인딩 된다.
obj.main2 // window 객체

제가 이해한 바로는 위처럼 작동을 하는데 혹시나 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다!