UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

함수 표현식 VS 함수 선언식 구분하기

클로이겅쥬 2021. 3. 11. 17:05
반응형

 

 

1. 함수 선언식이란

변수 선언을 let / const 등으로 시작해야하는 것 처럼

함수 선언은 function으로 시작한다.

 

선언 된 함수는 나중에 사용될 것을 위해 저장되며 call 될 때마다 실행된다.

 

function a() {
	return "이것은 함수입니다.";
}

이 a 함수를 사용하려면 함수의 이름을 호출하면 된다.

 

a();	// "이것은 함수입니다."

 


 

2. 함수 표현식이란

함수 표현식은 변수로 저장 될 수 있다.

 

let x = function (a, b) {return a * b};

 

함수 표현식이 변수에 저장이 되면, 변수는 함수처럼 사용이 가능하다.

변수에 저장된 함수는 함수명이 따로 필요 없으며, 변수 이름을 통해서 호출한다.

 

 

 


함수 표현식 VS 함수 선언식

 

함수 표현식
alert(hello()); // 에러 발생! hello 함수는 아직 로드안됨
var hello = function() { return 5; }

 

함수 선언식
alert(hello()); 
// Alerts 5. 
// 선언 전에 호출되도 정상 동작

function hello() { return 5; }

 

 

함수 선언식은 호이스팅이 되기때문에 코드가 실행되기 전에 로드가 된다.

그러나 함수 표현식은 호이스팅이 안되기 때문에 인터프리터가 해당 코드 줄에 도달할 때만 로드된다.

그리고 정의 된 범위에서 로컬 변수의 복사본을 유지할 수 있고, 함수 이름이 필요없어서 가독성이 높다.

함수 선언식과 함수 표현식은 함께 사용 가능하다.

 

 

 

 

 

 

출처  : velog.io/@bisu8018/

 

반응형