[Javascript] 함수 선언식, 함수 표현식, 화살표 함수 비교

 

JavaScript 함수 선언 방식 정리

1. 함수 선언식 (Function Declaration)

• function 키워드를 사용하여 선언하는 전통적인 방식
• 호이스팅(hoisting)이 발생하여 선언 전에 호출 가능

function sayHello() {
    console.log("Hello!");
}
sayHello(); // 호출 가능 (호이스팅 O)

특징

• 함수 선언식은 호이스팅(hoisting)이 되어, 함수 선언 전에 호출할 수 있음
• function 키워드를 사용하여 선언
• this는 함수를 호출한 객체를 가리킴
• 전역 스코프에서 선언하면 window(브라우저 환경) 또는 global(Node.js 환경)의 속성이 됨

 

단점

• 무조건 함수가 선언됨(선언과 동시에 메모리에 등록됨). 필요 없는 경우에도 메모리를 차지할 수 있음

2. 함수 표현식 (Function Expression)

• 함수를 변수에 할당하는 방식
• 호이스팅되지 않음 (선언 전에 호출 불가)

const sayHi = function() {
    console.log("Hi!");
};
sayHi(); // 호출 가능

// sayHiBefore(); // ❌ 오류 발생 (호이스팅 X)
const sayHiBefore = function() {
    console.log("Hi Before!");
};

특징

• 함수를 변수에 할당하여 사용
• 호이스팅되지 않음, 즉, 선언 전에 호출할 수 없음
• 필요할 때만 메모리에 할당할 수 있어 메모리 관리에 유리

 

단점

• this 바인딩이 호출 방식에 따라 달라질 수 있음
• function 이름을 생략하면 익명 함수(Anonymous Function)가 되어 디버깅 시 함수 이름이 보이지 않아 불편할 수 있음.

 

3. 화살표 함수 (Arrow Function)

• ES6(ES2015)에서 도입된 간결한 함수 표현식
• this를 바인딩하지 않음(렉시컬 스코프 사용)

const add = (a, b) => {
    return a + b;
};
console.log(add(2, 3)); // 5

특징

• function 키워드 없이 간결한 문법 제공
• this를 바인딩하지 않음 → 화살표 함수 내부에서 this는 선언된 스코프(부모 스코프)의 this를 사용
• 한 줄로 표현할 경우 {}와 return 생략 가능

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

 

단점

• this를 바인딩하지 않기 때문에 객체 메서드로 사용하면 문제가 발생할 수 있음

const obj = {
    value: 42,
    method: () => {
        console.log(this.value);
    }
};
obj.method(); // undefined (this가 obj가 아니라 전역 객체를 가리킴)

• arguments 객체를 사용할 수 없음 → 대신 ...rest를 사용해야 함
• 생성자 함수(new)로 사용할 수 없음

세 가지 함수 비교

구분 함수 선언식 함수 표현식 화살표 함수

선언 방식	function name() {}	const name = function() {}	const name = () => {}
호이스팅	O (선언 전 호출 가능)	X (선언 후에만 호출 가능)	X (선언 후에만 호출 가능)
this 바인딩	O (동적 바인딩)	O (동적 바인딩)	X (부모 스코프 this 사용)
arguments 사용	O	O	X (rest parameter 사용)
new 사용 가능 여부	O	O	X

 

언제 어떤 함수를 사용해야 할까?

• 일반적인 함수 선언: 함수 선언식 사용 (function name() {})
• 콜백 함수, 익명 함수가 필요할 때: 함수 표현식 (const func = function() {})
• 간결한 문법이 필요할 때: 화살표 함수 (const func = () => {})
• 객체의 메서드로 사용할 때: 함수 선언식 또는 함수 표현식 사용 (화살표 함수 사용 주의)
• 생성자 함수로 사용할 때: 화살표 함수 사용하면 안됨 (function 사용)