이번시간에는 자바스크립트 함수에 대해 알아보겠습니다.
자바스크립트에는 함수를 선언하는 방식에 총 3가지가 있습니다.
함수 선언 방식
1. 함수 선언문 - function statement
function 함수명(){
구현할 로직
}
// 호출 시
함수명();_함수 선언문에서 함수명은 필수이다._
2. 함수 표현식 - function expression
var 함수명 = function(){
구현할 로직
};
// 호출 시
함수명();_함수를 변수에 할당하는 방법이다._
3. Function() 생성자
var func = new Function(인자1, 인자2,..... 인자n , 구현할 로직);
// 호출 시
func(인자1, 인자2,..... 인자n); // 결과 = 구현할 로직의 결과값
ex)
var func = new Function('x', 'y', 'z', 'return x+y-z');
func(30, 20, 10); // 40 (30 + 20 - 10)_Function 생성자를 이용한 방법은 자주 사용하지는 않는다._
이렇게 함수의 선언방법 3가지에 대해 알아보았습니다.
그렇다면 이 선언방법들에 차이없이 모두 동일할까요?
예상대로 차이가 존재합니다.
호이스팅
자바스크립트에는 호이스팅이라는 것이 존재합니다.
그렇다면 호이스팅은 무엇일까요?
MDN용어사전을 인용하자면 다음과 같습니다.
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
쉽게 말하자면 함수와 var로 선언한 변수'만' 을 먼저 메모리에 할당하는것을 말합니다.
이에 따라 다른 함수들은 호이스팅의 영향을 받지 않지만,
함수 선언문 방식은 호이스팅에 영향을 받습니다.
다음 예제를 보며 알아보겠습니다.
plus(10,5); // 15
minus(10,5); // Uncaught TypeError: minus is not a function
function plus(x, y){
return x + y;
}
var minus = function(x,y){
return x - y;
}plus(10,5)는 결과값이 나왔는데, minus(10,5)는 typeerror가 뜨면서 결과를 return하지 못했습니다. 그 이유는 호이스팅에 의한 유효범위의 차이때문입니다.
자바스크립트의 내부적인 처리순서에 따라 적는다면 다음과 같습니다.
function plus(x, y){
return x + y;
}
var minus;
plus(10,5); // 15
minus(10,5); // Uncaught TypeError: minus is not a function
minus = function(x,y){
return x - y;
};이처럼 함수 호이스팅에 의해 처리 순서에 따른 유효범위에 차이가 발생하여 이같은 결과가 나옵니다. 이처럼 함수를 사용하기 전 함수를 선언해야하는 규칙이 무시되기 때문에, 다른방식보다 **함수 표현식**을 많이 권장합니다.
이번 시간에는 함수 선언에 관해 알아보았습니다.
언제나 그렇든 지적과 충고는 항상 환영입니다.
감사합니다.
