본문 바로가기
javascript

화살표 함수와 일반 함수는 각각의 장단점과 적절한 사용 시점

by momomoo 2024. 6. 26.

화살표 함수와 일반 함수는 각각의 장단점과 적절한 사용 시점이 있습니다. 따라서, 둘 중 하나를 선택할 때 상황에 따라 어떤 방식이 더 적합한지 판단하는 것이 중요합니다. 화살표 함수로 작성하기 어려울 때만 일반 함수로 구현하는 것이 반드시 더 나은 것은 아닙니다. 각각의 함수 스타일이 적절한 경우를 이해하는 것이 중요합니다.

### 화살표 함수
화살표 함수는 다음과 같은 경우에 유용합니다:
1. **간결한 문법**: 함수 본문이 짧고 간단할 때.
2. **`this` 바인딩**: 화살표 함수는 자신의 `this`를 가지지 않고, 상위 스코프의 `this`를 사용합니다. 이로 인해 콜백 함수나 메서드 내에서 `this`를 일관되게 유지할 수 있습니다.
3. **익명 함수**: 고차 함수의 인자로 전달되는 함수처럼, 간단한 함수가 필요할 때.

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

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
```

### 일반 함수
일반 함수는 다음과 같은 경우에 유용합니다:
1. **`this` 바인딩**: `this`가 필요하고, 화살표 함수의 `this` 바인딩이 적절하지 않을 때.
2. **메서드 정의**: 객체의 메서드를 정의할 때.
3. **재귀 함수**: 자기 자신을 참조해야 하는 함수.
4. **복잡한 논리**: 함수 본문이 길고 복잡하여, 더 명확하게 작성할 필요가 있을 때.

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

const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};
```

### 결론
화살표 함수와 일반 함수 중 어느 것을 사용할지는 다음과 같은 기준을 고려하여 결정하는 것이 좋습니다:

- **간결함**: 함수가 짧고 간단한 작업을 수행한다면 화살표 함수를 사용.
- **`this` 컨텍스트**: 함수 내에서 `this`를 사용해야 하고, 해당 `this`가 상위 스코프의 `this`가 아닌 경우 일반 함수를 사용.
- **객체 메서드**: 객체의 메서드로 정의할 때 일반 함수를 사용.
- **가독성**: 함수 본문이 길고 복잡하여 가독성이 떨어질 경우 일반 함수를 사용하여 더 명확하게 작성.

이러한 기준을 바탕으로 상황에 맞게 적절한 함수 형태를 선택하는 것이 좋습니다.