JavaScript에서 함수를 만들기 위해 사용할 수 있는 두 가지 주요 방법이 있다
함수 선언(Function Declarations)과 함수 표현식(Function Expressions)
이 두 방식은 비슷해 보일 수 있지만, 몇 가지 중요한 차이점이 있다
함수 선언(Function Declarations)
함수 선언은 function 키워드 다음에 함수의 이름이 오는 형태다
함수 선언은 호이스팅(Hoisting)되므로, 함수가 정의되기 전에도 호출할 수 있다
예시:
// 함수 선언
function sayHello() {
console.log("Hello!");
}
// 함수 호출
sayHello(); // "Hello!" 출력
특징:
- 호이스팅
- 함수 선언은 코드의 실행 전에 JavaScript 엔진에 의해 메모리에 저장되므로, 선언 전에 함수를 호출할 수 있다
- 함수 이름이 필수
- 함수 선언에서는 함수 이름이 필수적이다
함수 표현식(Function Expressions)
함수 표현식은 함수를 변수에 할당하는 방식이다
함수 표현식은 호이스팅되지 않는다
따라서, 함수 표현식은 선언 이후에만 호출할 수 있다
예시:
// 함수 표현식
const sayGoodbye = function() {
console.log("Goodbye!");
};
// 함수 호출
sayGoodbye(); // "Goodbye!" 출력
특징:
- 호이스팅되지 않음
- 함수 표현식은 변수에 할당된 값으로 취급되므로, 호이스팅의 영향을 받는다
- 함수를 호출하기 전에 선언해야 한다
- 익명 함수 사용 가능
- 함수 표현식은 이름이 없는 익명 함수를 사용할 수 있으며, 이는 함수를 직접 호출할 수 없는 콜백 함수로 사용될 때 유용하다
- 함수 이름이 선택적
- 함수 표현식에서는 함수에 이름을 지정할 수도 있고, 생략할 수도 있다
- 이름을 지정하면 디버깅 시 스택 트레이스에서 함수 이름이 보여 디버깅이 용이해진다
결론
함수 선언과 함수 표현식의 주요 차이점은 호이스팅과 관련이 있다
함수 선언은 코드의 어느 위치에서든 호출할 수 있지만, 함수 표현식은 선언된 이후에만 호출할 수 있다
또한, 함수 표현식은 익명 함수를 사용할 수 있는 반면, 함수 선언은 함수 이름이 필수다
각각의 방식은 상황에 따라 유용하게 사용될 수 있으므로, 이러한 차이점을 이해하고 적절한 상황에서 활용하는 것이 중요하다
'Frontend' 카테고리의 다른 글
실행 컨텍스트란 (1) | 2024.03.04 |
---|---|
렉시컬 환경이란 (0) | 2024.03.04 |
var, let, const 차이 (0) | 2024.03.04 |
콜백 지옥 해결법 - Promise 와 async/await (0) | 2024.03.04 |
Promise와 Callback 차이 (0) | 2024.03.04 |