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, $) {
// 함수 본문
}(window, document, jQuery));
</script>
|
cs |
'[ Developer ] > JavaScript' 카테고리의 다른 글
[JavaScript] Ch2-6 자바스크립트 배열 (0) | 2018.02.06 |
---|---|
[JavaScript] Ch2-5 자바스크립트 함수 스스로 호출하는 명명 함수 (0) | 2017.08.14 |
[JavaScript] Ch2-5 자바스크립트 함수 함수는 값이다 (0) | 2017.05.31 |
[JavaScript] 자바스크립트 함수 지역 변수 (0) | 2017.04.20 |
[JavaScript] 자바스크립트 함수 값을 반환하는 함수 (0) | 2017.02.07 |