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

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

자바스크립트에서 화살표 함수(Arrow Function)와 일반 함수(Regular Function)은 몇 가지의 차이점을 가지고 있다.

 

문법적 차이

화살표 함수

• 화살표 함수는 더 간결한 문법을 사용한다.

const add = (a, b) => a + b;

 

일반 함수

• 일반 함수는 'function' 키워드를 사용하여 정의한다.

function add(a, b) {
    return a + b;
}

 

this 바인딩

화살표 함수

• 화살표 함수는 자신만의 this 바인딩을 가지지 않는다.
• 대신, 화살표 함수는 자신이 정의된 위치의 'this' 값을 상속받는다.
• 이를 렉시컬 스코핑(lexical scoping)이라고 한다.

const obj = {
    value: 42,
    arrowFunction: () => {
    	console.log(this.value);
    }
};
obj.arrowFunction(); // undefined

 

일반 함수

• 일반 함수는 호출된 방식에 따라 this 값을 동적으로 바인딩한다.

const obj = {
    value: 42,
    regularFunction: function() {
    	console.log(this.value);
    }
};
obj.regularFunction(); // 42

const func = obj.regularFunction;
func(); // undefined. 여기서 this는 global 객체이다

arguments 객체

화살표 함수

• 화살표 함수는 arguments 객체를 가지지 않는다.
• 대신, 상위 스코프의 arguments를 참조한다.

function regularFunction() {
	const arrowFunction = () => {
    	console.log(arguments); // regularFunction의 arguments를 참조
    }
    arrowFunction();
};
regularFunction(1, 2, 3); // [Arguments] {'0': 1, '1': 2, '2': 3}

 

일반 함수

• 일반 함수는 호출 시 전달된 인수를 배열과 유사한 객체인 arguments 객체로 접근할 수 있다.

function regularFunction() {
    console.log(arguments);
};
regularFunction(1, 2, 3); // [Arguments] {'0': 1, '1': 2, '2': 3}

생성자 함수

화살표 함수

• 화살표 함수는 생성자 함수로 사용할 수 없다.
• 즉, new 키워드와 함께 사용할 수 없다.

const ArrowFunction = () => {};
const instance = new ArrowFunction // TypeError: ArrowFunction is not a constructor

 

일반 함수

• 일반 함수는 생성자 함수로 사용할 수 있으며, new 키워드와 함께 사용하여 인스턴스를 생성할 수 있다.

function RegularFunction() {
    this.value = 42;
}

const instance = new RegularFunction();
console.log(instance.value); // 42

메소드 정의

화살표 함수

• 객체 메소드로 정의된 화살표 함수는 'this'가 의도한 객체를 가리키지 않을 수 있다.

const obj = {
    value: 42,
    method: () => {
    	console.log(this.value); 
    }
};
obj.method(); // undefined, 'this'가 obj에 바운드되지 않음

 

일반 함수

• 일반 함수는 객체 메소드로 정의될 때, 'this'가 해당 객체를 가리킨다.

const obj = {
    value: 42,
    method: function() {
    	console.log(this.value);
    }
};
obj.method();  // 42

 

 

요약

문법

화살표 함수는 간결하다.

 

this 바인딩

화살표 함수는 자신이 정의된 위치의 'this'를 상속받고, 일반 함수는 호출 시점에 따라 'this'가 바인딩된다.

 

arguments 객체

화살표 함수는 arguments 객체를 가지지 않으며, 일반 함수는 arguments 객체를 가진다.

 

생성자 함수

화살표 함수는 생성자로 사용할 수 없지만, 일반 함수는 생성자로 사용할 수 있다.

 

메소드 정의

화살표 함수는 메소드로 사용할 때 'this'에 대한 주의가 필요하고 일반 함수는 메소드로 사용하기에 적합하다.