함수 선언식과 표현식의 차이점(일반 함수와 화살표 함수의 차이점은?)

함수 표현식과 선언식에 대해서

전역 컨텍스트가 활성화 될 때 전역공간에 선언된 함수들이 모두 가장 위로 끌어올려진다. 동일한 변수명에 서로 다른 값을 할당할 경우 나중에 할당한 값이 먼저 할당한 값을 덮어씌운다. 즉, 함수 표현식의 같은 이름을 가진 함수를 사용시 나중에 할당한 함수가 실행된다. 그렇게 되면 다른 값이 나온다.

함수표현식으로 정의했다면? 그렇다면 그 줄에서 에러가 검출되어서 디버깅이 쉽다는 장점이 있다.

function a () {} //함수 선언식

let foo = a; //함수 표현식

일반 함수와 화살표 함수의 차이점은?

1. this

일반함수 : 자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 아래는 일반 함수에서 this가 바인딩 되는 상황이다.

1. 함수 실행시에는 전역(window) 객체를 가리킨다.
2. 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
3. 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

화살표함수 : 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this) 또한, call, apply, bind메소드를 사용하여 this를 변경할 수 없다.

2. 생성자 함수로 사용 가능 여부

일반함수 : 일반함수는 생성자 함수로 사용할 수 있다.

화살표함수 : 화살표함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.

3. arguments 사용 가능 여부

일반함수 : 일반 함수에서는 함수가 실행 될 때, 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.

화살표함수 : arguments 변수가 전달되지 않는다.