JavaScript에서 함수는 재사용 가능하고 모듈화된 코드를 작성하는 데 필수적인 구성 요소입니다. 함수 선언에는 전통적인 함수와 화살표 함수 두 가지 방식이 있으며, 각각 고유한 문법과 동작 방식을 가지고 있습니다. 차이를 이해하면 상황에 맞는 함수를 선택하는 데 도움이 됩니다.
전통적인 함수 선언
전통적인 함수는 function 키워드를 사용하여 정의됩니다. 이 함수는 고유한 this 컨텍스트를 가지며, 이는 함수가 호출된 객체를 참조합니다(엄격 모드가 아닌 경우 기본적으로 전역 객체를 참조).
문법:
javascript
function greet(name) { console.log("Hello, " + name); } greet("Alice");
위 예제에서 함수 greet는 매개변수 name을 받아 환영 메시지를 출력합니다.
주요 특징:
- 고유한 this 컨텍스트를 가지며, 특정 상황(예: 콜백)에서 다소 복잡하게 동작할 수 있습니다.
- 호이스팅(hoisting)에 의해 정의되기 전에도 호출 가능합니다.
화살표 함수
화살표 함수는 ES6에서 도입된 함수 선언 방식으로, 간결한 문법을 제공합니다. 이 함수는 익명 함수(이름이 없음)이며, 고유한 this 컨텍스트를 가지지 않고, 대신 주변 렉시컬 스코프로부터 this를 상속받습니다. 이는 특히 콜백에서 다루기 더 쉬운 경우가 많습니다.
문법:
javascript
const greet = (name) => { console.log("Hello, " + name); }; greet("Bob");
화살표 함수는 단일 표현식을 가질 경우 중괄호와 return 키워드를 생략하여 더 간결하게 작성할 수 있습니다.
간결한 문법:
javascript
const greet = name => console.log("Hello, " + name);
주요 특징:
- 고유한 this가 없으며, 주변 스코프에서 상속받습니다.
- 간단한 함수에 유용한 짧은 문법 제공.
- 호이스팅되지 않으므로 정의 전에 호출할 수 없습니다.
주요 차이점
- 문법:
- 화살표 함수는 간단한 작업에 적합한 간결한 문법을 제공합니다.
- this 동작:
- 전통적인 함수는 고유한 this를 가지는 반면, 화살표 함수는 주변 컨텍스트의 this를 상속받습니다.
- 호이스팅:
- 전통적인 함수는 호이스팅되므로 정의 전에 호출할 수 있습니다.
- 화살표 함수는 정의된 후에만 호출할 수 있습니다.
언제 어떤 함수를 사용할까?
- 전통적인 함수는 고유한 this가 필요하거나, 함수 호출 전에 정의가 필요한 경우 사용합니다.
- 화살표 함수는 간단하고 짧은 함수나 콜백, 프로미스, 이벤트 핸들러처럼 주변 this 컨텍스트를 유지해야 하는 상황에서 사용합니다.