Function 함수 선언문 vs const 함수 표현식

 

React를 사용해 개발을 하면 Function 함수 선언문과 const 함수 표현식이 굉장히 익숙합니다.

주로 컴포넌트 개발 시에는 Function 함수 선언문을, 일반 함수를 만들 때는 const 함수 표현식을 사용하곤 했는데요, 그 차이에 대해서는 잘 알지 못했었습니다.

이번 시간에는 그 차이에 대해 알아보도록 하겠습니다.

 

const를 사용한 함수 선언 (함수 표현식)

const myFunction = () => {
  console.log("Hello!");
};

const myFunction = function(){}로도 선언을 할 수 있지만 굳이 그럴 필요는 없으니 주로 const로 선언을 할 땐 화살표 함수로 합니다.

 

특징

• 호이스팅: const를 사용한 함수 표현식은 선언 전에 사용할 수 없습니다. 그렇지 않으면 ReferenceError가 발생합니다.
• 스코프: const를 사용한 함수 표현식은 let 또는 const로 선언된 변수와 마찬가지로 블록 스코프 내에서만 사용할 수 있습니다.
• 익명 함수 가능: const를 사용한 함수 표현식은 익명 함수로도 작성할 수 있습니다. 다만 이름을 부여하는 것이 디버깅에 더 유리합니다.
• React: 컴포넌트 내부 함수는 const 함수 표현식으로 작성합니다. 이 함수들은 외부에 노출될 필요가 없기 때문에 컴포넌트가 렌더링될 때마다 새로 정의되지 않고 재정의됩니다.

 

Function 키워드를 사용한 함수 선언 (함수 선언문)

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

 

간단한 함수 선언입니다.

특징

• 호이스팅: function을 사용한 함수 선언문은 호이스팅되기 때문에 함수가 선언되기 전에 호출할 수 있습니다. 스크립트가 실행될 때 함수 선언이 먼저 메모리에 로드되므로 코드 내 어디서든 사용할 수 있습니다. 이는 javascript의 다른 변수 선언 var과 같습니다.
• 스코프: 함수 선언문은 함수 스코프를 가지며, 블록 내에 선언되더라도 블록 외부에서 접근할 수 있습니다. 하지만 ES6 이후부터 let과 const처럼 블록 스코프를 가지는 것이 표준화되었으므로, if문 등에서 선언한 함수는 해당 블록 내에서만 사용할 수 있습니다.
• React: 컴포넌트 자체는 function 함수 선언문으로 작성합니다. 이 함수들은 재사용이 가능하고 외부에서도 호출되는 요소이기 때문에 호이스팅이 필요합니다.

 

 

var을 사용한 함수 선언?

그럼 마찬가지로 호이스팅이 지원되는 var에다 함수 표현식을 작성하면 함수 선언문과 같은 동작이 지원되지 않을까요?

정답은 물론 X입니다.

 

 

var로 선언된 변수는 호이스팅이 되지만, 변수의 초기화는 호이스팅 되지 않으므로 undefined 값을 가집니다.

myFunction(); // TypeError: myFunction is not a function
var myFunction = function() {
	console.log("Hello!");
};

 

이 코드는 내부적으로 다음과 같이 처리됩니다.

var myFunction;
myFunction(); // TypeError: myFunction is not a function
myFunction = function () {
  console.log("Hello, world!");
};

 

때문에 예기치 못한 작동으로 오류가 생길 수 있습니다.

 

var는 Javascript에서 사용을 줄이고 있는 추세이기 때문에 되도록 사용하지 않는 것이 좋습니다.

대신 const와 let, 또는 function 함수 선언문을 사용하는 것이 좋겠죠?