TIL. NO7. JAVASCRIPT(6)_함수

1. 유효범위

- 지역변수(local Variable) : 지역변수의 유효범위는 함수 안
- 전역변수(global Variable) : 전역변수의 유효범위는 에플리케이션 전역

전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다.
변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.

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

• 유효범위의 대상
  : JS의 지역변수는 함수에서만 유효하다.

• 정적 유효범위(lexical scoping)
  : JS는 함수가 선언된 시점에서의 유효범위를 갖는다.

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

JS에서는 함수도 객체(일종의 값)

function a(){}
=
var a = function(){}

• 메소드(method) = 객체의 속성 값으로 담겨진 함수

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

{b:function(){}}은 객체
b는 key/변수/속성(property)
function(){}은 value/메소드(method)

• first-class citizen(object) = 다양한 용도로 사용될 수 있는 데이터(JS에서 함수가 이에 해당됨)

• 콜백(callback) = 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작 방법을 완전히 바꿀 수 있다.

동기적 처리 : 요청을 보낸 후 응답(=결과)를 받아야지만 다음 동작이 이루어지는 방식
비동기적 처리 : 요청을 보낸 후 응답(=결과)와는 상관없이 다음방식이 동작하는 방식

• Ajax(Asynchronous Javascript and XML)(비동기적인 제어)

AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.
참고

3. 클로저(closure)

• 내부함수 : 함수 inner
• 외부함수 : 함수 outter

⭐️ 내부함수에서 외부함수의 지역변수에 접근할 수 있다.

function outter(){
    function inner(){
        var title = 'coding everybody'; 
        alert(title);
    }
    inner();
}
outter();

• 클로저 : 내부함수는 외부함수의 지역변수에 접근 할 수 있고, 외부함수의 실행이 끝나서(return) 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.

• private variable : 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다.

  장점 : 데이터가 안전하게 저장되고 수정될 수 있다.

클로저 관련 예제)

// 잘못된 예제
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

// 수정된 예제
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]());
}

(참고_생활코딩 준바이님 댓글)

4. arguments

a=0;
a+=1; // a=a+1

• arguments(유사 배열 객체) 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있습니다.

• 매개변수의 수

function one(arg1){
    console.log(
        'one.length', one.length,
        'arguments', arguments.length
    );
}
one('val1', 'val2');  
// one.length 1 arguments 2 

함수의 이름.length : 함수가 매개변수로 정의한 매개변수의 수
arguments.length : 함수를 호출할 때 몇 개의 인자를 전달했는지

5. 함수의 호출

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

sum의 o1 소속의 메소드가 된다는 것은 이렇게 바꿔 말할 수 있다. 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미다. JavaScript에서 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다.
만약 apply의 첫번째 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다.