자바스크립트 호기심천국
이번에 다뤄볼 주제는 일반적인 함수 정의 방식 vs 익명 함수 선언 참조 방식 입니다!
참 길고 복잡해보입니다.
하지만 알고보면 별거 아닌 이야기라는 것~ 하지만 그게 디테일이라는 것~
한 번 알아보겠습니다.
1. 기본 함수 정의문
함수를 사용하여 코드를 저장하는 것을 함수 정의문이라고 합니다.
변수를 선언할 때 var, let, const 를 사용한 것처럼 함수에서는 function 키워드를 사용해 함수를 선언합니다.
이 떄 함수 정의문은 다음 두 방식으로 선언할 수 있습니다.
1) 일반적인 함수 정의
함수를 다음과 같이 선언합니다.
function myFunction() {
count++;
document.write("hello" + count, "<br>");
}
함수를 다음과 같이 사용합니다. 참 쉽죠?
myFunction();
2) 익명 함수 선언 참조 방식
함수를 다음과 같이 선언합니다.
var theFunction = function () {
count++;
document.write("bye" + count, "<br>");
};
함수를 다음과 같이 사용합니다. 참 쉽죠?
theFunction();
2. 두 방식 간 차이
함수 선언 방식 두 가지를 살펴보았습니다.
두 방식 간 차이가 과연 있긴 한건가 의심이 됩니다.
바로 알아보겠습니다.
일반 함수 정의는 함수 호출 시 호이스팅(Hoisting) 기술을 지원합니다.
그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않습니다.
호이스팅 기술을 적용하면 함수 정의문보다 함수 호출문이 먼저 나와도 정상 동작합니다.
자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
쉽게 설명하여 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이라고 생각하시면 됩니다.
쉽게 코드로 확인해보겠습니다.
다음은 일반적인 함수 정의 방식입니다.
var count = 0;
myFunction();
function myFunction() {
count++;
document.write("hello" + count, "<br>");
}소스코드를 순서대로 읽어내려가는 인터프리터 언어 특성 상 myFunction(); 호출문은 아직 선언된 상태가 아니므로,
상상 속에서는 동작이 실패했어야 하지만, 정상동작함을 확인할 수 있습니다.
이는 호이스팅 기능 덕으로 함수의 선언부가 코드의 최상단으로 옮겨진 후 동작을 했기 때문입니다.
다음은 익명 함수 선언 참조 방식입니다.
var count = 0;
theFunction();
var theFunction = function () {
count++;
document.write("bye" + count, "<br>");
};위 코드는 실행 시
Uncaught TypeError 가 발생합니다.
이유는 전과는 정반대로 호이스팅 기술을 지원하지 않기 때문입니다.
두 방식 간 차이점을 확인해봤습니다.
그럼 결론으로 넘어가보겠습니다.
3. 결론
결론입니다.
호이스팅 방식을 보면 코드의 자유도가 하나의 장점인 자바스크립트의 매력 포인트로 보입니다.
하지만 자유도 과하면 독이 되는 법입니다.
길고 긴 코드, 여러 사람이 관리하는 코드일 경우 선언되지 않은 함수나 변수가 사용되는 것은 관리하기에는 단점이 될 수 있습니다.
비슷한 느낌으로 변수의 선언방식 var, let, const 중 var 가 이미 권장하지 않는 선언방식이 되었습니다.
이유는 여러가지가 있겠지만, 이번 사례와 같이 호이스팅 기술의 지원 유무가 큰 몫을 했습니다.
코딩에 정답은 없지만, 더 나은 방식은 존재합니다.
길고 길었지만 결론: 보통의 경우에는 익명 함수 선언 참조 방식을 사용하시면 됩니다!
var theFunction = function () {
count++;
document.write("bye" + count, "<br>");
};
부족한 글 읽느라 고생하셨습니다.
오늘도 좋은 하루 보내세요.
감사합니다.