자바스크립트 함수 표현식

 

함수 표현식이란?

함수 표현식은 자바스크립트에서 함수를 변수에 할당하여 사용하는 방식입니다. 함수를 단순히 실행되는 코드 블록이 아니라, 값처럼 다룰 수 있다는 것이 가장 큰 특징입니다. 함수 선언과 달리 호이스팅이 되지 않아 선언 전에 호출하면 오류가 발생합니다.

익명 함수 (Anonymous Function)

• 이름이 없는 함수입니다.
• 주로 다른 함수의 인자로 전달하거나, 콜백 함수로 사용됩니다.

JavaScript

// 예시 1: 배열의 각 요소에 2를 곱하여 새로운 배열 만들기
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
    return number * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10] 출력

코드를 사용할 때는 주의가 필요합니다.

 

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

• 정의와 동시에 실행되는 함수입니다.
• 변수의 스코프를 제한하거나, 모듈 패턴을 구현할 때 사용됩니다.

JavaScript

// 예시 2: 즉시 실행 함수를 사용하여 변수의 스코프 제한
(function() {
    let message = "Hello, world!";
    console.log(message); // Hello, world! 출력
})();

// 외부에서 message 변수에 접근할 수 없음
console.log(message); // ReferenceError: message is not defined

코드를 사용할 때는 주의가 필요합니다.

 

화살표 함수 (Arrow Function)

• ES6에서 도입된 간결한 함수 표현식입니다.
• 익명 함수를 더욱 간단하게 작성할 수 있습니다.

JavaScript

// 예시 3: 화살표 함수를 사용하여 두 수를 더하는 함수
const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 7 출력

코드를 사용할 때는 주의가 필요합니다.

 

세 가지 함수 표현식 비교

종류설명예시

익명 함수	이름이 없는 함수, 다른 함수의 인자로 전달	function(number) { return number * 2; }
즉시 실행 함수	정의와 동시에 실행	(function() { ... })();
화살표 함수	간결한 함수 표현식, 익명 함수를 더 간단하게 작성	(a, b) => a + b

Sheets로 내보내기

함수 표현식의 장점

• 유연성: 함수를 값처럼 다룰 수 있어 다양한 상황에 활용 가능
• 익명성: 이름이 필요 없는 경우 익명 함수로 간결하게 표현
• 클로저: 함수 내부에서 외부 변수를 참조하는 클로저를 만들 수 있음
• 고차 함수: 다른 함수를 인자로 받거나, 함수를 반환하는 고차 함수를 구현 가능

정리

함수 표현식은 자바스크립트 개발에서 매우 유용한 도구입니다. 익명 함수, 즉시 실행 함수, 화살표 함수 등 다양한 형태로 사용할 수 있으며, 각각의 특징을 이해하고 적절하게 활용하면 더욱 효율적인 코드를 작성할 수 있습니다.

주의: 함수 선언과 함수 표현식의 호이스팅 여부가 다르므로, 코드 작성 시 주의해야 합니다.