함수 리터럴(Function Literal)은 이름이 없는 함수, 즉 익명 함수(Anonymous Function)를 정의하는 표현식입니다. 자바스크립트에서는 함수를 값처럼 다룰 수 있기 때문에, 함수 리터럴로 정의한 익명 함수를 변수에 할당하거나 다른 함수의 인수로 전달할 수 있습니다.
함수 리터럴의 기본 개념
일반적인 함수 선언문은 function 함수이름() {} 형태로 이름을 붙여 정의하지만, 함수 리터럴은 function(x, y) { ... }처럼 이름 없이 표현식 자체로 함수를 생성합니다. 아래 예제에서는 익명 함수를 변수 func에 할당한 뒤, 필요할 때 해당 변수를 통해 함수를 호출하고 있습니다.
예제 코드
<html>
<head>
<script>
// 함수 리터럴(익명 함수)을 변수 func에 할당
var func = function(x, y) { return x * y; };
function secondFunction() {
var result;
result = func(10, 20); // 변수를 통해 익명 함수 호출
document.write(result); // 결과 출력: 200
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다.</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
</body>
</html>
실행 결과
버튼을 클릭하면 secondFunction()이 실행되고, 내부에서 변수 func에 저장된 익명 함수가 (10, 20) 인수와 함께 호출됩니다. 두 수를 곱한 결과인 200이 화면에 출력됩니다.
참고: 화살표 함수(Arrow Function)
ES6(ECMAScript 2015)부터는 함수 리터럴을 더 간결하게 표현할 수 있는 화살표 함수 문법이 도입되었습니다. 위 예제의 익명 함수는 다음과 같이 작성할 수도 있습니다.
var func = (x, y) => x * y;
함수 리터럴은 콜백 함수, 이벤트 핸들러, 즉시 실행 함수(IIFE) 등 현대 자바스크립트에서 매우 널리 활용되는 핵심 개념이므로, 반드시 익혀두는 것이 좋습니다.