본문 바로가기
Frontend

함수 선언형과 함수 표현식의 차이

by 신인프로그래머 2024. 3. 4.

 

함수 선언형과 함수 표현식의 차이

 

 

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