[JS] 일반 함수와 화살표 함수의 차이

💡 화살표 함수(Arrow Function)란

화살표 함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한 표현으로 간단하게 사용 가능하다.

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

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

 

---

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

 

1️⃣ this

 

✅ 일반함수

자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this 라는 객체가 추가된다.

 

▪️ 함수 실행시에는 전역(window) 객체를 가르킨다.

▪️ 메소드 실행시에는 메소드를 소유하고 있는 객체를 가르킨다.

▪️ 생성자 실행시에는 새롭게 만들어진 객체를 가르킨다.

 

일반함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,

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

function fun() {
	this.text = 'Hi';
    return {
    	text: 'Bye',
        speak: function() {
        	console.log(this.text);
        }
    };
}

const funA = new fun();
funA.speak(); // Bye

 

✅ 화살표 함수

 

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

화살표 함수의 this는 언제나 상위 스코프의 this를 가르킨다. (Lexical this)

또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

function arrFun() {
	this.text = 'Hi';
    return {
    	text: 'Bye',
        speak: () => {
        	console.log(this.text);
        }
    };
}


const funA = new arrFun();
funA.speak(); // Hi

 

 

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

 

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

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

 

function fun() {
	this.num = 123;
};

const arrFun = () => {
	this.num = 123;
};

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

const funB = new arrFun(); // TypeError: arrFun is not a constructor

 

 

3️⃣ arguments 사용 가능 여부

 

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

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

 

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

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

fun(1, 2, 3);
arrFun(1, 2, 3);

일반함수는 arguments 변수가 전달되어 로그에 [1, 2, 3] 이 출력 되지만

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

 

 

 

📌 참고자료

 

javascript ::: 화살표 함수 다시 살펴보기

poiemaweb ::: 화살표 함수