TIL

코드에서 자주 볼 수 있는 함수 형식들이 여러 형태를 가지고 있어 기본 개념이지만 헷갈릴 수 있다.
그 중 변수와 함수가 혼재되어 있는 함수 표현식을 확인하고 기본 형태인 함수 선언문과 비교하여 정확히 파악해보자.

함수 표현식

함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당
함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당 가능
=> "함수를 만들고 그 함수를 변수에 할당하기"

함수 표현식(Function Expression)과 함수 선언문(Function Declaration) 비교

◈ 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존대

// example
function sum(a, b) {
  return a + b;
}

• 함수 선언문이 정의되기 전에 호출 가능(스크립트 실행 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성하는 자바스크립트 내부 알고리즘 때문)
  함수 선언문은 스크립트 실행 준비 단계에서 생성되기 때문에 스크립트 내 어디에서든 접근 가능

sayHi("Brian"); // Hello, Brian

function sayHi(name) {
  alert(`Hello, ${name}`);
}

• 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 코드 블록 안에서만 유효!
  (블록 내에서는 어디서든 접근 가능!⭕
  블록 밖에서는 함수에 접근 불가!❌ Error 발생)

---

◈ 함수 표현식: 함수는 표현식이나 구문 구성 내부에 생성. 함수가 표현식의 일부로 존재

// example
// 함수가 변수 sum에 저장된 값이 되었음
let sum = function(a, b) {
  return a + b;
}

• 실행 흐름이 해당 함수에 도달했을 때 함수 생성, 사용 가능
  (함수 표현식으로 정의한 함수는 함수가 선언되기 전에 접근 불가)

sayHi("Brian"); // Error

const sayHi = function(name) {
  alert(`Hello, ${name});
}

• 코드 블록 밖에서 선언한 변수에 함수 표현식으로 만든 함수를 할당하여 코드 블록 밖에서 함수 호출 가능

※ 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있어 함수 선언문 사용 추천. 유연한 코드 구성, 가독성 높임
※ 함수 표현식은 함수 선언 방식이 적합하지 않거나 조건에 따라 함수를 선언해야 하는 경우 사용