클로저_closure

외부함수, 내부함수

function outter(){// 외부함수
    var title = 'coding everybody';  
    function inner(){// 내부함수 
        alert(title);// 외부함수에서 정의된 변수를 갖고온다(클로저)
    }
    inner();
}
outter();

---

정의

• 외부함수가 종료되었음에도 불구하고 내부함수 내의 변수값을 외부함수에서 가져온다

function outter(){// 외부함수
    var title = 'coding everybody';  
    return function(){// 내부함수
        alert(title);
    }
}
inner = outter();// 내부함수를 대입(return)
inner();// coding everybody

---

private variable

function factory_movie(title){// 외부함수
    return {
        get_title : function (){// 내부함수(1)
            return title;
        },
        set_title : function(_title){// 내부함수(2)
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title());// 'Ghost in the shell'
alert(matrix.get_title());// 'Matrix'
 
ghost.set_title('공각기동대');// title 값 변경
 
alert(ghost.get_title());// '공각기동대'
alert(matrix.get_title());// 'Matrix'
// ghost title 값을 변경하더라도 matrix title 값에 영향을 주지 않는다

---

응용

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}// 5 5 5 5 5
// return i 값이 전역변수 i 값을 받지 않는다

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());
}// 0 1 2 3 4
// 전역변수 i 값을 외부함수 인자 id로 받고 내부함수 return 값으로 연결시킴.

]var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return id
    }(i);
}
for(var index in arr) {
    console.log(arr[index]);
}// 0 1 2 3 4
// 이것도 가능하지만 클로저 개념은 아니다

---

arguments

정의

• 배열과 유사하지만 객체로 정의한다
• func(arg) 정의하고 func(10) 실행한다면
  arg 매개변수(parameter)라 칭하고, 10 인자라고 칭한다

function sum(){
    var i, _sum = 0;    
    for(i = 0; i < arguments.length; i++){// arguments 인자의 집합
        document.write(i+' : '+arguments[i]+'<br />');
        _sum += arguments[i];
    }   
    return _sum;
}
document.write('result : ' + sum(1,2,3,4));
/*
0 : 1
1 : 2
2 : 3
3 : 4
result : 10
*/

---

function length

function zero(){
    console.log(
        'zero.length', zero.length,// 함수.length 매개변수의 개수
        'arguments', arguments.length// arguments 입력된 인자의 개수
    );
}
function one(arg1){
    console.log(
        'one.length', one.length,
        'arguments', arguments.length
    );
}
function two(arg1, arg2){
    console.log(
        'two.length', two.length,
        'arguments', arguments.length
    );
}
zero(); // zero.length 0 arguments 0 
one('val1', 'val2');// one.length 1 arguments 2 
two('val1');  // two.length 2 arguments 1

---

함수의 호출

apply 기본

function sum(arg1, arg2){
    return arg1+arg2;
}
alert(sum(1,2));// 3
alert(sum.apply(null, [1,2]));// 3
// apply 메소드를 적용
//

---

apply 심화

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){// this 해당 함수가 실행되는 시점의 인자를 가져온다
        _sum += this[name];
    }
    return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185

// 같은 표현
function sum(){
    var _sum = 0;
    for(name in this){
      	if(typeof this[name] !== 'function')// _sum 값에 숫자만을 더하기 위한 조건
        _sum += this[name];
    }
    return _sum;
};
o1 = {val1:1, val2:2, val3:3, val4:sum};
o2 = {v1:10, v2:50, v3:100, v4:25, v5:sum};
alert(o1.val4());// 6
alert(o2.v5());// 185
// key 명칭을 바꾸어 o1.sum() 이라고 표현할수도 있음