[자바스크립트 / Vanilla JS] 함수 선언식 과 함수 표현식

함수 선언식(Function Declarations)이란?

1. 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.

2. 변수 선언이 let이나 const로 시작해야하는 것처럼 함수 선언을 function으로 시작한다.

3. 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하고 선언된 함수는 나중 사용을 위해 저장되며, 함수를 실행하려면 함수 이름을 호출하면 된다.

4. 함수 선언식은 코드가 실행되기 전에 로드된다

5. 함수 선언식은 var 문과 유사하게 호이스팅된다.

function 함수명() {
  // 개발 코드
}

// 함수 선언
function name() {
  console.log("JIWOO");
}

// 함수 호출
name();

 

함수 표현식(Function Expressions)이란?

1. 자바스크립트 함수는 표현식을 사용하여 정의 될 수 있으며, 함수 표현식은 변수로 저장될수 있다.

2. 함수 표현식은 없어도 되기에 일반적으로 함수 표현식은 함수명을 정의하지 않는다. 

3. 함수 표현식은 인터프리터가 해당 코드 줄에 도달 할 때만 로드된다.

4. 함수 표현식은 호이스팅되지 않으므로 정의 된 범위에서 로컬 변수의 복사본을 유지할 수 있다.

let 함수명 = function() {
  구현 로직
};

// 함수 표현식을 사용한 변수 할당
let sayHi = function() {  // 변수명 sayHi가 곧 함수명이다.
  alert("Hello");
};

// 함수 실행
sayHi();

 

함수 선언식과 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식은 코드를 구현한 위치와 관계없이 호이스팅되어 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

이러한 이유로 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달할 때만 로드된다.

 

함수 선언식은 선언 전에 호출돼도 정상 동작된다

console.log(name()); //"JIWOO"

function name() {
	return "JIWOO";
}

함수 표현식은 아직 로드가 되지 않아 에러가 발생한다

console.log(name()); //error

const name = function() {
	return "JIWOO";
}

 

 

참고 : https://jsmokblog.tistory.com/27