본문으로 건너뛰기

함수 선언문과 함수 표현식

· 약 4분
준열
준열
프론트엔드 개발자

코어 자바스크립트 스터디 4주차-1 내용을 정리했습니다. 이번 주제는 함수 선언문과 함수 표현식입니다.

함수를 정의하는 두 가지 방법​

함수를 새롭게 정의할 때 사용하는 방식에는 크게 두 가지가 있습니다.

1. 함수 선언문 (Function Declaration)​

function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미합니다.

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

2. 함수 표현식 (Function Expression)​

정의한 function을 별도의 변수에 할당하는 것을 의미합니다.

기명 함수 표현식​

var multiply = function multiply(a, b) {
  return a * b;
};

익명 함수 표현식​

var multiply = function (a, b) {
  return a * b;
};

주의사항: 익명 함수 표현식은 외부에서는 함수명으로 함수를 호출할 수 없습니다.

일반적으로 함수 표현식은 익명 함수 표현식을 말합니다.

🔄 함수 선언문과 함수 표현식의 실질적인 차이​

호이스팅 동작 비교​

원본 코드:

console.log(sum(1, 2));
console.log(multiply(3, 4));

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

var multiply = function (a, b) {
  return a * b;
};

호이스팅을 마친 상태:

var sum = function sum(a, b) {
  return a + b;
};

var multiply;

console.log(sum(1, 2)); // 3
console.log(multiply(3, 4)); // TypeError: multiply is not a function

multiply = function (a, b) {
  return a * b;
};

핵심 차이점:

  • 함수 선언문은 전체를 호이스팅
  • 함수 표현식은 변수 선언부만 호이스팅

그렇기에 함수도 하나의 값으로 취급할 수 있다고 말합니다. 함수를 다른 변수에 값으로써 할당한 것이 곧 함수 표현식입니다.

⚠️ 함수 선언문의 위험성​

우리는 글을 위에서 아래로, 좌에서 우로 읽는 문화환경에서 살아왔기에 아래에서 선언한 것이 위에서 문제 없이 실행되는 것을 받아들이기 어려울 수 있습니다.

극단적인 예시: 협업에서의 문제​

상황 설정:

  1. A 개발자가 전역 공간에 sum이라는 함수를 정의
  2. 이 함수는 단순히 두 숫자의 합을 반환하는 역할
  3. 여러 곳에서 잘 사용되고 있었음
// A 개발자가 작성한 함수
function sum(a, b) {
  return a + b; // 숫자 반환
}
  1. 이후 B 개발자가 같은 이름의 sum 함수를 다시 정의
  2. 이번에는 숫자를 더한 결과를 문자열 형태로 반환
// B 개발자가 작성한 함수 (같은 이름!)
function sum(a, b) {
  return String(a + b); // 문자열 반환
}

문제 발생​

자바스크립트에서 함수 선언문은 모두 위로 끌어올려지는(호이스팅) 특징이 있기 때문에, 동일한 이름의 함수가 있으면 나중에 선언된 함수가 기존 함수를 덮어씌우게 됩니다.

결과:

  • 원래는 숫자를 반환해야 하는 함수가 의도치 않게 문자열을 반환
  • 프로젝트 전반에 알 수 없는 버그가 퍼짐
  • 잘못된 값이더라도 자바스크립트의 암묵적 형변환 덕분에 오류가 발생하지 않는 경우가 많음
  • 문제는 터지지만 원인을 찾기 어려움
  • 디버깅은 엉뚱한 곳에서 시작될 수 있음

✅ 함수 표현식의 장점​

만약 함수 표현식이었다면?​

// A 개발자가 작성
var sum = function (a, b) {
  return a + b;
};

// 여기서 sum을 사용하는 코드들...

// B 개발자가 작성 (실수로 같은 이름 사용)
var sum = function (a, b) {
  return String(a + b);
};

함수 표현식의 안전성:

  • 함수 표현식은 선언된 이후부터만 효력이 생김
  • 이전 코드에서 함수를 호출하면 즉시 에러가 발생 → 빠른 원인 파악 가능
  • 중복 정의가 발생해도 어디서 덮어씌워졌는지 명확하게 드러남
  • 같은 이름의 함수가 여러 번 선언되더라도 문제의 원인을 훨씬 쉽게 찾을 수 있음

📚 협업에서의 교훈​

함수 선언문의 위험성​

  1. 전역 공간에 함수를 선언하는 습관은 위험
  2. 동일한 이름의 함수를 중복 선언하지 않도록 관리해야 함
  3. 호이스팅으로 인한 예측하기 어려운 동작

함수 표현식의 안전성​

  1. 협업 환경에서는 함수 표현식을 활용하는 것이 훨씬 안전
  2. 에러가 즉시 발생하여 문제를 빠르게 파악 가능
  3. 코드의 실행 순서가 명확하게 드러남
  4. 의도하지 않은 함수 덮어쓰기 방지

권장사항​

함수 선언문 사용 시기​

  • 전체 스코프에서 함수가 필요한 경우
  • 함수의 순서가 중요하지 않은 경우
  • 유틸리티 함수나 헬퍼 함수

함수 표현식 사용 시기​

  • 협업 환경에서의 안전성이 중요한 경우
  • 함수의 실행 순서를 명확히 하고 싶은 경우
  • 조건부로 함수를 정의해야 하는 경우
  • 변수 스코프 관리가 중요한 경우

정리​

  • 함수 선언문: 전체 호이스팅으로 인한 편의성 vs 예측하기 어려운 동작
  • 함수 표현식: 명확한 실행 순서와 안전성 vs 호이스팅 이전 사용 불가
  • 협업 환경에서는 함수 표현식이 더 안전한 선택
  • 전역 공간에서의 함수 선언은 가급적 피하기

함수는 단순한 코드 블록이 아니라 프로그램의 핵심 구성 요소입니다. 적절한 선언 방식을 선택하여 유지보수성과 협업 효율성을 높이는 것이 중요합니다.

스터디: 코어 자바스크립트 4주차-1