함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?

Question

// 함수 선언식 function func() { console.log('hello javascript'); } // 함수 표현식 - function 함수 const func = function() { console.log('hello javascript'); }; // 함수 표현식 - 화살표 함수 const func = () => { console.log('hello javascript'); };   클래스 내부의 메서드는 함수 선언식이 많았던 거 같고, 일반 함수는 함수 표현식이 많았던 거 같네요.   함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?

hyobin · Answer

안녕하세요 🙂 질문 감사합니다. 함수 선언식과 함수 표현식은 정답이 있는 선택은 아니고, 코드의 의도와 구조에 따라 자연스럽게 선택되는 경우가 많습니다. 함수 선언식은 보통 호이스팅에 의해 코드 어디서든 호출이 가능하다는 특징이 있기 때문에, 기능적으로 독립적이고, 코드 흐름상 자유롭게 호출될 필요가 있을 때 주로 사용됩니다. 함수 표현식은 값처럼 변수에 담길 수 있다는 특징 떄문에 훨씬 유연하므로, 화살표 함수로 간결하게 작성하고 싶을 때, 특정 스코프 내에서만 사용하려는 지역 함수를 만들 떄 사용됩니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Sec님. 자바스크립트에서 함수 선언식과 함수 표현식의 사용 맥락에 대해 설명드리겠습니다. 함수 선언식(Function Declaration) function func() { console.log('hello javascript'); } 호이스팅 : 함수 선언식은 코드가 실행되기 전에 호이스팅(hoisting)됩니다. 따라서 파일 내 어디에서든지 호출할 수 있습니다. 사용 경우 : 함수가 코드 내 어디에서든 호출될 수 있기 때문에, 대부분의 경우 함수 선언식은 전역적으로 사용되는 유틸리티 함수나 클래스의 메서드를 정의할 때 많이 사용됩니다. 함수 표현식(Function Expression) const func = function() { console.log('hello javascript'); }; const func = () => { console.log('hello javascript'); }; 호이스팅 없음 : 함수 표현식은 할당되고 나서야 호출할 수 있습니다. 따라서 코드 흐름 하부에 위치하면 그리즈형으로 작동합니다. 화살표 함수 : 화살표 함수는 깔끔한 구문을 제공하며, this 바인딩을 유지하기 위해 많이 사용됩니다. 특히 컬백 함수에서 편리합니다. 사용 경우 : 특정 블록 범위 내에서만 사용되거나, 클로저, IIFE(즉시 실행 함수 표현식) 등과 같은 고급 기능에 자주 사용됩니다. 클래스 내부의 메서드 클래스 내에서는 function 키워드 없이 메서드를 정의하며, 이 메서드는 함수 선언식의 특성을 가집니다. 이는 클래스의 인스턴스에서 메서드로 호출되는 상황에서 유용합니다. 관련 자료 : - 자바스크립트 함수 선언 방식의 차이점 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.