[Javascript] 12. 함수 표현식

Eden·2022년 7월 28일

Javascript

목록 보기

12/33

함수 선언문 vs 함수 표현식

함수 선언문

<script>
//함수 선언문
function sayHello(){
	console.log('Hello');
}

sayHello();
</script>

함수 표현식

<script>
//함수 표현식
let sayHello = function(){
	console.log('Hello');
}

sayHello();
</script>

이름이 없는 함수를 만들고 변수를 선언해서 함수를 할당해주었다. 이것을 함수 표현식이라고 한다.

사용방식, 실행하는 방식, 동작하는 방식도 동일하다.

작성하는 문법 외에 ~~어떤 차이~~가 있을까?

해답은 호출할 수 있는 타이밍에 있다.

그게 무슨 타이밍인데?

함수 선언문은 어디서든 호출할 수 있다.

<script>
//함수 선언문2               /↓자바스크립트 실행 방향
sayHello();//

function sayHello(){
	console.log('Hello');
}
</script>

함수 호출을 제일 위로 바꾸어도 동작한다.
자바스크립트는 위에서 아래로 차례대로 한줄 씩 이르면서 실행한다. 이렇게 순차적으로 실행되고 즉시 결과를 반환하는 프로그램 언어를 인터프리터 언어(interpreted language)라고 한다.

그런데 어떻게 위의 코드가 실행될 수 있을까?

예를 들어보도록하자.

console.log(num);
           //Error. num is not defined.
let num = 1;

위의 코드에서 console이 찍힐까? 절대 아니다.
순서대로 실행됐을 때 num이라는 변수를 아직 만나지 못했기 때문이다.

호이스팅(hoisting)

<script>
//함수 선언문2               /↓자바스크립트 실행 방향
sayHello();//             /↓자바스크립트 실행 방향
                         //↓자바스크립트 실행 방향
function sayHello(){
	console.log('Hello');
}
</script>

위의 코드는 어떻게 실행될 수 있었을까?
분명 호출하는 부분이 위에 있는데 말이다.
함수 선언문이 호출될 수 있는 이유는 자바스크립트 알고리즘 때문이다.
자바스크립트는 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해준다. 즉 눈으로 봤을 때는 잘 모르지만 함수를 사용할 수 있는 범위는 코드 위치보다 위로 올라가기 때문이다.
이를 호이스팅(hoisting)이라고 한다.
오해할 수도 있지만 코드위치가 실제로 올라간다는 뜻은 아니다.

반면에,
함수 표현식은 이렇게 동작하지 않는다.

<script>
//함수 표현식2               /↓자바스크립트 실행 방향
//1. ...                  /↓자바스크립트 실행 방향
//2. ...                  /↓자바스크립트 실행 방향
//3.                      /↓자바스크립트 실행 방향
let sayHello = function(){
	console.log('Hello');
}

//4.
sayHello();
</script>