[지식루프 IT공부] 함수선언과 함수표현식의 차이

자바스크립트에서 함수 선언(Function Declaration)과 함수 표현식(Function Expression)은 함수를 정의하는 두 가지 주요 방식입니다. 이 둘은 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다.

 

1. 정의 방식

함수 선언 (Function Declaration)

• 형태: function 키워드로 시작하며, 함수 이름이 필수적으로 명시됩니다.
• 예시

 

함수 표현식 (Function Expression)

• 형태: 함수를 변수에 할당하는 방식으로 정의합니다. 함수는 익명 함수(이름이 없는 함수)일 수도 있고, 이름을 가질 수도 있습니다.
• 예시

함수 표현식은 함수를 생성한 후 변수에 할당하는 방식입니다. 함수 자체는 익명일 수 있지만, 변수 이름으로 호출합니다.

 

2. 호이스팅(Hoisting) 동작의 차이

함수 선언

• 호이스팅: 함수 선언은 전체가 호이스팅됩니다. 즉, 코드의 어디에 선언되어 있든, 선언된 함수는 스코프의 맨 위로 끌어올려져서 코드 실행 전에 사용할 수 있습니다.
• 예시:

 

함수 선언은 스코프의 맨 위로 끌어올려지기 때문에, 선언 위치와 상관없이 호출 가능합니다.

 

함수 표현식

• 호이스팅: 함수 표현식은 변수 선언만 호이스팅되고, 함수 할당은 호이스팅되지 않습니다. 즉, 변수는 undefined로 초기화된 상태로 끌어올려지며, 실제 함수가 할당되기 전에는 호출할 수 없습니다.
• 예시

 

 

• const sayHello는 변수 선언만 호이스팅되어 undefined 상태로 시작합니다. 함수가 할당되기 전에 호출하면 에러가 발생합니다.
• 참고: let이나 const로 선언한 변수는 **TDZ(Temporal Dead Zone)**에 의해 초기화 전에 접근하면 에러가 발생합니다. var로 선언한 경우에는 undefined로 초기화되어 다른 에러가 발생할 수 있습니다.

 

 

3. 사용 시점

함수 선언

• 코드의 어느 위치에서든 호출 가능합니다(호이스팅 때문에).
• 주로 최상위 레벨에서 함수를 정의하거나, 재사용성이 높은 함수를 선언할 때 사용됩니다.

함수 표현식

• 함수가 할당된 이후에만 호출 가능합니다.
• 변수에 함수를 저장해서 사용하므로, 함수를 값처럼 다루거나 콜백으로 전달하기에 유리합니다.

 

 

4. 이름 지정 여부

함수 선언

• 함수 이름이 필수입니다. 이름 없이 선언할 수 없습니다.
• 함수 이름은 디버깅 시 스택 트레이스에서 유용하게 표시됩니다.

함수 표현식

• 함수 이름은 선택 사항입니다(익명 함수 가능).
• 이름을 지정할 수도 있지만, 주로 변수 이름으로 호출합니다.

 

 

5. 유연성과 사용 사례

함수 선언

• 장점:
  • 코드가 간결하고 직관적.
  • 호이스팅 덕분에 선언 위치에 구애받지 않음.
• 단점:
  • 유연성이 떨어짐. 함수를 값으로 다루기 어려움.
• 사용 사례:
  • 독립적인 함수가 필요할 때.
  • 전역적으로 사용되는 유틸리티 함수.

함수 표현식

• 장점:
  • 함수를 변수에 저장하므로, 콜백 함수나 클로저로 사용할 때 유리.
  • 조건에 따라 다른 함수를 할당할 수 있어 유연함.
• 단점:
  • 호이스팅되지 않으므로 선언 전에 호출 불가.

 

 

 

결론

• 함수 선언은 간단하고 직관적이며 호이스팅 덕분에 자유롭게 호출 가능하지만, 유연성이 떨어집니다.
• 함수 표현식은 변수에 할당하므로 더 유연하고, 콜백이나 클로저에서 유용하지만 선언 전에 호출할 수 없습니다.
• 상황에 맞게 선택해서 사용하면 됩니다. 예를 들어, 전역 유틸리티 함수는 함수 선언으로, 이벤트 핸들러나 콜백은 함수 표현식으로 사용하는 것이 일반적입니다.