160104P(월)

JavaScript

 

유효범위(Scope)

변수의 수명을 의미힌다.

 

버그의 원인이 될 수 있기 때문에 전역변수는 사용하지 않는것이 좋다.

또한 함수의 핵심은 로직의 재사용인데(모듈화) 모듈간의 독립성을 최대화하는것이 올바른 코딩이다.

 

불가피한 전역변수의 사용

객체의 속성으로 변수를 관리하는 방법 사용

 

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

전역변수를 사용하고 싶지 않으면 익명함수를 호출하면 된다.

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

 

자바스크립트는 함수에 대한 유효범위만을 제공한다.

지역변수로 선언할 수 있는것은 함수로 제한

 

다른언어는 블록({,})에 대한 유효범위 제공

 

for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);

 

정적 유효범위(static scopting), 혹은 렉시컬(lexical scoping)

사용될 때가 아니라 정의(선언)된 시점에서의 유효범위를 갖는다.

 

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();

a()의 지역변수가 아니라 전역변수 i에 접근하게 된다.

 

JavaScript에서는 함수도 객체다. 즉 일종의 값(value)

function a() {}; -> var a = function() {};

 

객체 안에 정의된 함수를 메소드(method)라고 한다.

a = {
    b:function(){     // method
    }
};

 

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

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

콜백

함수의 인자로 함수를 전달하여 함수의 동작을 바꾸는 것

 

오름차순 정렬

function sortNumber(a,b){
    return a-b;
}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber));

Array.sort

parameter : function을 사용한다.

return : 자기 자신에 대한 retference 값

알파벳 순서로 정렬하며 숫자의 경우 암시적으로 문자열로 형변환

 

클로저(closure)

내부함수가 외부함수가 실행이 끝나서 소멸된 이후에도 외부함수의 context에 접근할 수 있는 것

 

내부함수(inner function)

함수안에서 또 다른 함수를 선언할 수 있다.

 

function outter() {

    var title = 'coding everybody'; 

    function inner() {
        alert(title);
    }

    inner();
}
outter();

 

함수를 객체로 취급하므로 어찌보면 당연한 일

 

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

1. 클로저는 객체의 메소드에서도 사용 가능하다.

2. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.

3. 외부함수는 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성된다. ghost와 matrix는 독립된 객체

4. JavaScript는 private 기능을 제공하지 않는다. 클로저를 사용하면 자바의 Private 기능을 사용하는것과 매한가지다.

 

arguments

함수를 호출할 때 입력한 인자가 담겨있다.

배열같이 사용하지만 배열이 아니라 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));

 

arguments.length

함수로 전달된 실제 인자의 수

 

함수.length

함수에 정의된 인자의 수

 

Function.apply와 Function.call

JavaScript에서 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다

 

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