[JavaScript] 일반 함수와 화살표 함수의 차이점?

화살표 함수란? 

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

 

화살표 함수는 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다.

 

❗️하지만 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없다.

 

- this, arguments나 super에 대한 자체 바인딩이 없고, methods로 사용해서는 안된다. 

(이 외에도 제한점이 많은데 자세한건 MDN 사이트에서 확인 가능하다.)

---

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

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

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

 

---

차이점을 알아보기 전에 *바인딩에 대해 먼저 간단한 설명을 하고자 한다.

 

*바인딩이란?

• 함수 호출과 실제 함수를 연결하는 방법이다.
• 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다.

👉🏻 바인딩은 정적 바인딩(static binding)과 동적 바인딩(dynamic binding)으로 구분할 수 있다.
정적 - 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지.
동적 - 실행 시간에 이루어지거나 실행 시간에 변경됨.

---

1. this

 

💙 일반함수

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

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

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

💚 화살표 함수

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

 

ex)

function fun() {
	this.name = "하이";
    return {
    	name: "바이",
        speak: function () {
        	console.log(this.name);
        },
    };
}

function arrow() {
	this.name = "하이";
    return {
    	name: "바이";
        speak: () => {
        	console.log(this.name);
        },
    };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrow();
fun2.speak(); // 하이

 

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

---

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

💙 일반함수

- 생성자 함수로 사용할 수 있다.⭕️

 

💚 화살표 함수

- 생성자 함수로 사용할 수 없다.❌ prototype 프로퍼티를 가지고 있지 않기 때문이다.

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

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

const funB = new arrow(); // => 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 arrow = () => {
  console.log(arguments); // Uncaught ReferenceError: arguments is not defined
};

fun(1, 2, 3);

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

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://velog.io/@yjh8806/화살표-함수와-일반-함수의-차이