쟁이? 쟁이!

자바스크립트 코딩에서 비동기 호출은 빈번히 발생합니다. 복잡한 페이지에서는 10번이상 서버에 호출해서 데이터를 가져오는 경우도 있습니다. 그래서 간단한 비동기 호출에 대해서 알아 보겠습니다.

xmlhttp, ajax를 이용한 get,post 호출에서 success, fail 이벤트 핸들러로 받는것이 일반적인 비동기 호출입니다.

아래는 사용자 정의 함수를 만들어서  비동기 호출을 하는 샘플입니다.

-------------------------------------------------------

<script>

        function getFirst(name, callback) {

            //AJAX 등 비동기 호출로 대체가능
            setTimeout(function () {
                callback();
            }, 3000);
           
        }
        this.getFirst('bj', function () {
            alert('async');
        });
        alert('sync');
       
    </script>

------------------------------------------------------

onload 이벤트에서 getFirst 함수를 호출했을경우, 순차적으로 실행되므로, alert 창으로 sync가 먼저 찍히고,  getFirst함수가 호출되고 3초후  callback 함수 호출시 비로소 async alert창이 뜸을 알 수 있다.

베이스가 되는 코드값을 로드해야 다음 프로세스를 진행할 수 있을 경우, 유용하게 사용될수 있습니다.

자바스크립트의 함수는 선언적 함수 와 익명함수로 나뉠수 있습니다.

선언적 함수의 예>

function getFirst() {
            alert('a');
        }

익명 함수의 예>

 var getSecond = function () {
            alert('c');
        }

익명 함수의 경우, 객체 지향 프로그래밍 할때 주로 쓰이는 방식으로 추후에 객체로 쓰이는 방법을 예시로 들겠습니다.

자 이제 클로저에 대해 알아 보겠습니다.

클로저는 함수의 지역변수를 호출해 사용할수 있는 기능입니다. 위 예에서 getFirst의 a라는 변수가 있다면 외부에서는 a라는 변수를 호출할 수 없지만 클로저 기능을 이용하면 쓸 수 있습니다.

---------------------------------------------

<script>

        function getThird(val) {
            var val1 = 'Hello ' + val;
            return function () {
                return val1;
            }
        }
       
        var third = this.getThird('bjpark');

        alert(typeof(third) + ' : ' + third());

    </script>

----------------------------------------------

결과값에 typeof(third) 를 찍어 봤는데, third는 변수이지만 타입은 보시다시피 함수 입니다. 왜냐면 getThird함수는 함수를 리턴하였으니까요. 그래서 리턴받은 함수인  third()를 호출해서 getThird함수의 내부값을 끄집어 올수 있는 것입니다.

왜 귀찮게 전역변수 선언해서 가져오면 되지, 내부변수값 가져오려고 어렵게 하냐구요?

위에서도 언급했지만, 객체지향 프로그래밍에서 유용하게 사용되므로, 개념만 이해하고 넘어갑시다~!

지금은 기초적인 클로저의 개념에 대해 알아보고, 추후에 과연 이 녀석이 어디에 유용하게 쓰일지 고민해 보도록 하겠습니다. 요즘 이슈가 되고 있는것만은 사실이니까요.

1. 삼항 연산자

자바스크립트에서는 삼항연산자가 없을꺼라는 생각을 할 수 있으나, 일반 언어와 마찬가지로 삼항연산자를 제공하고 있습니다.

삼항 연산자는 간단한 if ~ else 문 대신 한줄로 분기 처리할 때 주로 사용합니다.

결과값 = (불리언 표현식) ? 참 : 거짓

아래는 사용 샘플 입니다.

------------------------------------

<script>
       
        var resultVaule;
        var fruit = '사과';

        resultVaule = fruit == '사과' ? 'ok' : 'not found';
        alert(resultVaule);

    </script>

-----------------------------------

2. for in 반복문

배열의 반복문을 코딩할때, 일반적으로 배열의 갯수 만큼 루프를 돌려서 값을 읽어오지요. 하지만 자바스크립트에도 for in  문이 있습니다.

아래 샘플의 결과는 똑같습니다.

---------------------------------------------

<script>
       
        var resultValue = '';
        var arrayFruit = ['사과', '배', '딸기'];

        //통상적인 방법
        for (var i = 0; i<arrayFruit.length; i++) {
            resultValue += arrayFruit[i] + '-';
        }
        //for in 반복문
        resultValue = '';
        for (var i in arrayFruit) {
            resultValue += arrayFruit[i] + '-';
        }

        alert(resultValue);

    </script>

--------------------------------------------