자바스크립트 익명 함수와 인라인 함수의 차이점 완벽 정리

자바스크립트에서 함수를 다루다 보면 익명 함수(Anonymous Function)와 인라인 함수(Inline Function)라는 두 가지 개념을 자주 접하게 됩니다. 이름이 비슷해서 혼동하기 쉽지만, 두 함수는 선언 방식과 재사용성 측면에서 뚜렷한 차이가 있습니다. 이 글에서는 각각의 개념과 사용 예제를 통해 차이점을 명확히 정리해 드립니다.

익명 함수(Anonymous Function)란?

익명 함수는 이름 그대로 함수 이름 없이 정의되는 함수입니다. 별도의 식별자를 갖지 않기 때문에 주로 다른 함수의 인수(argument)로 전달되거나, 변수에 할당되어 사용됩니다.

변수에 할당하는 방식은 다음과 같습니다.

var myfunc = function() {
    alert('This is anonymous');
}

또한 콜백 함수로 활용하는 대표적인 예로는 setTimeout()이 있습니다. 아래 코드는 3초 후에 실행되는 익명 함수를 인수로 전달하는 방식입니다.

setTimeout(function() {
    alert('Demo');
}, 3000);

이처럼 익명 함수는 일회성 작업이나 이벤트 핸들러 등, 이름을 붙일 필요가 없는 상황에서 간결하게 사용할 수 있다는 장점이 있습니다.

인라인 함수(Inline Function)란?

인라인 함수는 런타임에 생성된 변수에 할당되는 자바스크립트 함수를 의미합니다. 익명 함수와 유사해 보이지만, 결정적인 차이는 변수에 할당되어 언제든 재사용할 수 있다는 점입니다.

다음 예제처럼 함수를 변수에 저장한 뒤, jQuery의 클릭 이벤트 핸들러로 전달하여 여러 곳에서 활용할 수 있습니다.

var myfunc = function() {
    alert('inline')
};
$('a').click(myfunc);

두 함수의 핵심 차이점

• 익명 함수: 이름 없이 정의되며, 주로 콜백이나 일회성 실행 용도로 사용됩니다. 변수에 할당하지 않으면 재사용이 불가능합니다.
• 인라인 함수: 런타임에 생성된 변수에 할당되므로, 동일한 로직을 필요할 때마다 반복적으로 호출·재사용할 수 있습니다.

정리하면, 익명 함수가 '이름 없는 함수 그 자체'에 가깝다면, 인라인 함수는 '익명 함수를 변수에 담아 재사용 가능하게 만든 형태'라고 이해하면 쉽습니다. 상황에 맞게 적절히 활용하면 코드의 가독성과 유지보수성을 모두 높일 수 있습니다.