GOhACK/웹

[JavaScript JQuery] 5장 함수

LinZBe4hia 2016. 12. 24. 05:11

5.1, 5.2 익명 함수와 선언적 함수

 NOTE 선언적 함수와 익명 함수의 순서


코드 5-8

<script>
    // declare a function called '함수'
    var 함수 = function() { alert('함수 A'); }
    function 함수() { alert('함수 B'); }

    // call '함수'' function
    함수();
</script>   


실행결과: '함수 A' 출력

 ∵ 선언적 함수가 먼저 생성 → 익명 함수 나중에 생성


5.5 가변인자 함수

가변인자 함수: 매개 변수를 선언된 형태와 다르게 사용했을 때도 매개 변수를 모두 이용하는 함수.


코드 5-11 과 관련되는 내용

배열은 객체다.


5.9 함수를 리턴하는 함수

5.10 클로저(closure)

closure: 1)지연 변수를 남겨두는 현상, 2)내부의 변수들이 살아있는 함수 자체, 3)살아남은 지역 변수 자체

코드5-28

<script>
    // declare a function
    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>


test_1 이 변수로 선언되고 함수를 받았을 때, 함수를 호출하려면 test_1이 아닌 test_1()을 코드로 써줘야 한다.


5.11 JavaScript 내장 함수

5.11.1 타이머 함수


코드5-30

<script>
    // execute a function each one second
    var intervalID = setInterval(function() {
        alert('<p>' + new Date() + '</p>');
    }, 1000);

    // excute a function each ten second
    setTimeout(function() {
        // shut down the timer
        clearInterval(intervalID);
    }, 10000);
</script>


● 1초 뒤에 실행된다고 해서 실제 1초가 지나갈 때마다 실행되는 것이 아니고, 

    처음1초 뒤에 실행되는 함수가 '확인'이 눌러지고 난 뒤 그 때부터 (아마 웹 상에) 시간이 흘러 그 시간 1초 뒤에 다시 실행된다.

● 만약 intervalID라는 변수를 설정하지 않고 clearInterval(id)에 넣을 수 있는 경우는 없을까? (내 견해로는 변수를 꼭 지정해야 될듯)

    clearInterval안에 setInterval() 함수를 그대로 넣는 건 아닌 것 같은데....



◎ JavaScript 실행 순서

코드 5-31

<script>
    alert('A');
    setTimeout(function() {
        alert('B');
    }, 0);
    alert('C');
</script>

 실행순서: A → C → B

> JavaScript 함수 중 웹 브라우저에 처리를 부탁하는 함수가 있다. 

  대표적으로 타이머 함수와 웹 요청은 웹 브라우저가 처리하고 처리가 완료되었다는 것을 JavaScript에게 알려주는 방식.

  --> 이런 함수는 현재 단위가 끝나기 전에는 실행되지 않는다.


코드 5-34 closure를 활용한 해결

<script>
    for (var i =0; i< 3; i++) {
        (function (closed_i) {
            setTimeout(function() {
                alert(closed_i);
            }, 0);
        })(i);
    }
</script>

 이 부분이 정확히 이해가 안됨



5.11.3 코드 실행 함수

eval(string) : string을 javascript code로 실행

<script>
    //create strings
    var willEval = '';
    willEval += 'var number = 10;';
    willEval += 'alert(number);';

    // call eval() 
    eval(willEval);

    // use the variable in the functions which is called by eval()
    alert(number);
</script>


여기서 number 변수가 eval()에서 호출된 함수의 변수이기 때문에 사용될 수 있는데 이 기능 때문에 변수 이름이 중복되는 경우 충돌이 일어날 수 도 있을 것같다.


5.11.4 숫자 확인 함수

코드 5-41-1  : 코드 5-41 을 고친 함수!( 5-41에는 if의 조건문에 (value == Infinity)가 적혀 있다.

<script>
    // declare a variable
    var value = 1 / 0;

    // display
    if (!isFinite(value)) {
        alert('Infinity입니다.');
    } else {
        alert('Infinity가 아닙니다. ');
    }
</script>


NaN은 스스로를 비교할 수 없다.

=> NaN을 확인할 때는 반드시 isNaN() 함수를 사용해야 한다.



5.11.5 숫자 변환 함수

함수 이름 

설명 

parseInt(string) 

string을 정수로 바꾸어줍니다. 

parseFloat(string) 

string을 유리수로  


이 함수들은 Number() 함수의 단점을 보완하기 위해 만들어진 함수다.

"Number() 함수의 단점은 무엇일까?"

-> "Number() 함수는 숫자로 바꿀 수 없는 문자가 있으면 문자열이 NaN으로 변환해버린다."


반면, parseInt 와 parseFloat함수는 숫자로 변환할 수 있는 부분까지는 모두 숫자로 변환한다.

이 두 함수의 주의할 점: 진수 (2진수, 8진수, 10진수, 16진수)