함수 리터럴(Function Literal)이란?
자바스크립트 1.2부터 함수 리터럴(function literal)이라는 새로운 함수 정의 방식이 도입되었습니다. 함수 리터럴은 이름 없는 함수, 즉 익명 함수(anonymous function)를 정의하는 표현식입니다.
일반적인 함수 선언문과 달리, 함수 리터럴은 표현식의 일부로 사용할 수 있으며 변수에 할당하거나 다른 함수의 인수로 전달하는 등 유연하게 활용할 수 있습니다.
기본 문법
var func = function(x, y) { return x * y };위 코드처럼 function 키워드 뒤에 함수 이름을 붙이지 않고, 정의된 함수를 변수에 저장한 뒤 해당 변수를 통해 호출합니다.
예제
다음 예제를 통해 자바스크립트에서 함수 리터럴을 실제로 구현해 볼 수 있습니다.
<html>
<head>
<script>
<!--
var func = function(x,y){ return x*y };
function secondFunction(){
var result;
result = func(10,20);
document.write(result);
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다.</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
<p>함수 내부에서 다양한 매개변수 값을 넣어 직접 테스트해 보세요.</p>
</body>
</html>코드 설명
1. var func = function(x,y){ return x*y }; — 두 수를 곱하는 익명 함수를 정의하고 변수 func에 할당합니다.
2. secondFunction() — 버튼 클릭 시 실행되는 일반 함수로, 내부에서 func(10,20)을 호출하여 결과값 200을 화면에 출력합니다.
참고 사항
현대 자바스크립트(ES6 이상)에서는 함수 리터럴을 더 간결하게 표현하는 화살표 함수(arrow function)도 널리 사용됩니다. 위 예제는 다음과 같이 작성할 수도 있습니다.
const func = (x, y) => x * y;
함수 리터럴은 콜백 함수 작성, 즉시 실행 함수(IIFE), 클로저 구현 등 다양한 상황에서 유용하게 활용되므로 반드시 익혀두는 것이 좋습니다.