Javascript 일반 함수, 인라인(Inline) 함수 그리고 익명(Anonymous) 함수

지난 포스팅(http://ozit.co.kr/194) 때 잠깐 언급되고, 간단히 사용되었던 익명 함수와 인라인 함수에 대해 좀 더 자세히 알아보기 위해 이번 글을 작성하였습니다.

 

여러분은 Javascript에서 함수 작성 시, 보통 어떻게 작성하시나요?

 

대부분 아래와 같이 작성하시지 않으시나요?

 

function test() {     // 인자와 반환값이 없는 함수

...

}

 

function test(val1, val2) {    // 인자를 받는 함수

...

}

 

function test(val1) {    // 인자도 받고, 반환값도 있는 함수

...

 

return result;

}

 

함수는 일반적으로  function 키워드로 시작하여 함수명 그리고 인자 목록(입력받는 인자가 있는 경우) 그리고, 함수 몸체(실제 구현부), 마지막으로 반환값이 있는 경우 return 구문으로 마무리됩니다.

 

보통 일반적인 함수(function)라 함은 위와 같이 구현된 함수를 말합니다.

 

그러면 조금 다른 형태로 구현된 함수들이 또 있을까요?

바로 인라인 함수(inline function)와 익명 함수(anonymous function)라는 것이 있습니다.

 

어떤 점이 다른 것일까요? 함수를 작성하는 방법에 대한 차이와 특이점에 대해 간단히 알아보겠습니다.

 

 

1. 일반 함수 ((Regular) Function)

<script type="text/javascript">

function test() {

alert("이것은 일반 함수입니다.");

}

</script>

 

<a href="#" onclick="javascript:test();">함수실행!!</a>

 

 

2. 인라인 함수 (Inline Function)

<script type="text/javascript">

var test = function() {

alert("이것은 인라인 함수입니다.");

}

</script>

 

<a href="#" onclick="javascript:test();">함수실행!!</a>

 

 

3. 익명 함수 (Anonymous Function)

<script type="text/javascript">

 

...

$(document).ready(function() {

...

 

$('test_call').click(function() {    // id = 'test_call' 인 개체(object)에 click 이벤트가 발생되었을 때 호출.

alert("이것은 익명 함수입니다.");

});

...

}

 

<a href='#' id='test_call'>함수실행!!</a>  

 

함수 작성 방법에 대해서 알아보았는데, 어떤 차이가 있는지 아시겠는지요?

 

간단한 차이를 보자면

일반 함수는 정말 다른 언어의 함수와 동일하게 일반적인 형태를 띄고 있습니다.

인라인 함수는 함수 정의를 변수에 할당하는 특이점을 보입니다.

그리고 익명 함수는 특정 이벤트 내에 이름 없이 정의되는 것이 조금 다릅니다.

 

 

인라인 함수는 함수명 대신 변수에 함수를 할당합니다.

인라인 함수와 일반 함수의 큰 차이는 함수 자체를 변수에 할당하는지 여부입니다.

 

함수의 정의 자체를 test라는 변수에 할당하고 있고, 이 함수를 할당받은 객체를 통해 함수를 호출할 수 있습니다.

그런데 실질적으로 일반 함수나 인라인 함수의 호출 방법은 동일합니다. 호출하는데에 있어서 함수명을 사용하느냐 함수 변수명을 사용하느냐의 차이인데, 보통 동일한 이름을 사용하므로 사용에 있어서 큰 차이는 없습니다.

 

내부적인 동작에 있어서 약간의 다른 차이는 있는데, 일반 함수의 경우는 브라우저 자바 엔진이 javascript 를 코드 전체를 파싱(Parsing)하는 단계에 생성되는 반면, 인라인 함수는 변수에 대입되는 방식이므로 런타임(Runtime) 시에 생성됩니다.

 

이렇게 함수가 생성되는 시점으로 본다면 인라인 함수와 익명 함수는 동일합니다.

익명 함수 또한 인라인 함수와 동일하게 런타임 시에 함수가 생성됩니다.

 

하지만 인라인 함수와 익명 함수는 차이점이 있는데, 이는 재사용성의 여부입니다.

인라인 함수는 특정 변수에 할당 되므로 이 변수를 이용하여 다른 코드에서 함수를 재사용할 수 있습니다. 반면 익명함수는 특정 코드 내에 한정되어 정의되기 때문에 다른 곳에서 재사용할 수 없습니다. 익명 함수를 할당받은 변수도 없고, 함수명도 없기 때문에 다른 곳에서 접근할 수 있는 방법이 없지요.

 

다시 한 번 정리하자면 재사용 가능 여부로 함수를 구분해 볼 때, 일반 함수와 인라인 함수는 재사용이 가능하며(함수 변수와 함수명을 통해 접근), 익명 함수는 재사용이 불가능합니다.

 

그리고 추가로 덧붙이자면 보통 개발 편의성 때문에 익명 함수와 인라인 함수를 종종 사용하는 경우가 많은데, 큰 차이는 아니더라도 실제 익명함수와 인라인 함수는 성능상의 저하가 있을 수 있습니다. 왜냐하면 일반 함수의 경우 파싱 단계에서 함수를 생성하고, 재사용하지만, 익명 함수와 인라인 함수는 매번 사용될 때마다 런타임 시에 생성되기 때문입니다.

 

단순한 함수 하나를 작성하더라도 함수의 가독성, 재사용성, 성능, 사용 빈도 등 이러한 다양한 요소들을 염두해 두고 사용하는 것이 좀 더 멋진 개발자의 자세가 아닐까 싶습니다.^^ (무슨 소리야!! 퍽퍽!!^_^)