JavaScript Basic #4

JavaScript #4 – 함수 지향 (Function-Oriented)

유효범위

유효 범위란 변수의 수명을 의미. 함수 밖에서 선언한 변수는 전역 변수(global variable)이 되고,안에서 선언하면 지역변수(local variable)이 됨.

var vscope = 'global';

function fscope(){

    var vscope = 'local';

    alert('함수안 '+vscope);

}

fscope();

alert('함수밖 '+vscope);

함수 안에서 vscope를 새로 정의하면 전역 변수 vscope는 제쳐두고 함수 안에서의 vscope를 새로 생성함. 이러한 사실은 다음 코드를 실행해보면 알 수 있음.

var vscope = 'global';

function fscope(){

    vscope = 'local';

    alert('함수안'+vscope);

}

fscope();

alert('함수밖'+vscope);

함수 안에서 vscope의 값을 ‘local’로 바꾸어 주었기 때문에 밖에서 전역변수 vscope를 호출해도 ‘local’이 출력됨.

‘변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.’

불가피하게 전역 변수를 사용해야 할 때는 하나의 객체를 전역변수로 만들고 객체의 속성을 변수로 관리하는 방법 사용.

MYAPP = {}

MYAPP.calculator = {

    'left' : null,

    'right' : null

}

MYAPP.coordinate = {

    'left' : null,

    'right' : null

}

 

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

    return MYAPP.calculator.left + MYAPP.calculator.right;

}

 

전역변수를 사용하고 싶지 않다면 익명 함수를 호출하는 것으로 대체할 수 있음.

(function(){

    var MYAPP = {}

    MYAPP.calculator = {

        'left' : null,

        'right' : null

    }

    MYAPP.coordinate = {

        'left' : null,

        'right' : null

    }

    MYAPP.calculator.left = 10;

    MYAPP.calculator.right = 20;

    function sum(){

        return MYAPP.calculator.left + MYAPP.calculator.right;

    }

    document.write(sum());

}())

 

JavaScript는 블록범위(중괄호 기준으로)를 기준으로 유효범위를 제공하는데 반해 함수에 대한 유효범위만 제공. 즉, 지역변수는 함수에서만 유효.

JavaScript는 함수가 선언된 시점에서의 유효범위를 가짐.

ð  이러한 유효범위 방식을 정적 유효범위(Static Scoping), 혹은 렉시컬(Lexical Scoping)이라고 함.

var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    document.write(i);

}

a();

 

값으로서의 함수

JavaScript에서는 함수도 객체, 즉 일종의 값임. 그러므로 객체의 값으로 포함될수도, 다른 함수의 인자로 전달될수도 있음.

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

alert(cal(increase, 1));

alert(cal(decrease, 1));

함수는 함수의 리턴 값으로도 사용 가능하고, 객체로써 포함될 수 있으므로 당연히 배열의 값으로도 사용할 수 있음.

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

alert(cal('plus')(2,1));

alert(cal('minus')(2,1));

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

 

함수가 값으로 사용될 수 있다는 특성을 사용해 함수의 인자로 전달할 수도 있음. 이는 ‘콜백’의 특성.

 

콜백: 다른 코드의 인수로서 넘겨주는 실행 가능한 코드. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있음.

일반적으로 콜백 수신 코드로 콜백 코드(함수)를 전달할 때는 콜백 함수의 포인터 (핸들), 서브루틴 또는 람다함수의 형태로 넘겨준다. 콜백수신 코드는 실행하는 동안에 넘겨받은 콜백 코드를 필요에 따라 호출하고 다른 작업을 실행하는 경우도 있다. 다른 방식으로는 콜백수신 코드는 넘겨받은 콜백 함수를 '핸들러'로서 등록하고, 콜백수신 함수의 동작 중 어떠한 반응의 일부로서 나중에 호출할 때 사용할 수도 있다 (비동기 콜백).

 

값으로 전달된 함수(Callee)는 호출될 수 있다는 점을 이용해 Caller 함수의 동작을 완전히 바꿀 수 있음.

function sortNumber(a,b){

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber));

원래 sort는 숫자를 순서대로 정렬하지만 sortNumber 함수를 인자로 넘겨줌으로써 역순으로 정렬하게 되었다.

시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면, 해당 작업이 끝났을 때 미리 등록한 작업이 실행되도록 비동기 처리를 할 수 있다.

생활코딩의 비동기 처리 강의에서는 이런 예시를 들었다. 글을 작성하면 구독자에게 이메일을 보낸 후 작성완료 문구를 띄우는 홈페이지를 사용한다고 가정한다. 여기서 글을 작성하고 구독자에게 이메일을 보내는 작업을 끝낸 후 작성 완료 문구를 띄우는 것은 일을 순차적으로 처리하는 ‘동기 처리’이다. 그런데 여기서 글을 작성하고 구독자들에게 이메일을 보내는 작업을 ‘예약’시키기만 하고 바로 작성 완료 문구를 띄운다. 그리고 클라이언트 쪽에서는 보이지 않게 백그라운드에서 이메일 발송 예약이 있는지 지속적으로 확인해 발송하는 작업을 하는 프로그램을 통해 이메일을 전송하는 작업을 계속 한다면, 이것은 ‘비동기 처리’이다.