겉모습만 알고있던 함수 선언식, 함수 표현식에 대해 더 깊게 공부해보자
🎯 함수 표현식
우리가 평소 알고있던 그 모습이다.
function 함수명(){
// 로직
}🎯 함수 선언식
우리가 평소 알고있던 그 모습의 함수를 변수에 넣은 모습이다.
// 익명 함수
var 변수명 = function(){
// 로직
}
// 기명 함수
var 변수명 = function 함수명(){
// 로직
}🤷🏻 함수 표현식과 함수 선언식의 차이점
생긴 모습(변수 할당 여부) 외의 차이점에 대해 알아보자.
가장 큰 차이점은 호이스팅 영향을 받는지에 대한 여부이다. 함수 표현식은 호이스팅 영향을 받지 않지만, 함수 선언식은 호이스팅 영향을 받는다. 예시를 통해 알아보겠다.
먼저, 함수 선언식으로 작성했을 때의 예시이다.
test(2); // 호이스팅 영향을 받지 않아 에러 메세지 출력
var test = function(x){
return x * 2;
}
test(2); // 4함수 선언식의 test 함수는 선언하기 전에 실행하면 에러메세지가 출력되는 모습을 발견했다.
다음은, 함수 표현식으로 작성했을 때의 예시이다.
test(2); // 4 (호이스팅 영향을 받음)
function test(x){
return x * 2;
}
test(2); // 4함수 표현식의 test 함수는 선언하기 전에 실행해도 호이스팅의 영향이 되어 결과 값이 잘 출력되어 나온다.
🐢 그래서, 내 생각엔
호이스팅 영향을 받는지에 대한 여부를 잘 고려하면서 필요에 따라 선택해야하지만, 내 생각엔.. 불가피한 상황이 아니면 되도록이면 함수는 상단에 사용하는게 좋을 것 같다..!키키 끝!
출처 :
심심한 개발자