# 자바스크립트에서 일반 함수와 Arrow 함수의 차이점, 언제 어떤 문법을 써야 하는가

> Clean Markdown view of GeekNews topic #21993. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21993](https://news.hada.io/topic?id=21993)
- GeekNews Markdown: [https://news.hada.io/topic/21993.md](https://news.hada.io/topic/21993.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-07-15T11:04:02+09:00
- Updated: 2025-07-15T11:04:02+09:00
- Original source: [jrsinclair.com](https://jrsinclair.com/articles/2025/whats-the-difference-between-named-functions-and-arrow-functions/)
- Points: 22
- Comments: 3

## Summary

자바스크립트에서 **함수 선언**, **함수 표현식**, **화살표 함수**는 각각 문법과 동작 방식에 차이가 있으며, 이는 **호이스팅**, **this 바인딩**, **디버깅** 등 핵심 동작에 영향을 미칩니다. **화살표 함수**는 간결한 문법과 상위 스코프의 **this 유지**로 **콜백**이나 익명 함수에 적합하지만, **생성자 함수**나 **제너레이터**, **메서드**로는 사용할 수 없습니다. 반면, **함수 선언**과 **표현식**은 명시적인 **이름 부여**와 **호이스팅**, 그리고 **this/arguments** 바인딩이 가능해 상황에 따라 더 유연하게 활용할 수 있습니다. 코드 목적과 **this 사용 여부**, **생성자·제너레이터의 필요성**에 따라 적절한 함수 정의 방식을 고르는 것이 코드의 명확성과 안정성을 높입니다.

## Topic Body

- **자바스크립트 함수 선언**은 `function` 키워드를 사용한 선언, **함수 표현식**, **화살표 함수** 등 다양한 방식이 존재함  
- **함수 선언**은 **호이스팅**이 적용되어 코드의 어느 위치에서든 참조 가능함  
- **Arrow(화살표) 함수**는 **간결한 문법**이 장점이지만, **this/arguments/super 바인딩이 없음** 등 중요한 차이점이 있음  
- **생성자 함수, 제너레이터, 메서드**에는 화살표 함수 사용이 적합하지 않음  
- **간단한 콜백이나 익명 함수**에는 **화살표 함수**가 더 적합함  
  
---  
### Function Declarations, Function Expressions, and Arrow Functions  
  
- 자바스크립트에서는 **함수 선언(Statement)**, **함수 표현식(Expression)**, **화살표 함수(Arrow Function)** 세 가지 방식으로 함수를 정의할 수 있음  
- 함수 선언은 `function isVowel(chr) { ... }`처럼 이름을 직접 바인딩하며, **코드의 어디서든 참조 가능(호이스팅)** 함. **스택 트레이스** 및 **디버깅** 시 함수명이 명확하게 표시됨  
- 함수 표현식은 `const takeWhile = function(predicate, arr) { ... }`처럼 변수에 익명 함수를 할당하는 형태  
- 함수 표현식에도 내부적으로 이름을 줄 수 있으나, **이름은 외부 스코프에 바인딩되지 않고**, 주로 **스택 트레이스에서 에러 추적에 사용**됨  
  
### Hoisting and Naming  
  
- **함수 선언문**은 자바스크립트 엔진에 의해 **호이스팅**되어, 선언 이전에 호출해도 동작함  
- 익명 함수 표현식은 변수 할당 이후에만 호출 가능함  
- 디버깅을 위해 함수에 **이름을 명시적으로 부여**하는 것이 스택 트레이스에서 유리할 수 있음  
  
### Arrow Functions  
  
- **짧고 간결한 문법**: function 키워드 없이 `(매개변수) => { ... }` 형태로 작성.   
- **항상 익명 함수**임 (단, 변수에 할당해서 이름처럼 사용 가능)  
- **표현식**(expression)으로만 사용 가능, **문(statement)** 이 아님  
- **this/arguments/super 바인딩 없음**: 함수 선언/표현식과는 다르게, **상위 스코프의 this**를 캡처함  
- 단일 표현식의 경우 중괄호와 return 생략 가능, 매개변수가 1개면 괄호도 생략 가능함  
- **생성자 사용 불가**: 화살표 함수는 **new** 키워드로 호출할 수 없으며, **생성자 함수로 동작하지 않음**  
- **제너레이터 불가**: **yield** 사용 불가, 제너레이터 함수로 만들 수 없음  
- **코드 예시**:  
  ```js  
  const sum = (a, b) => a + b;  
  const square = x => x * x;  
  ```  
  
### Practical Example: this와 생성자, 제너레이터  
  
- 일반 함수와 화살표 함수의 this 처리 방식 차이 예시 제공  
  - 객체 내에서 메서드로 쓸 때, 일반 함수는 this가 객체 자신을 가리키지만, 화살표 함수는 undefined 또는 외부 스코프의 this를 가리킴  
- 생성자 함수를 화살표 함수로 정의 시 TypeError 발생  
- 제너레이터 함수는 반드시 function* 문법 사용 필요  
  
### 어떤 함수 문법을 언제 선택해야 할까?  
  
- **제너레이터(yield 사용)** 필요 → function* 사용   
- **this를 활용**해야 함 → function 키워드 또는 클래스 메서드 사용   
- **호이스팅**이 필요하거나 상위 수준의 가독성을 원함 → 함수 선언문 사용  
- 위 조건 해당 없으면 → **화살표 함수**로 더 간결하게 작성하는 것이 유리  
  
### 결론  
  
- 자바스크립트 함수는 사용 목적, this 필요 여부, 생성자/제너레이터 여부에 따라 문법 선택  
- **일상적 콜백/간단 함수**에는 **화살표 함수**가 베스트  
- **객체 메서드/생성자/제너레이터**에는 function 문법 사용 필요  
- **호이스팅**이나 선언 순서 자유도가 필요하면 함수 선언문이 유리

## Comments



### Comment 41444

- Author: ng0301
- Created: 2025-07-15T21:38:47+09:00
- Points: 1

근본만큼이나 prototype 유무도 ...  
생성되는 고계도 함수의 레퍼런스 방법도 ...

### Comment 41423

- Author: bichi
- Created: 2025-07-15T11:22:13+09:00
- Points: 1

const a = (a: () => null): (() => () => null) =>() => a

### Comment 41421

- Author: bichi
- Created: 2025-07-15T11:15:33+09:00
- Points: 1

() => ❤️