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

화살표 함수(Arrow Function)

화살표 함수는 ES6에서 새로 추가되었다. 기존 함수 표현식과 비교하면 간단하게 사용 가능하다.
화살표 함수는 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다.
익명함수 MDN

function fun() { // 일반함수
	...
}

const arrFun = () => { // 화살표 함수
	...
};

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

우선 바인딩이란, 함수 호출과 실제 함수를 연결하는 방법이다.
함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다.
바인딩은 정적 바인딩(static binding)과 동적 바인딩(dynamic binding)으로 구분할 수 있다.
정적 - 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지.
동적 - 실행 시간에 이루어지거나 실행 시간에 변경됨.

1. this

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

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

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

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

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(); // 하이

일반 함수로 사용했을 때는 바이가 찍히고 화살표 함수를 사용했을 때는 하이가 찍힌다.
일반 함수는 자신이 종속된 객체를 this로 가리키고 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

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

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

function fun() {
	this.num = 1234;
}
const arrFun = () => {
	this.num = 1234;
};

const funA = new fun();
console.log(funA.num); // 1234

const funB = new arrFun(); // Error

3. arguments 사용 가능 여부

❗️일반 함수에서는 한수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능
❗️화살표 함수에서는 arguments 변수가 전달되지 않는다.

function fun() {
	console.log(arguments); // Arguments(3) [[1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

fun(1, 2, 3);

일반 함수는 arguments 변수가 전달되어 [1, 2, 3]이 찍히지만

const arrFun = () => {
	console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);

화살표 함수는 arguments를 정의할 수 없다고 뜬다.