[자바스크립트] 문제를 통한 개념잡기 - 2

2. 다음 값은?

function abc() {
    var a = ‘bbb’;
    console.log(a) //  ---- 1
    function c() {
        console.log(a); // --- 2
        (function() {
             console.log(a); // --- 3
             a = ‘ccc’;
        })();
        var a;
        console.log(a) // ---4
    }
    function d() {
        console.log(a); // --- 5
    }
    c();
    a = ‘ddd’;
    d();
};
abc();

정답 (스크롤하면 나옵니다)

1. bbb

2. undefined

3. undefined

4. ccc

5. ddd

이 문제는 호이스팅과 관련된 문제입니다. 면접에서 필수적으로 물어보는 부분이니 꼭 인지하고 있어야합니다.

문제를 풀기에 앞서, 조금씩 나눠서 개념을 살펴보겠습니다.

a = 2;
var a;
console.log(a);

결과가 어떻게 될까요? 정답은 정상적으로 실행되고 2가 출력됩니다.

분명 오류가 난다고 생각한 사람들도 있을겁니다. 보통 C++이나 Java와 같이 일반적으로는 선언도 안하고 대입을 어떻게 해? 당연히 오류지라고 생각하기 쉽습니다. 하지만 javascript에서는 가능합니다!

var a = 2;는 아래와 같은 과정으로 나눌 수 있습니다.

var a

a = 2

이를 인터프리터 시점에서 보면, var a를 보고 변수 테이블을 생성하여 a를 넣습니다.

이후 a = 2라는 값이 나왔기 때문에 변수 테이블의 a의 값을 2로 설정해주는 겁니다.

그렇다면 아래와 같은 경우는 어떤 진행과정이 될까요?

var a = 'g'
function fn(){
    console.log(a);
    var a = 'l';
    console.log(a);
}
fn();

전체적으로 전역변수 a와 fn() 함수 선언, fn() 함수 실행이 큰 틀입니다.

즉 변수 테이블이 생성되고, a = g라는 값과 fn이라는 function이 값으로 들어갑니다.

이제 function값을 살펴봐야겠죠?

function fn(){

    console.log(a);

    var a = 'l';

    console.log(a);

}

function안에서 또다른 scope가 진행되었기 때문에, 또다른 변수 테이블이 생성됩니다. 현재 function 안에는 var a만 존재하므로 변수 테이블에 a를 넣어줍니다.

첫 console.log(a)는 아직 변수 a의 값이 주어지지 않았기 때문에 값은 undefined가 출력됩니다.

이제 a의 값을 l이라고 주었고, 이 값은 변수 테이블에 저장됩니다.

그렇다면 그 다음에 나오는 console.log(a)의 값은 l이 되겠죠?

이런 식으로 변수 테이블은 각 scope가 생성될 때마다 따로 만들어주어야함을 알아야 문제를 풀 수 있습니다.

다시 문제를 살펴보면

function abc() {
    var a = ‘bbb’;
    console.log(a) //  ---- 1
    function c() {
        console.log(a); // --- 2
        (function() {
             console.log(a); // --- 3
             a = ‘ccc’;
        })();
        var a;
        console.log(a) // ---4
    }
    function d() {
        console.log(a); // --- 5
    }
    c();
    a = ‘ddd’;
    d();
};
abc();

첫번째 변수 테이블은 아래처럼 만들어 질 것 입니다.

a : bbb

c : function

d : function

따라서 1번 console은 a의 값이 존재하기 때문에 bbb가 출력됩니다.

이후에 c func이 실행되고, 새로운 변수 테이블이 생성됩니다. 이 테이블에는 func 안에서 값이 주어지지 않은 변수인 a를 우선 저장합니다.

아직 a의 값을 모르기 때문에 2번 console은 undefined가 출력됩니다.

다음으로는 즉시실행 함수가 나오게 되는데, 이 함수는 만약 변수가 없으면 가장 가까운 변수 테이블을 바라보게 됩니다.

따라서 c 함수에서 만든 변수 테이블을 보게 되겠죠? 하지만 a만 정의되었을 뿐 아직 값은 없습니다.

따라서 3번 console도 undefined가 출력됩니다.

바로 이어서 a = 'ccc'로 값이 매겨지면서, 변수 테이블에 존재하는 a의 값은 ccc가 됩니다.

다음 4번 console은 a의 값이 들어왔기 때문에 ccc로 출력됩니다.

function d가 실행되기 전에 a = 'ddd'로 값을 주는데, 이는 함수 밖에서 선언되는 것이기 때문에 이 문제의 첫번째로 만든 변수 테이블에 값이 저장될 것입니다. (즉 bbb로 저장된 전역 변수 a가 ddd로 변경됩니다)

결국 마지막 5번 console은 ddd가 출력됩니다.

각자 한번씩 문제를 보고 정리해볼 수 있도록 합시다~!