GaramX

var myVar = 100;
function myFunc() {
    var message = "Hello World";
 
    return message
}

JavaScript는 함수안에 다른 함수를 선언할 수 있습니다. 그러한 경우 내부 함수가 외부 함수가 가지고 있는 변수를 참조할 수 있습니다. 또한 JavaScript는 1급 함수(first-class function)를 지원합니다. 쉽게 말하면 JavaScript의 함수는 값의 의미로 사용될 수 있다는 것입니다. 함수가 값의 역할을 하다보니 다음과 같은 형태의 코드가 가능합니다.

• 함수를 변수에 저장.
• 함수를 다른 함수의 인자로 전달.
• 함수를 다른 함수의 리턴값으로 사용.

위와 같은 형태의 함수를 이용할 때는 함수의 이름이 특별히 필요하지 않기 때문에 이런 함수는 특별히 이름을 명시하지 않고 사용합니다. 이런 함수를 우리는 익명함수( Anonymous function )라고 하죠. 다른 표현으로는 람다( Lambda )라고도 합니다.

function outerFunc() {
 
    var a = 100;
 
    return function() {
        var b = a + 100;
        return b;
    }
}
 
var myFunc = outerFunc();
console.log(myFunc());    // 200 출력

사실 위의 예제는 좀 이상합니다. 아니 많이 이상하죠.

다음과 같은

var myFunc = outerFunc();

코드에서 outerFunc()함수는 수행이 종료되었기 때문에 그 안에 선언된 변수 a는 사실 사용할 수 없어야 합니다. 우리가 익히 알고 있는 다른 프로그래밍 언어의 변수 scope 개념으로 본다면 말이죠.

하지만 JavaScript의 var 변수 scope는 좀 다릅니다. outerFunc() 함수의 호출이 끝났음에도 불구하고 a 변수값이 유지됩니다. 즉, outerFunc()에 대한 참조가 남아있는 한 메모리에 계속 유지하게 되는 구조입니다. ( outerFunc() 함수가 실행중인 상태로 간주한다는 의미이기도 합니다. ) 그렇기 때문에 위에서 myFunc()를 호출했을 때 a 변수를 이용할 수 있는 것입니다.

function myFunc(init) {
    if (init) {
        var x = 10;
    }
 
    return x;
}
 
console.log(myFunc(true));  // 10 출력

위의 코드는 JavaScript 코드입니다. var 변수는 if block 안에서 선언되었음에도 불구하고 block 외부에서도 사용이 가능합니다. 위에서 언급했듯이 JavaScript의 var 변수 scope가 좀 독특해서 그렇습니다. var로 선언된 변수는 block에 상관없이 function 내에서 사용이 가능합니다.

이런 특성을 var은 function-scoping을 가진다 라고 표현합니다.

for (var i = 0; i < 10; i++) {
    setTimeout(
        function() { console.log(i); },
        1000
    );
}

결과는

10
10
10
10
10
10
10
10
10
10

JavaScript를 알고 있는 사람들에게는 꽤나 익숙한 코드형태이자 결과일겁니다. setTimeout은 두번째 인자로 들어가는 시간을 delay로 첫번째 인자의 함수를 호출해 주는 역할을 하는 함수입니다. (내부 Thread로 동작하겠죠)

그러면 0부터 9까지 순차적으로 출력하려면 어떻게 해야 할까요? 이 작업을 수행하기 위해 IIFE을 이용합니다.

IIFE는 Immediately Invoked Function Expression을 의미합니다.

코드를 아래와 같이 수정합니다.

for (var i = 0; i < 10; i++) {
    (function(tmp) {
        setTimeout(
            function() { console.log(tmp); },
            1000
        );
    })(i);
}

즉시 실행되는 함수 표현법(IIFE)를 이용하여 새로운 function scope를 생성해서 i값을 capture하는 방식으로 처리하면 될 듯 합니다.

이 부분을 정확히 이해하기 위해서는 free variable, scope chain, Closure에 대한 이해가 있어야 합니다.