모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다. 


자바스크립트에서는 함수도 하나의 자료형이라 매개변수로 전달 할 수 있다. 이를 콜백 함수라고 한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
 콜백함수
*/    
 
function callFiveTimes (a) {
    // 5회 반복
    for (var i = 0; i < 5; i++) {
        callback();
    }
}
 
var callback = function () {
    alert('함수 호출');
};
 
callFiveTimes(callback);
 
</script>
</head>
<body>
 
</body>
</html>
cs



결과 : alert 창 5회 출력


익명콜백함수 : 콜백함수는 익명 함수로 사용하는 경우가 많다.

위와 같은 값을 출력하는 코드이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
 콜백함수
자바스크립트에서는 함수도 하나의 자료형이기 때문에 매개변수로 전달 할 수 있다. 
*/    
 
function call(callback) {
    for (var i = 0; i < 2; i++) {
        callback();
    }
}
 
/*
var callback = function () {
    alert('함수 호출');
}
call(callback);
*/
 
call (function () {
    alert('함수 호출');
});
 
 
</script>
</head>
<body>
 
</body>
</html>
cs




함수를 리턴하는 함수

함수를 매개변수로 전달할 수 있다는 건 함수를 리턴하는 함수도 만들 수 있다는 의미이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
함수를 리턴하는 함수
*/    
 
function returnFunc () {
    return function () {
        alert('hello javascript');
    };
}
 
returnFunc()(); // ()() 호출하면 함수 안의 함수를 호출할 수 수 있다.
 
 
</script>
</head>
<body>
 
</body>
</html>
cs


함수를 리턴하는 함수는 어디에 사용하나?

함수를 리턴하는 함수를 사용하는 이유는 클로저 때문이다 


클로저 예시)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
클로저(closure)
*/    
 
function test (name) {
    var output = 'Hello, ' + name + ' !';
}
 
alert(output); // output은 지역변수라 함수 외부에서 사용할 수 없음
 
</script>
</head>
<body>
 
</body>
</html>
cs


output은 지역변수라 함수 외부에서 사용할 수 없다. 하지만 클로저를 사용하면 이 규칙을 무시할 수 있다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
클로저(closure)
*/    
 
function test (name) {
    var output = 'Hello, ' + name + ' !';
    
    return function () {
        alert(output);
    };
}
 
test('moondol')(); 
 
</script>
</head>
<body>
 
</body>
</html>
cs


지역변수 output을 남겨둔다고 외부에서 마음대로 사용할 수 있는 것은 아니다. 

반드시 리턴된 클로저 함수를 사용해야 지역 변수 output을 사용할 수 있다. 클로저 함수로 인해 남은 지역변수는 각각의 클로저 함수의 고유한 변수이다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
클로저(closure)
*/    
 
function test(name) {
    var output = 'Hello, ' + name + ' !!';
    return function () {
        alert(output);
    };
}
 
var test_1 = test('1111')();
var test_2 = test('2222')();
 
</script>
</head>
<body>
 
</body>
</html>
cs

test_1과 test_2가 각각 호출되는 것을 알 수 있다.


퇴사 관련 이야기들을 모아 책으로 출판했습니다. 

아래 링크에서 전체 목차를 읽어보세요!

대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659



아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.

http://www.bookk.co.kr/community/postscript

저작자표시 비영리 변경금지 (새창열림)

'문돌이의 IT > JavaScript' 카테고리의 다른 글

자바스크립트 객체 javascript object  (0) 2017.10.06
자바스크립트 setTImeout 실행순서  (0) 2017.10.05
자바스크립트 함수  (0) 2017.10.03
자바스크립트 기본문법  (0) 2017.10.02
자바스크립트의 역사 history of javascript  (0) 2017.10.01

+ Recent posts

티스토리툴바