함수의 표현식

자바스크립트에서는 함수의 선언문을 이용하여 선언 후에 사용할 수 있지만 표현식으로 정의하는 것이 권고되고 있다. 표현식으로 함수를 정의하면 함수의 호이스팅이 일어나지 않는다. 이는 함수나 변수의 생성 작업과 값을 초기화하는 작업이 분리되어 있기 때문이다. 아래와 같이 = 연산자를 이용하여 변수에 할당하는 표현으로 함수가 할당된 변수가 함수명처럼 쓰인다. 함수를 표현식으로 정의하는 예는 여러 가지 유형으로 제공된다.

var 변수 = function 함수명(매개변수list..){ 실행할 코드 }

 

① 이름이 있는 함수(named function expression)

보통 함수 표현식이라 하는 것이 함수명을 명시하지 않고 사용하는 것을 의미하지만 함수명을 정의하여 사용하는 방법을 살펴보자. 이렇게 정의된 함수명은 함수 내부에서 호출되는 용도로 쓰이며 외부에서는 함수명을 사용할 수 없다.

표현식으로 함수를 정의하는 경우 호이스팅이 일어나는지부터 살펴보자. 다음과 같은 코드를 작성한다. test라는 함수를 정의하여 myfunc이라는 변수에 할당하였다.

 

실행하면 다음과 같이 “’test’이(가) 정의되지 않았습니다.”라는 메시지가 출력된다. 함수의 호이스팅이 일어나지 않아 함수명을 인식하지 못하는 것을 확인할 수 있다.

 

코드를 다음과 같이 수정하고 실행한다.

 

test함수명을 인식하지 못하는 것을 확인할 수 있다. 표현식으로 정의된 함수의 함수명은 함수내부에서만 사용할 수 있고 함수 외부에서는 사용할 수 없다.

test라는 함수명 대신에 함수를 할당한 myfunc을 함수명 처럼 사용하면 정상적으로 잘 실행되는 것을 확인할 수 있다.

 

② 익명함수

함수를 표현식으로 선언하며 이름 없이 정의하는 경우 이를 익명함수라 한다. 브라우저에 탑재되어 있는 자바스크립트 엔진은 익명함수를 동적으로 생성한다. 웹 페이지가 실행되어 결과가 보여질 때 함수의 처리결과를 동적으로 받아오고 싶을 때 사용한다.

다음과 같은 코드를 추가한다.

 

③ callback함수

위에서 정의한 익명함수는 보통 callback함수로 쓰여진다. 그동안 우리는 함수가 호출되는 시점을 우리가 결정해서 함수 호출문을 명시했었다. callback함수란 이벤트가 발생했거나 시스템 내부에서 함수가 실행 되어야 하는 시점이 되면 자동으로 실행되는 함수를 말한다. 즉, 실행시점을 개발자가 명시적으로 정하는 것이 아니라는 것이다. 또 다른 함수의 매개변수로 넘기는 함수도 callback함수다.

window객체의 setTimeout이나 setInterval메소드를 호출할 때 실행할 함수의 이름을 매개변수로 넘길 것이다.  window.setTimeout(함수명, delay시간)

위와 같이 매개변수로 넘겨지는 함수를 callback함수라 하는 것이다. 가장 대표적인 사용 예는 이벤트 처리다.

이벤트발생객체.이벤트명 = function(){            이벤트가 발생할 때 처리할 문장 }

 

다음과 같은 코드를 작성한다. “window.onload”는 페이지가 로딩되는 시점을 나타내는 이벤트 핸들러다. 익명의 함수가 연결되어 있으므로 페이지가 로딩될 때 내부 코드가 실행될 것이다.

 

실행해보자. 다음과 같이 익명함수가 페이지 로딩시에 실행되는 것을 알 수 있다

 

④ 자기자신을 호출하는 함수

즉시 실행 함수라고 부르기도 하며 이 함수는 선언과 동시에 실행되는 함수들이다. 전체 함수의 정의를 ()로 감싸고 호출이 될 수 있도록 ()를 추가하여 호출한다. 이 즉시 실행 함수는 내부에서 선언된 변수가 지역변수로 등록이 되기 때문에 외부에서 절대 변수를 접근할 수 없다.

즉시 실행되는 함수는 주로 jQuery나 다른 자바스크립트 프레임워크에서 사용될 것이다.

(function(){      실행할 코드; })();

 

다음과 같은 코드를 작성한다.