자바스크립트(JavaScript) ; 함수지향

< 자바스크립트(JavaScript) ; 함수지향 >

 

1. 함수지향-유효범위

 

1) 전역변수, 지역변수

 - 전역변수 : 함수 밖에서 선언하거나, 함수 안에서 var 없이 선언하는 변수(함수 밖의 동일 변수를 덮어써서 변경하게 됨.)

 - 지역변수 : 함수 안에서 var를 사용하여 선언되는 변수

 - 전역변수는 가능하면 사용하지 않거나, 사용해야하는 이유를 명확히 아는 경우에만 사용하자. 지역변수 사용을 추천

 

2) 유효범위의 효용성

function a (){

    var i = 0; //결과 01234

    // i=0; // 결과 무한반복

}

for(var i = 0; i < 5; i++){

    a();

    document.write(i);

}

 

3) 전역변수 사용법

 - 사용하려면 하나의 객체(MYAPP)를 전역변수로 만들고, 객체의 속성(claculator)의 값으로 변수를 관리

var MYAPP = {}

MYAPP.calculator = {

    'left' : null,

    'right' : null

}

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

 - 전역변수를 사용하지 않으려면 익명함수로 호출 ; 익명함수가 전역변수를 포함하여 하나의 함수로 묶어줌으로써 전역변수를 지역변수로 만들어 줌.

 

4) 유효범위의 대상

 - JS에서 지역변수는 함수, for문, 블록문 등에서 사용은 가능하지만 유효범위로서의 기능은 함수에서만 의미를 갖는다. 즉 for 문에서 선전된 var name은 for문 밖에서 name 변수를 사용해도 global 변수로서 작동함. (다른 언어들은 함수 외에서도 지역변수들이 기능을 함.)

 - ECMA script6 이후에는 이러한 JS 지역변수 var 선언의 단점을 보완한 let을 사용하여 변수를 선언함. let 변수 선언은 다른 프로그래밍 언어들과 유사하게 중괄호 {} 를 기준으로 유효범위를 설정하게 됨. 중괄호 안에서 지역변수를 선언하며, 이는 중괄호 안에서만 유효함.

 

5) 정적 유효범위

 - JS는 함수가 선언된 시점에서의 유효범위를 갖음.

 - 함수A내에 위치한 함수B가 변수 i를 갖고, i 변수의 유효범위를 판단시 함수B 를 포함하는 함수A는 변수 i의 유효범위에 영향을 미치지 않고, 함수B가 사용되고 선언되는 시점에서 함수B는 함수 내부의 지역변수를 찾고 지역변수가 없으면 전역변수인 i=5를 적용하게 됨. 함수A가 함수B를 포함한다고해서, 함수B가 함수A 내의 지역변수를 검색하지는 않음.(정적 유효범위; 함수B의 유효범위는 함수A의 유효범위 영향을 받지 않음.)

 - 정적 유효범위(static scoping), 렉시컬(lexical scoping) --> 클로져와 연결되 개념임.

var i = 5;

 

function(a){

  var i = 10;

  b();

}

 

function b(){

  document.write(i);

}

 

2. 함수지향-값으로서의 함수와 콜백

 - 함수의 용도 : 변수, 매개변수, 리턴값 --> JS에서의 함수는 first-class citizen, first-class object

1) 함수의 용도1

 - 자바스크립트에서는 함수도 객체이다. 즉, 함수는 일종의 값이고 변수에 담을 수 있다.

 - function a(){}

 - var a = function(){}

 - a = {b:function(){}} // b는 함수를 저장하고 있는 key이자, 속성(property), method 이다.

즉, 객체안에 저장된 함수 b는 메소드임.

 - 함수는 값이기 때문에 함수의 이름은 다른 함수의 인자로 전달될 수 있음.

function increase(num){

           return num+1

}

function decrease(num){

           return num-1

}

function cal(func,num){

           rerurn func(num)

}

alert(cal(increase,1));

alert(cal(decrease,1));

 

2) 함수의 용도2

 - 리턴값으로의 함수의 사용

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);

 

3) 콜백 : 함수가 수신하는 인자가 함수인 경우, 인자가 되는 함수 = 콜백 함수

 

