함수선언식, 함수표현식

-자바스크립트 함수선언식과 함수표현식에 대해 알아본다.

-호이스팅에 대해 알아본다.

-함수표현식의 장점에 대해 알아본다.

---

함수 선언식

function name () {
	return 'name'
}
name() //name

 그냥 일반적인 선언 방식이다. 호이스팅에 영향을 받는다. 그래서 실무에서 선언식으로 개발한 컴포넌트는 함수 위치에 따른 에러가 없이 실행될 수 있었던 것이다.

 

함수 표현식

자바스크립트 언어의 유연성을 활용한 방식이다. 호이스팅에 영향을 받지 않는다. 그렇기 때문에 선언 순서를 잘 고려해야 에러가 나지 않는다.

let name = function () {
	return 'name'
}

name() //name

 

호이스팅 개념

 호이스팅이란 자바스크립트 인터프리터가 함수 안에 있는 선언들을 모두 상단으로 끌어올려 선언하는 것을 말한다.

호이스팅에 의해 자바스크립트 실행시 해석기가 코드를 다음과 같이 인식한다.

 

호이스팅의 대상(var, let, const)

 호이스팅은 var 변수 선언, 함수선언식에서만 일어난다. let/const에서는 호이스팅이 발생하지 않는다. 아래 예시를 통해 확인할 수 있다.

 

//실행전
declare();
express();

function declare () {
	console.log('declare')
}

var express = function () {
	console.log('express')
}

//실행후
function declare () {
	console.log('declare')
}

var express;

declare();
express();

express = function () {
	console.log('express')
}

declare()는 함수선언식이므로 호이스팅 영향을 받아 상단으로 끌어올려진다. 반면 express()는 함수표현식이므로 호이스팅 영향을 받지 않아 변수선언만 끌어올려지고(var 변수이기 때문에 변수선언만 끌어올려진다) function은 함수호출 이후에 선언되기 때문에 express()를 호출하면 Uncaught TypeError : express is not a function 에러가 발생한다.

 

만약 var express가 아니라 let express로 선언한다면, 호이스팅 대상이 아니기 때문에 변수 선언도 안 끌어올려져서 Uncaught ReferenceError: express is not defined가 뜰 것이다. 다음과 같이 let을 선언하여 테스트해보았다.

//실행전
declare();
express();

function declare () {
	console.log('declare')
}

let express = function () {
	console.log('express')
}

//실행후
function declare () {
	console.log('declare')
}

declare();
express();

let express = function () {
	console.log('express')
}

 

실행후는 실제로 저렇게 내부에서 해석되는지는 모르겠지만 크롬 개발자도구로 테스트해본 결과 Uncaught ReferenceError: express is not defined가 뜨는 것을 보니 저런식으로 해석될 것으로 보인다.

 

함수 표현식 장점

 

콜백함수로 사용할 수도 있다.

arr = [1,2,3,4,5]

//함수표현식 콜백사용
arr.forEach(function () {
	//...
});

$(document).ready(function() {
	//제이쿼리에서 쓰이는 콜백함수
})

 

출처 : https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/, https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html