[JavaScript] 함수선언식(Function Declaration)과 함수표현식(Function Expression)

사실 아직도 정확히 모르겠는 함수의 존재....할것도 많고 배울것도 상당하다.

 

1. 함수선언식(Function Declaration)

함수를 처음 배울 때 알려주는 바로 그 함수의 형식이다.

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

function decFunc{
	return 'Hello';
}

decFunc();	//호출

 

2. 함수표현식(Function Expression)

함수 표현식은 조금 다른 형태다.

let expFunc = function imExpFunc(){		//기명함수이며 익명함수는 function(){}처럼 함수명을 빼버린다.
	return 'Hello';
};

expFunc();	//선언해둔 변수명 옆에 괄호를 붙여 함수임을 알게 한다.

함수도 하나의 값, 변수가 될 수 있다는 자바스크립트 언어의 유연함을 보여준다.

함수표현식은 또 

함수 이름을 가진 기명함수, 함수 이름이 없는 익명함수로 나뉜다. 

기명 함수는 이름이 있기에 함수 내부에서 본인 함수를 호출할 수 있다.

let expFunc = function imExpFunc(){	
	imExpFunc();	//이런식이다.
};

기명함수의 변수명이 아닌 함수명은 외부에서 호출할 수 없다.

이는 그저 디버깅에 사용하거나 함수 내부에서 재귀적으로 이용할때만 사용된다.

 

익명함수는 보통 콜백함수로 쓰인다.

말 그대로 필요할때 call해서 실행시키는 함수이다.

 

가장 흔하게, 이벤트 핸들러로 처리할때 많이 쓰인다.

 

아래의 코드는 3초 후에 문장을 출력하라는 함수이다.

 

setTimeout(function() {	//콜백(3초 후에 Hello from past!를 출력해주세요)
  console.log('Hello from past!');
}, 3000);	//밀리세컨드로 사용하기 때문에 3초다

 

3. 함수선언식과 함수표현식의 차이

이는 호이스팅에 대한 개념을 알아야 한다.

호이스팅은 모든 함수와 변수 선언을 코드 최 상단으로 끌어 올리는 것을 말한다.

이말인 즉, 선언문이 할당 전에 선언돼도, 제일 위로 올라오는 것이다.

 

함수선언식은 함수표현식과는 달리 호이스팅에 영향을 받는다.

함수표현식이 호이스팅에 영향을 받지 않는 이유는 함수 자체가 선언식처럼 선언이 되지 않은 상태이기 때문이다.

 

아래 예를 보자.

isWorking();	//호이스팅 됨. 실행된다 정상적으로

function isWorking(){
	console.log("Hello!");
}

isWorking();

이 함수 선언식의 isWorking 함수는 호이스팅 된다. 호출을 선언보다 먼저 했음에도 선언을 가장 위로 끌어올린 것이다.

그렇기에 정상적으로 실행된다.

 

isWorking();	// Uncaught TypeError: isWorking is not a function at <anonymous>:1:1 
const isWorking = function () {
	console.log("Nah...sorry");
};

isWorking();

하지만 함수 표현식은 호이스팅과 연관이 없기 때문에 타입에러가 뜬다.

 

4. 그래서 어떤 방법을 더 선호하는가?

함수표현식보다는 함수선언식을 더 많이 사용한다고 한다.

함수 선언식을 이용하면, 함수가 선언되기 전에 호출이 가능하기 때문에 자유롭고 유연한 코드구성이 가능하다.

또한, 함수 선언식은 가독성이 좋다. 이는 ES6부터 등장한 화살표 함수(arrow function)와도 연관이 있다. 

 

뭐 정답은 없으니....공부를 더더욱 해서 적절하게 선택할 수 있어야 겠다 ㅠㅠ

 

 

JAVASCRIPT.INFO 함수 표현식 https://ko.javascript.info/function-expressions
heejeong Kwon [JavaScript] 함수선언문과 함수표현식의 차이 https://gmlwjd9405.github.io/2019/04/20/function-declaration-vs-function-expression.html