4) 비동기 콜백과 Ajax

 - 콜백은 비동기처리에서도 유용하게 사용됨.

 - 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을때 지정한 작업이 실행되도록 할 수 있음.

 - Ajax : Asynchronous Javascript and XML(최근에는 XML보다는 JSON을 사용)

 - 콜백 함수 예제 : jQuery get 함수

$.get(data_source 위치, 콜백함수(result), 'json') --> jQuery 의 get 함수의 인자로 콜백함수를 사용해서 get 함수의 작동 방식을 바꿀 수 있음.

 

3. 함수지향-클로져(closure)

 

1) 클로져

 - 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것. (예 : 내부함수가 실행 될 때, 외부함수의 지역 변수에 접근해서 실행되는 경우)

 - 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념

 - 어떤 함수를 함수안에서만 사용하고 싶을 때

 - 외부함수의 실행이 끝난(예 : return 실행) 후에도 내부함수는 외부함수의 지역변수에 접근할 수 있음.

 

2) private variable (비밀 변수)

 - ghost 와 matrix는 (return 실행 후 생이 마감된)외부함수의 지역변수 title에 접근해서 각각 다른 title 정보를 가지고 변경할 수 있음. title 변수를 closure 를 통해 비밀변수로 만들어서 더욱 안전하게 가져오고, 안전하게 변경할 수 있음. (비밀변수 title은 get_title 메소드와 set_title 메소드로만 접근 가능하기 때문에 title 변수는 제 3자가 마음대로 수정할 수 없게 만들 수 있음.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

 

alert(ghost.get_title());

alert(matrix.get_title());

 

ghost.set_title('공각기동대');

 

alert(ghost.get_title()); //공각기동대

alert(matrix.get_title()); //Matrix

 

4. 함수지향-arguments

 

1) arguments?

 - JS의 함수는 arguments 라는 변수를 사용할 수 있으며, arguments는 배열을 담는 것으로 약속되어 있음. arguments는 정확히는 배열은 아니고 유사배열을 담고있다 할 수 있음.

 - 사용자가 입력할 개수가 정해지지 않은 n개의 인자에 접근하기 위해 arguments를 사용.

 - 함수에 파라미터를 정의하지 않았어도, 사용자로부터 입력받은 인자에 arguments를 사용해서 접근해서 사용자 입력인자를 다룰 수 있음.

 - arguments[0]는 함수로 전달된 첫번째 인자, arguments.length는 함수로 전달된 인자의 개수 --> 이러한 arguments 변수의 특성을 이용해서 인자로 전달된 모든 값의 총합을 구하는 함수를 정의할 수 있음.

function sum(){

    var i, _sum = 0;   

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

        document.write(i+' : '+arguments[i]+'<br />');

        _sum += arguments[i];

    }  

    return _sum;

}

document.write('result : ' + sum(1,2,3,4));

 

2) 매개변수의 수(function length)

 - 함수.length : 함수에 정의된 매개변수의 수

 - arguments.length : 함수에 전달된 인자의 수

 - 함수에 정의된 매개변수의 수만큼의 인자가 전달되지 않았을 때 에러를 발생시키는 로직 구현 가능.

 

5. 함수지향-함수의 호출

 - 함수는 객체이기 때문에 기본적으로 사용할 수 있는 내장 method를 갖는다.

 - 함수를 호출하는 method : apply, call

1) apply 정의

function sum(arg1, arg2)

           return arg1 + arg2

sum(1,2) --> 3

sum.apply(null, [1,2]) --> 3 //실제 사용시는 null이 아니라 다른 값이 와야 apply의 사용가치가 있음.

 

2) apply 사용

 - 함수내에 정의되지 않은 this는 함수가 인자로 받게되는 객체(배열)를 의미함. this[name] 으로 배열의 값에 접근 가능. 즉, 함수 sum이 o1 이라는 배열 객체의 속성인 것처럼 사용 가능함. o1 객체에 속한 함수 sum에서 사용되는 this는 sum 함수를 포함하는 객체 o1을 의미하는 것으로 해석됨. (실제로 o1 객체가 sum 함수를 포함하지는 않지만 sum 함수가 o1 객체를 인자로 받을 때 sum 함수 내부에 사용된 this는 이런 의미를 가지게 됨.)

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

alert(sum.apply(o1)) // 6

alert(sum.apply(o2)) // 185