[JavaScript] ArrowFunction VS Function

1. 이름 정의

Arrow function

• 이름 정의 불가능
• 변수에 할당해서 사용
• 호이스팅이 일어나지 않는다

function

• 이름 정의 가능
• 변수에 할당없이 정의만으로 사용가능
• 변수 할당 없는 기명 함수 정의시 호이스팅이 일어난다

function의 호이스팅

//type 1
console.log(AnonymoustFunc()); // error

const AnonymoustFunc = function(){
    return 1;
}

//type 2
console.log(NamedFuncExpression()); // error

const NamedFuncExpression = function NamedFunc(){
    return 1;
}

//type 3
console.log(NamedFunc()); // 1

function NamedFunc(){
    return 1;
}

type1의 경우 변수에 할당한 익명함수표현식이다. 이와 같은경우 정의문을 제외하고 선언부만 상단으로 끌어올려지기 때문에 함수 실행시 error를 발생시킨다

type2의 경우 기명함수표현식이다. type1과 동일하게 선언부만 상단으로 끌어올려져 함수 실행시 error발생시킨다

type3의 경우 변수에 할당하지 않은 기명함수이다. 이와 같은 경우 함수 정의부까지 함수 전체가 상단으로 끌어올려지기 때문에 선실행시 함수실행하는것이 가능하다

function 함수의 경우 이런식으로 hoisting이 일어나는 경우가 있으나 arrow function의 경우 모두 익명함수표현식으로 사용되기 때문에 hoisting이 일어나지 않는다

2. this

Arrow function

• 전역 컨텍스트에서 실행할떄 this를 새로 정의하지 않는다
• 코드 바로 바깥의 상위 스코프영역을 가리키는 this로 사용한다

function

• 모든 함수가 자신만의 this를 새로 정의한다
• 함수별로 가리키는 this의 객체가 상이하다
  • 생성자 : 새로운 객체
  • strict 모드에서의 함수 : undefined
  • 객체 메서드 : base 객체
  • callback 함수 : 전역 객체 window