[JavaScript] 함수 선언하는 방법 ( 선언식 vs 표현식)

 

자바스크립트에서 함수를 선언하는 방법은 여러가지가 있다. 어떤 방식이 있나 정리해보려 한다.

 

📑 1. named function declaration (명명 함수 선언)

 

가장 대중적인 방법으로. 함수의 이름이 hello가 된다. 이 함수는 어느 스코프에서든 호출할 수 있는 함수가 된다. 

함수 이름을 생략할 수 없고, 표현식이 아닌 문장이다. 

 

function add(x,y) {
 	return x+y;
}

 

 

📑 2. annoymous function expression (익명 함수 표현)

 

이름이 없는 함수를 변수에 담는 방식이다. 이름이 없지만, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다 .

 

let funcExpression = function() {
	return 'woni' ; 
   }
   
funcExpression();

 

ES6에서 표현하고자 한다면 아래와 같이 화살표함수로 가능하다

 

let funcArro = (x,y) => return x+y

.

 

---

 

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

 

함수 선언문은 var와 같이 함수 스코프를 가지고 let과 const 변수는 블록 스코프를 갖는다. 또한 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달할 때 로드 된다. 즉 함수 선언식은 호이스팅 되지만 함수 표현식은 호이스팅이 되지 않으므로 정의된 범위 안에서 로컬 변수의 복사본을 유지할 수 있다. 

 

즉) 함수 선언문은 어디서든 호출이 가능하고, 함수 표현식은 함수를 생성(초기화)한 코드 아래서만 호출 가능하다. 

 

첫번째 함수 선언식은 함수 호이스팅이 되기에 선언보다 호출이 먼저 될지라도 정상 호출 된다. 

아래 함수 표현식은 함수 호이스팅이 되지 않기 때문에 로드되지 않아 에러가 발생한다. 

 

console.log(named());
function named(){
    return 1;
}

console.log(annoy());
const annoy = function(){
    return 2;
}