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


 함수는 코드의 집합이며 모든 프로그래밍 언어에서 매우 중요한 내용이다. 


 function () {} <- 익명함수


 선언적 함수 : 

 function 함수() {


 } 


ex) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
    var func = function () { alert('함수 A');};
    
    function func() { alert('함수 B')};
    
    func();
    
</script>
</head>
<body>
 
</body>
</html>
cs


결과 : 선언적 함수가 먼저 생성되어 '함수 A' alert 창 출력


매개변수와 리턴 값

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
    function f(x) { return x*x; }
    
    alert(f(3));  // 3*3 = 9 출력
    
</script>
</head>
<body>
 
</body>
</html>
cs



 가변 인자 함수 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
    function sumAll () {
        alert(typeof (arguments) + ' : ' + arguments.length); // object : 9 출력
    }
    
    sumAll(1,2,3,4,5,6,7,8,9);
    
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
    function sumAll () {
        var output = 0;
        for (var i = 0; i < arguments.length; i++) {
            output += arguments[i]; 
        }
        return output;
    }
    
    alert(sumAll(1,2,3,4,5,6,7,8,9)); // result : 45
    
</script>
</head>
<body>
 
</body>
</html>
cs



내부함수


프로그램 규모가 커지면 다른 사람과 함께 개발을 해야 한다. 이때 충돌을 방지하기 위해 내부함수를 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
function 외부함수() {
    function 내부함수1 () {
 
    }
 
    function 내부함수2 () {
 
    }
 
    function 내부함수3 () {
 
    }
}
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
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
 square 함수명이 중복되어 0이 출력 됨. 사전에 다른 이름을 사용하기로 협의를 해도 되지만 내부 함수를 사용하면 더 간단하게 
 문제를 해결 할 수 있다.
 */
 
    // 제곱을 구함
    function square(x) {
        return x*x;
    }
    
    function pythagoras(width, height) {
        return Math.sqrt(square(width) + square(height));
    }    
    
    alert(pythagoras(3,4)); 
    
    function square(width, height, hypotenuse) {
        if (width * width + height * height == hypotenuse * hypotenuse) {
            return true;
        } else {
            return false
        }
    }
    
    
</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
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script>
 
/*
사전에 다른 이름을 사용하기로 협의를 해도 되지만 내부 함수를 사용하면 더 간단하게 문제를 해결 할 수 있다.
 */    
    function pythagoras(width, height) {
        // 제곱 구하는 부분을 내부 함수로 넣는다.
        function square(x) {
            return x*x;
        }
        return Math.sqrt(square(width) + square(height));
    }    
    
    alert(pythagoras(3,4)); 
    
    function square(width, height, hypotenuse) {
        if (width * width + height * height == hypotenuse * hypotenuse) {
            return true;
        } else {
            return false
        }
    }
    
    
</script>
</head>
<body>
 
</body>
</html>
cs


 주의할 점! 내부함수는 내부 함수가 포함 되는 함수에서만 사용할 수 있다. 따라서 외부에서는 사용할 수 없다. 

jQuery에서는 대부분의 선언적 함수를 내부함수로 작성한다. 


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

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

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



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

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


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

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

자바스크립트 setTImeout 실행순서  (0) 2017.10.05
자바스크립트 함수(2) 콜백함수 클로저  (0) 2017.10.04
자바스크립트 기본문법  (0) 2017.10.02
자바스크립트의 역사 history of javascript  (0) 2017.10.01
[HTML 웹프로그래밍]자바스크립트 문서객체모델 DOM  (0) 2017.05.15

+ Recent posts

티스토리툴바