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

먼저 일반 함수에 대해서 알아보자면

 

1. this 동작

일반 함수는 호출되는 방법에 따라 'this' 가 동적으로 바뀔 수 있습니다. 메소드로 호출되면 주로 객체를 가르키고, 단독으로 호출되면 전역 객체를 가리킬 수 있습니다.

function example() {
  console.log(this);
}

const obj = {
  method: example,
};

obj.method(); // obj를 가리킴
example();    // 전역 객체를 가리킴 (브라우저에서는 window)

 

2. 생성자 함수

일반 함수는 생성자로 사용될 수 있습니다. 생성자 함수는 'new' 키워드로 객체를 생성할 때 사용됩니다.

function Person(name) {
  this.name = name;
}

const person = new Person("John");

 

3. 함수 선언과 표현

함수 선언문과 함수 표현식은 함수를 정의하는 방법 중 두 가지입니다.

// 함수 선언문
function add(a, b) {
  return a + b;
}

// 함수 표현식
const subtract = function (a, b) {
  return a - b;
};

 

---

 

화살표 함수에 대해서 알아보자

 

1. 간결한 문법

화살표 함수는 더 간결한 문법을 제공합니다.

// 일반 함수 표현식
const add = function (a, b) {
  return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

 

2. 'this' 의 동작

화살표 함수는 자체적인 'this'를 가지지 않고, 주변 스코프의 'this'를 캡쳐합니다. 이는 주로 이벤트 핸들러나 콜백 함수를 작성할 때 유용합니다.

function Counter() {
  this.count = 0;
  setInterval(() => {
    // 여기서의 this는 Counter 인스턴스를 가리킴
    this.count++;
    console.log(this.count);
  }, 1000);
}

const counter = new Counter();

 

3. 매개변수 표현

화살표 함수는 매개변수가 하나뿐이라면 괄호를 생략할 수 있습니다.

const square = x => x * x;

 

---

 

함수를 선택하는 것은 사용하려는 문맥과 목적에 따라 달라집니다.

화살표 함수와 일반 함수 각각의 장단점에 대해서 알아보자.

 

일반 함수

 

장점 :

1) 'this'의 다양한 동작

- 일반 함수는 호출 방식에 따라 'this' 가 동적으로 바뀔 수 있습니다. 이는 메소드로 사용될 때 객체를 가리키게 하거나, 생성자 함수로 사용하여 인스턴스를 생성하는 등 다양한 상황에서 활용될 수 있습니다.

2) 메소드를 사용할 때 객체에 더 가까움

- 객체의 메소드로 사용될 때, 일반 함수는 해당 객체를 가리킵니다. 이는 메소드에서 객체의 속성에 쉽게 접근할 수 있다는 장점이 있습니다.

 

단점

1) 문법이 더 복잡

- 화살표 함수에 비해 일반 함수의 문법은 더 복잡합니다. 특히 간단한 함수를 작성할 때에는 코드 양이 많아질 수 있습니다.

2) 'this' 실수 가능성

- 일반 함수에서는 'this' 동작에 대한 혼란이 있을 수 있고, 실수로 우너치 않은 'this'를 사용할 수 있습니다.

 

---

 

화살표 함수

 

장점 :

1) 간결한 문법

- 화살표 함수는 보다 간결한 문법을 제공하므로 간단한 함수나 콜백 함수를 작성할 때 코드를 줄일 수 있습니다.

2) 'this'의 동작

- 화살표 함수는 자체적인 'this'를 가지지 않고 주변 스코프의 'this'를 캡쳐하므로, 함수 내에서 'this'가 변경되는 일이 없습니다. 이는 특히 콜백 함수를 다룰 때 유용합니다.

 

단점

1) 메소드를 사용할 때 주의

- 객체의 메소드로 사용할 때, 화살표 함수는 해당 객체를 가리키지 않고 주변 스코프의 'this'를 사용합니다. 따라서 메소드에서 객체의 속성에 접근해야 하는 경우에는 일반 함수를 사용하는 것이 좋습니다.

 

 

---

 

언제 어떤 함수를 사용하는게 좋을까요?

 

일반 함수

• 객체의 메소드로 사용할 때, 메소드 내부에서 해당 객체를 참조하는 것이 중요한 경우에는 일반 함수를 사용합니다.
• 객체 인스턴스를 생성하기 위해 사용되는 생성자 함수로 사용할 때, 일반 함수를 활용합니다.
• 함수가 호출될 때 동적으로 this가 바뀌어야 하는 경우, 일반 함수를 사용합니다.

화살표 함수

• 간단한 함수나 콜백 함수를 간결하게 표현하고자 할 때, 화살표 함수를 사용합니다.
• 'this'의 동작을 주변 스코프에서 가져오는 방식으로 피하고자 할 때, 화살표 함수를 사용합니다.
• 함수를 변수에 할당하거나 익명 함수로 사용할 때, 화살표 함수를 활용하여 간결하게 표현할 수 있습니다.

 

어떤 것을 사용해야 할지 결정하는 데 있어 엄격한 규칙은 없지만 더 좋은 코딩을 하기 위해서는 고려하면서 코딩하자!