function || AllowFunction 차이

둘의 차이를 알기에 앞서 우선 바인딩을 알아보자.

Binding

메서드와 객체를 묶어놓는 것을 바인딩

함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다.
바인딩은 정적 바인딩(static binding)과 동적 바인딩(dynamic binding)으로 구분할 수 있다.

정적 - 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지.
동적 - 실행 시간에 이루어지거나 실행 시간에 변경됨.

 

Function || AllowFuction

1.this

Function

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

 

AllowFuntion

화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical 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. 생성자 함수로 사용 가능 여부

Function

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

AllowFuntion
화살표 함수는 생성자 함수로 사용할 수 없다. 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 사용 가능 여부

Function

일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능

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

fun(1, 2, 3);

AllowFuntion

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

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

fun(1, 2, 3);