javascript 코드를 보면 다음과 같은 경우를 보았을 것이다.
function getName() {
console.log('name');
}
var name = function() {
console.log('name');
};
함수 표현식
이라고 한다.함수 선언문
이라고 한다.그렇다면 함수 표현식과 함수 선언문 둘다 함수인데 어떻게 다르며, 어떻게 사용되는지 알아보자.
우선 둘의 차이는 호이스팅을 빼놓고 설명할 수 없다.
호이스팅(Hoisting)의 사전적 의미는 끌어 올리다
라는 뜻을 가지고 있다.
여기서도 같은 의미로 쓰인다. 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다.
실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.
var
와 함수 선언문
이 호이스팅 대상이다.let
또는 const
그리고 함수 표현식
은 해당되지 않는다. 부등호가 큰 쪽이 먼저 인식된다
count();
var count = function() {
console.log('count는 1이다.');
}
var count = function() {
console.log('count는 1이다.');
}
count();
count();
let count = function() {
console.log('count는 1이다.');
}
error : count is not function
count() 호출 후, var count를 선언하며 함수를 담았다.
var
는 호이스팅의 영향을 받으므로 위로 끌어올려진다.
그러므로 아래와 같이 var count;
가 가장 먼저 실행된다. 변수에 아무 값도 담지 않았으므로 undefined
상태이다.
그 후로 count()가 호출되면 위에 선언한 count
가 호출되므로 변수를 호출하는 격이된다.
그러므로 not function
이라는 에러 메시지가 나타난다.
var count; // undefined
count(); // count는 함수가 아닌데 왜 함수를 호출하니?
var count = function() {
console.log('count는 1이다.');
}
var count
가 호이스팅으로 인해 위로 끌어올려지지만, count() 호출 전 count에 함수를 담으므로
count() 를 호출하였을 때 정상 작동한다.
var count; //undefined
var count = function() {
console.log('count는 1이다.');
}
count();
세번째 예시는 첫번째 예시에서 var
를 let
으로 바꾼 것이다.
세번째도 역시 에러를 발생하지만, 첫번째와 다른 Referecne Error
가 발생한다.
let
은 호이스팅의 영향을 받지 않기 때문에, 예시 작성한 코드 순서대로 실행된다.
그러므로 count()라는 함수가 정의되지 않았는데 호출하였기 떄문이다.
count();
let count = function() {
console.log('count는 1이다.');
}
count();
function count() {
console.log('count는 2이다.');
}
function count() {
console.log('count는 2이다.');
}
count();
함수선언문을 사용하는게 좋을까? 함수표현식을 사용하는게 좋을까?
찾아보니 어떤 사람은 함수 선언문을 권장하고, 또 어떤사람은 함수 표현식을 권장한다.
또한 두 개의 차이는 없고 한가지만 사용하는 것이 좋다는 사람도 있어 뭐라 결론을 내리지 못하겠다.
개인적으로 const와 let을 사용하며, 코드 순대로 동작하게 작성하는 것이 호이스팅의 영향을 최소화 할 수 있고, 호이스팅의 영향을 최소화하는 것이 가독성이나 유지보수측면에서도 좋지 않을까 생각한다.
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting
https://ko.javascript.info/function-expressions
많은 도움이 되었습니다!