Categories: JavaScript

JavaScript 자바스크립트 함수 선언식 vs 표현식 차이와 장단점

javascript

함수 선언식과 표현식이란?

자바스크립트에서 함수를 정의하는 두 가지 주요 방법은 함수 선언식과 함수 표현식입니다. 이 둘은 코드 작성 시 약간의 차이점을 가지며, 각각의 특성에 따라 상황에 맞게 사용되고 있습니다. 함수의 선언과 호출이 코드의 실행 흐름에 어떤 영향을 미치는지 알아보겠습니다.

함수 선언식은 가장 기본적인 함수 정의 방식 중 하나로, 다음과 같은 형태를 가집니다:

JavaScript

function 함수이름(매개변수1, 매개변수2, ...) {
    // 함수가 수행할 작업들
    return 결과값; // 선택적으로 값을 반환할 수 있음
}

JavaScript

호이스팅(Hoisting): 함수 선언식은 호이스팅에 영향을 받습니다. 스크립트 실행 전에 함수가 메모리에 먼저 로드되기 때문에, 함수를 선언하기 전에 호출해도 정상적으로 동작합니다.
전역 및 블록 스코프: 함수 선언식은 전역 스코프 또는 블록 스코프에서 사용할 수 있습니다.
이름이 있는 함수: 함수에 이름이 있어서 디버깅과 스택 추적(stack trace)이 용이합니다.

예시

JavaScript

더하기(3, 5); // 호출 가능

function 더하기(x, y) {
    const 합계 = x + y;
    return 합계;
}

JavaScript

함수 표현식은 함수를 변수에 할당하는 방식으로 정의되며, 다음과 같은 형태를 가집니다:

JavaScript

const 함수이름 = function(매개변수1, 매개변수2, ...) {
    // 함수가 수행할 작업들
    return 결과값; // 선택적으로 값을 반환할 수 있음
};

JavaScript

호이스팅(Hoisting): 변수 선언은 호이스팅이 발생하지만, 함수의 할당은 호이스팅되지 않습니다. 따라서 변수가 선언된 이후에 해당 함수를 사용할 수 있습니다.
전역 및 블록 스코프: 함수 표현식은 변수의 스코프에 영향을 받으며, 블록 스코프에서도 사용 가능합니다.
익명 함수 또는 기명 함수: 함수 표현식은 함수에 이름을 붙이지 않아도 됩니다. 이름이 붙으면 기명 함수 표현식이 됩니다.

예시

JavaScript

const 더하기 = function(x, y) {
    const 합계 = x + y;
    return 합계;
};

더하기(3, 5); // 호출 가능

JavaScript

호이스팅 (Hoisting): 함수 선언식은 전체가 호이스팅되어 어디서든 호출 가능합니다. 이로 인해 함수 정의가 코드 어디에 있든 호출할 수 있어 편리합니다.
가독성: 코드의 가독성을 높일 수 있습니다. 함수 이름이 선언과 동시에 나타나므로 코드를 읽을 때 함수의 역할을 쉽게 파악할 수 있습니다.
이름의 필수 여부: 함수 선언식은 반드시 이름이 필요합니다. 이는 디버깅 시 함수 호출 스택 추적에서 의미있는 이름이 표시되어 유용합니다.

유연성 부족: 함수 선언식은 호이스팅에 의해 어디서든 호출 가능하지만, 이로 인해 코드의 유연성이 떨어질 수 있습니다. 함수가 선언되기 전에 호출하면 에러가 발생할 수 있습니다.

호이스팅 제어: 함수 표현식은 변수만 호이스팅되고 초기화는 선언 지점에서 이루어지기 때문에 변수 할당 이후에만 호출할 수 있습니다. 이는 코드의 논리적 흐름을 더 잘 제어할 수 있게 합니다.
익명 함수 사용: 함수 표현식은 이름이 없는 익명 함수로 정의할 수 있습니다. 이는 한 번만 사용되는 간단한 함수를 정의할 때 유용합니다.