[JS] 함수 선언문 vs. 함수 표현식 :: 자바스크립트 함수 선언과 화살표 함수(arrow function)

자바스크립트의 함수 선언 방식에는 크게 두 가지 방법이 있다.

// 함수 선언문
function hello(){
  console.log("hello");
}

hello();

함수 선언문은 여타 프로그래밍 언어와 같이 `function func_name(param){ /* code */ }`와 같이 선언되며,
이때 함수 선언문 이전에 함수를 호출해도 에러 없이 작동한다는 특징이 있다.

자바스크립트는 위에서 아래로 코드를 읽어 순차적으로 실행하는 인터프리터 언어지만,
실행 전 초기화 단계에서 소스 코드 내부의 모든 선언문을 찾아서 최상단에 재배치하는 방식으로 작동하기 때문에 실제 함수 사용 가능 범위가 늘어나게 되는데, 이를 호이스팅(hoisting)이라고 한다.

이 때문에 함수 선언문은 코드 내부에서 상대적으로 자유롭게 선언이 가능하다.

// 함수 표현식
const hello = function(){
  console.log("hello");
}

반면 익명 함수를 변수에 할당하는 함수 표현식은 실제 코드 작성 위치에 도달해야 함수가 생성되기 때문에,
표현식 이후 범위에서만 호출 및 사용이 가능하다.

// 함수 표현식 with 화살표 함수
const hello = () => console.log("hello");

이때 익명 함수 lambda를 화살표 함수(arrow function)로 간결하게 표현할 수 있다.

화살표 함수는 기존의 `function` 키워드를 생략한 `() => {}`의 형태로 작성하며,
아래의 경우 때에 따라 괄호도 생략이 가능하다.

/* 받아오는 인수가 하나라면 앞의 괄호 () 생략 가능 */

// 인수가 1개
let hello = name => {
  const msg = `Hello, I'm ${name}.`;
  return msg;
}

// 인수가 2개
let hello = (name, age) => {
  const msg = `Hello, I'm ${name}. I'm ${age} years old.`;
  return msg;
}

/* 실행 코드가 한 줄이라면 뒤의 괄호 {} 생략 가능 */
let hello = (name, age) => console.log(`Hello, I'm ${name}. I'm ${age} years old.`);

/* return문 한 줄의 경우 return 키워드까지 생략 가능 */
let hello = (name, age) => { return `Hello, I'm ${name}. I'm ${age} years old.` };
let hello = (name, age) => `Hello, I'm ${name}. I'm ${age} years old.`;