js_practice/1_function_1.html at master · 200wonman/js_practice · GitHub

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 함수선언, 함수호출을 이해하여야 인자로 값을 전달시. 헷갈리지않는다.
        // 1.함수 선언
        // 2.함수 호출

        // 함수를 선언
        function doSomeThing() {
            console.log("이것은 출력됩니까?");
        }

        // 함수를 선언만해서는 콘솔에서 아무런 반응이 없다.
        // 호출을 해야한다.
        doSomeThing(); // 함수 호출 방법


        // ----------------------------------------------
        console.log("----------------------------------");


        /* 인자를 받아 함수를 호출해보자. */
        function add(a,b){
            const result = a+b;
        }

        // 콘솔에 값이 나는가?
        add(1,3);

        // 왜?
        // function add에 return이 없으며, return이있어도 콘솔에값을 적어야한다.
        function add2(a,b){
            const result = a+b;
            return result;
        }

        // 그럼 콘솔에 function add 값을 어떻게 보이게 해야할까?
        console.log( add2(3,4) );

        // 하지만보통 이렇게씀.
        const r = add2(3,4);
        console.log( r );


        // ----------------------------------------------
        console.log("----------------------------------");


        // 함수 자체를 인자로 전달

        function comeOn(func) {
            console.log(func);
        }


        function add2(a,b){
            const result = a+b;
            return result;
        }

        comeOn( add2 );
        /*
            이렇게보내면

            function add2(a,b){
                const result = a+b;
                return result;
            }

            이 함수 자체를 comeOn function에 전달된다.
            그래서 console을 확인하면 함수식자체가 출력되어져있음.

        */


        /*
            그럼 이렇게 보내면? -> add2함수를 호출해버리니 add2함수의 식이 전달되어, 숫자가 아닌 값을 더해서 NaN이 나온다.
        */
        comeOn( add2() ); // 결과 : NaN


        /*
            그래서 이렇게 함수를 전달한다고 생각하지만, 이건 add2의 식이 먼저 실행된 후의 값을 전달하는 것이다.
            함수전달방법이 아님!
        */
       comeOn( add2(1,3) ); // 결과 : 4


       /*
            함수의 이름만으로 함수를 전달하는 올바른 방법이다.
       */
       comeOn( add2 );


        // ----------------------------------------------
        console.log("----------------------------------");


        /*
            Q. 올바른 방법인데 콘솔에 식이 되는게 아니라 함수식만 보였잖아;;
            A. 찐찐 함수 전달받아서 사용하는 방법은 사실 지금부터임.
               위에 내용은 계산이 끝난 값을 전달하는것과 함수 자체를 인자로 전달하는것의차이를 보여주기 위함이었음 ㅇㅇ.

            1. add3에서 데이터를 가공하는 식을만듬.
            2. 데이터가공하는 함수에 값을 전달하는 함수를 만듬.

            Q. 이렇게 왜 하냐?
            A. 일부 작업을 외부 함수에 위임하고, 내부 함수에게 해당 작업의 구현을 책임지도록 하는 것이다.
                - comeOn2 함수는 add3 함수를 인자로 받습니다.
                  이 경우 comeOn2 함수에서 add3 함수를 호출하고, 그 결과를 출력합니다.
                - 이 패턴을 사용하면 comeOn2 함수에서 add3 함수의 구현 내용을 변경해도 comeOn2 함수를 수정할 필요가 없습니다. <-
                - 이러한 패턴은 유지보수성을 높이고 코드의 재사용성을 높이는 데 도움이 됩니다.
        */

        function comeOn2(func) {
            const r = add3(2,4);
            console.log(r);
        }


        function add3(a,b){
            const result = a+b;
            return result;
        }

        comeOn2( add3 );


        // ----------------------------------------------
        console.log("----------------------------------");


        // 문제1.
        function add4(a,b){
            const result = a+b;
            return result;
        }


        const comeOn3 = add4;

        console.log(comeOn3); // 무엇이 찍힐까요?


        // 문제2.
        function add5(a,b){
            const result = a+b;
            console.log(result); // 무엇이 찍힐까요?
            return result;
        }


        const comeOn4 = add5;
        comeOn4(4,5);


    </script>

</body>
</html>