JavaScript - function

Hunter Joe·2025년 2월 22일
0
post-thumbnail
  • 함수 선언문
  • 함수 표현식 + 화살표 함수(ES6)

함수 선언문

// Syntax

function a() {
  console.log("Hello World");
};

함수 표현식

// Syntax

// 익명 함수 
let b = function() {
  console.log("Hello World");
};

// 화살표 함수(ES6) 
const c = () => {
  console.log("Hello World");
};

비교

구분함수 선언문 (Function Declaration)함수 표현식 (Function Expression)
이름 유무✅ 반드시 함수 이름 필요✅ 익명 함수 가능 (let b = function() {...})
호이스팅✅ 호이스팅 O (선언 전에 호출 가능)❌ 호이스팅 X (선언 후에만 호출 가능)
실행 시점코드 실행 전에 미리 등록됨변수에 할당된 후에 실행 가능
선언 방식독립적인 함수로 선언됨변수에 저장됨 (값처럼 사용 가능)
사용 예전역 또는 재사용 함수콜백 함수, 동적 함수 생성

함수 선언문과 함수 표현식은 같은 기능을 하지만 호출 시점, 호이스팅 등이 다르다.

함수 선언문으로 작성한 코드는 메모리 측면에서 비효율적일까?

나는 함수 선언문으로만 이루어진 코드가 함수 표현식 만을 사용한 코드보다 단순 메모리 측면에서 비효율적일 것이라고 생각했다.
왜냐하면 함수 선언문은 런타임 이전에 호이스팅 되어 초기화 되기 때문이다.

과연 그럴까?

함수 표현식은 변수에 할당되는 시점에만 메모리를 차지하고 더 이상 사용되지 않으면 GC(Garbage Collection)에 의해 수거된다. (JS 내부 동작 원리)

반면 함수 선언문은 호이스팅에 의해 메모리에 미리 로드되어 메모리를 차지하지만 자주 사용될 수 있는 함수라면 그에 따른 장점도 가지고 있다.

따라서 메모리 효율성은 코드의 사용 방식에 따라달라지며,
함수 선언문은 주로 함수가 전체 실행 과정에서 자주 호출되거나 여러 번 호출 될 경우에 더 유리하다.
함수 표현식은 필요한 시점에만 존재하는 함수에 더 적합하다.

무조건적으로 함수 선언문이 비효율적이다" 라는것은 틀린 것

참고 자료

JavaScript Functions: A Beginner's Guide to Getting Started with the Basics

profile
Async FE 취업 준비중.. Await .. (취업완료 대기중) ..

0개의 댓글

관련 채용 정보