Hoon222y

[JavaScript] 5장. 함수 본문

코딩/교육

[JavaScript] 5장. 함수

hoon222y 2019. 1. 9. 19:56

5. 함수 

함수는 코드의 집합이다.


5.1 익명함수

-  함수지만 이름이 없는 함수. 

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <script>// 변수를 생성합니다.
        var 함수 = function() {
            var output = prompt('숫자를 입력해주세요.', '숫자');
            alert(output);
        };
        alert(함수);// 출력
    </script>
</head>
cs

 function () { 처럼 함수의 이름이 없는것을 볼 수 있다. (함수의 이름이 있다는 의미는 function 이름() { 이런 느낌이다. )  

이 때 출력 결과는 4번째 function~ 7 번째 줄 까지 출력이 된다. 즉, 함수 내부의 모든 코드를 다 볼 수 있다는 의미이다.  ( alert (함수) 부분을 alert( typeof 함수)) 로 바꾼 후 다시 돌려보면 결과는 function 이라는 출력값이 나오게 된다. ) 하지만 자바스크립트 내에서 이미 내장되어 있는 함수의 경우에는 볼 수 없도록 막아두었다. (ex prompt , alert 등등)


5.2 선언적 함수

선언적 함수는 익명 함수와 비슷한 기능을 하지만 조금의 차이점이 존재한다. 일단 선언적 함수의 생성에 대해서 먼저 보자면

1
2
3
4
5
6
7
8
<html>
<head>
    <script>// 변수를 생성합니다.
        var 함수 = function() { alert('익명 함수 선언');};            
                        // 익명 함수 선언뒤에는 ;이 붙는다.
        function 함수() {alert('선언적 함수 선언');}
    </script>
</head>
cs

 이런식으로 차이가 있다. (익명함수와 선언적 함수의 차이) 두 가지 모두 함수를 생성하는 방법이지만 호출 순서에 따라서 조금 다를 수 있다. 

1
2
3
4
5
6
7
<head>
    <script>
        함수();
        var 함수 = function () { alert('함수 A'); };
        var 함수 = function () { alert('함수 B'); };
    </script>
</head>
cs

해당 코드의 경우 익명 함수의 호출경우이다. 이때는 변수를 선언하기 이전에 변수를 사용하였기 때문에 오류가 발생하게 된다. 하지만 선언적 함수의 경우

1
2
3
4
5
6
7
<head>
    <script>
        함수();
        function 함수() { alert('함수 A'); }
        function 함수() { alert('함수 B'); }
    </script>
</head>
cs

 이 함수를 구현하게 되면 '함수 B' 라는 알람창이 뜨게 된다. 그 이유는 웹 브라우저는 script 안에 있는 코드를 순차적으로 읽는것이 아니라 선언적 함수 먼저 읽기 때문이다. 따라서 4번째줄 -> 5줄 -> 3줄 순으로 읽기 때문에 이와 같은 결과값이 나오게 된다. 즉,

1
2
3
4
5
6
7
8
9
<head>
    <script>
        // 함수를 생성합니다.
        var 함수 = function () { alert('함수 A'); }
        function 함수() { alert('함수 B'); }
        // 함수를 호출합니다.
        함수();
    </script>
</head>
cs

 이 경우에 결과값이 '함수 A' 가 나오는것을 유추 해볼 수 있다. 


5.3 매개변수와 리턴 값

매개변수 - 함수를 호출할 때 괄호 안에 적는 것

리턴 값 - 함수를 호출하고 함수가 변환되는 값


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
<head>
    <script>
        function test(){        
        var myName = 'ddd';
        alert('myName: ' + myName);    
        }
    test();
    </script>
</head> 
//myName : ddd 출력 
<script>
    function test(){
        var myName = 'ddd';
        //alert('myName: ' + myName);
    }
    test();
    alert('myName: ' + myName);
</script>
// 이건 아무런 값도 출력하지 않음 
<script>
    function test(){
        myName = 'ddd';
    }
    test();
    alert('myName: ' + myName);
</script>
//myName : ddd 출력 
cs

 일단 해당 코드를 살펴보자. var 라는 키워드 없이 변수를 선언하고 사용하면 생성된 위치와 상관없이 무조건 전역변수이다. var 를 통해서 만들면 선언 위치에서 만 사용할 수 있는 지역변수가 된다. 즉, 함수 밖에서 var를 사용하면 전역변수 이지만, 안에서 사용하면 지역변수라는 의미이다. 


추가적으로 자바스크립트에서의 특징에 대해서 이야기 해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    function test(num1 , num2){
        alert('함수 호출');    
    }
    test();
</script>
// 함수호출 된다.
<script>
    function add(arg1,arg2){
        return arg1+arg2;
    }
    alert(add(10,20));
    alert(add('hello','world'));
</script>
//30 과 hello world가 나온다.
cs

 해당 코드를 살펴보면 function의 매개변수 안에 키워드가 var, string처럼 따로 키워드를 작성하지 않는다. 또한 매개변수의 개수를 맞추지 않아도 동작이 된다. 또한 add 함수의 경우 매개변수로 들어가는 인자들의 키워드가 각각 자를때도 각각의 기능으로 동작하는 것을 볼 수 있다. 

1. 자바스크립트에서 함수는 매개변수가 함수값을 제어하지 못한다. (함수 오버로딩 불가능) 

2. 자바와 파이썬은 동적 타입 언어이기 때문에 변수 타입없이 여러 종류의 값을 저장할 수 있다. 


5.4 매개변수

- 함수 호출과 함수 연결의 매개가 되는 변수

- 함수 생성시 지정한 매개변수의 수가 많거나 적은 경우도 허용한다. 

- 지정하지 않은 매개변수는 undefined 타입니다. 

 Array()

 빈 배열을 만든다. 

 Array(number)

 매개변수 값 만큼의 크기를 가지는 배열을 만든다.

 Array(any, ... , any)

 매개변수를 배열로 만든다.


5.5 가변 인자 함수

- 자바스크립트의 모든 함수는(사용자 or 시스템) 무조건 가변 인자 함수이다. 

- 매개변수의 개수가 변할 수 있는 함수

- 매개변수가 선언된 형태와 다르게 사용되었을 때 매개변수를 모두 활용하는 함수를 의미

arguments : 매개변수의 배열이다  배열은 객체 자료형이므로 typeof의 결과는 object이다. 

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    function add(){
        var total=0;
        for(var i in arguments){
            total += arguments[i];
        }
        return total;
    }
    alert(add(10,20));
    alert(add(10,20,30));
    alert(add(10,20,30,40));
</script>
cs

 arguments 를 사용하여 이와 같이 합을 구할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    unction add(NUM1,NUM2){
        var total=0;
        
        for(var i in arguments){
            total += arguments[i];
        }
        return total;
    }
    alert(add(10,20));
    alert(add(10,20,30));
    alert(add(10,20,30,40));
</script>
// 결괴는 30 60 100이 나온다.
cs

 이 때는 결과값이 30 60 100 이 나오는데, 이는 오버로딩으로 보는듯하다. 


5.6 리턴 값

리턴 키워드 : 함수 실행 중 함수를 호출한 곳으로 돌아가라는 의미


5.7 내부 함수


5.8 콜백 함수

- 매개변수로 전달하는 함수 ( 자바스크립트에서는 함수도 하나의 자료형이기 때문에 매개변수로 전달 가능)

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <script>// 함수를 선언합니다.
        function callTenTimes(callback) {
            for (var i = 0; i < 10; i++) {   // 10회 반복
                callback();    // 매개변수로 전달된 함수를 호출
            }
        }
        var callback = function () {      // 변수를 선언
            alert('함수 호출');
        };
        callTenTimes(callback);      // 함수를 호출
    </script>
</head>
 cs

 이처럼 callback 이라는 함수를 매개변수로 받아서 10회 반복하는것을 볼 수 있다. 하지만 이 경우 callTenTimes(1234) 이렇게 호출해도 실행이 되기 때문에 이러한 문제를 해결하기 위해서 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <script>// 함수를 선언합니다.
        functionTenTimes(callback){
            if(typeof callback === 'function'){
                 for (var i = 0; i < 10; i++) {   // 10회 반복
                        callback();    // 매개변수로 전달된 함수를 호출
                }
            }
        }
        var callback = function () {      // 변수를 선언
            alert('함수 호출');
        };
        callTenTimes(callback);      // 함수를 호출
    </script>
</head>
cs

 이런식으로 타입을 체크해봄을 통하여 문제를 해결할 수 있다. 


5.9 함수를 리턴하는 함수

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script>
        // 함수를 생성합니다.
        function returnFunction() {
            return function () {
                alert('Hello Function .. !');
            };
        }
        // 함수를 호출합니다.
        returnFunction()();
    </script>
</head>
cs

 해당 코드의 경우 10번째 줄에서 ()()가 두번 사용된 것을 볼 수 있다. 이 경우 returnFunction 함수의 리턴 값을 호출한다는 의미이다. 함수를 리턴하는 함수를 사용하는 이유는 바로 클로저 때문이다. 


5.10 클로저

1
2
3
4
5
6
7
8
9
10
11
<head>
    <script>
        function test(name) {
            var output = 'Hello ' + name + ' .. !';
            return function () {
                alert(output);
            };
        }
        test('JavaScript')();
    </script>
</head>
cs

 해당 코드의 경우 output은 지역 변수이므로 함수가 종료될 때 사라져야 한다. 하지만 해당 변수가 이후에도 사용될 가능성이 있으므로 남긴다. 이처럼 함수안에서 선언되 지역변수가 다른 함수,메서드에 의해 참조되는 경우 자동으로 클로저라는 영역을 활성화하여 해당 지역변수를 함수의 종료여부와는 상관없이 유지한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <script>
        function test(name) {
            var output = 'Hello ' + name + ' .. !';
            return function () {
                alert(output);
            };
        }
        var test_1 = test('Web');
        var test_2 = test('JavaScript');
        test_1();
        test_2();
    </script>
</head>
이때 결과값은 각각 hello web과 hello javascript가 나온다.
cs



5.11 자바스크립트 내장 함수 

(1) 타이머 함수 - 특정 시간에 특정 함수를 실행할 수 있게 하는 함수

 setTimeout( function, millisecond) 

 일정 시간 후 함수를 한번 실행 ( 일회성)

 setInterval( function, millisecond)

 일정 시간 마다 함수를 반복해서 실행 (무한반복)

 clearTimeout(id)

 일정 시간 후 함수를 한번 실행하는 것을 중지

 clearInterval(id)

 일정 시간마다 함수를 반복하는 것을 중단

 setTimeout과 setInterval 함수의 반환값은 고유한 id 값을 가지고 있는데 이를 이용하여 clearTimeout, clearInterval을 사용할 수 있다.

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
<head>
    <script>
        // 1초마다 함수를 실행합니다.
        var intervalID = setInterval(function () {
            alert('<p>' + new Date() + '</p>');
        }, 1000);
        // 10초 후 함수를 실행합니다.
        setTimeout(function () {
            // 타이머를 종료합니다.
            clearInterval(intervalID);
        }, 10000);
    </script>
</head>
-> 이걸 alert가 아니라 1초 간격마다 바디에 누적되어 출력할 수 있도록 수정해 보아라.
<head>
    <script>
        window.onload = function(){
               var intervalID = setInterval(function () {
                document.body.innerHTML += '<p>' + new Date() + '</p>';
            }, 1000);
            setTimeout(function () {
                clearInterval(intervalID);
            }, 10000);
        }
    </script>
</head>
cs

 

(2) 인코딩과 디코딩 함수





'코딩 > 교육' 카테고리의 다른 글

[JavaScript] 10장. 문서 객체 모델  (0) 2019.01.10
[JavaScript] 9장. 브라우저 객체 모델  (0) 2019.01.10
[0109] 함수  (1) 2019.01.09
[Javascript] 3장 4장  (1) 2019.01.08
[0102-2] 행위 모델( 유스 케이스 / 시퀀스 / 상태 다이어그램 )  (0) 2019.01.02
공유하기 링크
'코딩/교육' Related Articles more
Comments