본문 바로가기
[ Developer ]/JavaScript

[JavaScript] 자바스크립트 함수 스스로 호출하는 익명 함수

by 김현섭. 2017. 7. 19.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
스스로 호출하는 익명 함수
자바스크립트에서는 일반적으로 함수를 특정 시점에 정의하고 나중에 해당 함수를 호출한다. 스스로 호출하는 함수를 이용하면 브라우저에서 함수 정의를 파싱할 때 해당 함수가 실행된다. 문법은 다음과 같다.

1
2
3
4
5
<script type="text/javascript">
    (function () {
        // 함수 본문
    }());
</script>
cs

보다시피 괄호 안에 함수를 집어넣을 필요가 있는데, 스스로 호출하는 함수는 반드시 함수 표현식이어야 하기 때문이다. 또 다른 문법은 다음과 같다.

1
2
3
4
5
<script type="text/javascript">
    (function () {
        // 함수 본문
    })();
</script>
cs

스스로 호출하는 함수의 이점은 코드를 한 번 실행해야 하지만 전역 또는 심지어 지역 변수로도 선언하고 싶지 않은 경우다. 예제에서는 함수에 대한 참조를 유지하지 않았다. 함수가 초기화되고 나서 구문 끝의 () 때문에 함수가 곧바로 호출된다.

이 방법은 초기화할 때 굉장히 유용한데, 함수에 대한 참조를 유지하지 않기 때문에 딱 한 번만 수행되게 할 수 있다.

다음 예제를 보자.

1
2
3
4
5
<script type="text/javascript">
    (function (){
        console.log("Hello world!");    // Hello world!
    })();
</script>
cs

스스로 호출하는 함수에 매개변수를 전달할 수도 있다. 다음 예제를 보자.

1
2
3
4
5
6
<script type="text/javascript">
    var result = (function (x, y){
        return x*y;
    })(6,6);
    console.log(result);    // 36
</script>
cs

아울러 다른 전역 객체에 대한 참조를 갖게 하는 것이 일반적인 관례다. 다음 예제를 보자.

1
2
3
4
5
<script type="text/javascript">
    (function (w, d, $) {
       // 함수 본문
    }(windowdocument, jQuery));
</script>
cs