function과 arrow function의 차이점

 

1.

일반 function은 this가 동적으로 바인딩 되지만,

ex)

function test () {
	//
	return{
    	//
        prop:10,	
        func: function(){
        	//
	        return this.prop;
    	};
    };
};

console.log(test.call({prop:100}).func()); 는 10이 출력된다.(매개변수 무시, 기존 값 출력)

 

Arrow function의 this 키워드는 바로 상위의 함수에 정적 바인딩 된다.

ex)

function test(){
	//
    return{
		//
    	prop:10,
        func: () => {
			//
	        return this.prop;
        };     
    };
};

console.log(test.call({prop:100}).func()); 는 100이 출력된다.(기존 값 무시, 매개변수로 들어온 값 출력)

 

즉, 화살표 함수는 선언된 시점에서 this를 확보한다.

2.

일반 함수는 애로우 펑션으로 생성 가능하지만, 생성자 함수는 애로우 펑션으로 사용할 수 없다.

ex)

function User(name){
	this.name=name; 
    this.admin=false;
}
let user = new User('asd');

3.

일반함수에선 함수가 실행될 때 암묵적으로 arguments가 전달될 수 있지만, 애로우 펑션에선 전달되지 않는다.