cope & Closures - 2. Illustrating Lexical Scope

이 시리즈는 You Don't Know JS Yet (1판인 You Don't Know JS의 개정판) 을 가지고 스터디를 진행하면서 요약 정리한 글입니다. 내용에 대한 퀴즈도 깃헙 리포지토리에 올리고 있으니 참고하시면 더 도움이 되실 것 같습니다. 내용에 대해 오류가 있거나 궁금하신 점이 있다면 댓글 달아주세요!

Marbles, and Buckets, and Bubbles... Oh My!

이제 본격적으로 스코프를 다뤄 봅시다. 위와 같이 코드를 작성하게 된다면, 스코프별로 색을 칠해 표시해 보았습니다. 스코프를 구분하는 과정은 Compilation(컴파일) 과정중에 일어나고, 스코프가 결정이 됩니다. 결정된 스코프는 이후 Execution(실행) 과정에서 lookup 을 통해 값을 찾아오게 됩니다.

A Conversation Among Friends

본문에서는 스코프의 작동원리를 Engine, Compiler, Scope Manager간 대화를 비유로 표현해 자세하게 설명되어있습니다. 자세한 설명을 읽어보는 것도 도움이 많이 되니 여기를 참고해보시면 좋을 것 같습니다.

위 코드에서 첫번째 줄인 var students = [...];만 생각해도 별 차이 없이 작동될 것 같지만, 다양한 일이 일어납니다. 먼저 Compiler가 컴파일하는 과정에서, students 라는 변수가 있는지 확인한 이후 없는 경우 student 변수를 만들어달라고 Scope Manager (변수들을 관리하는 또다른 JS엔진이라고 생각하면 될 것 같습니다)에게 부탁합니다. 이후 실행 과정에서 Engine이 다시 한번 student 변수가 있는지 확인하고 있기 때문에 그 변수에 값을 집어넣습니다.

위 예시와 같이 JS의 실행 과정이 Compilation -> Execution 과정을 거치기 때문에 변수를 선언하고 초기화 하는 부분이 서로 나눠져 작동된다는 것을 기억해야 합니다.

Nested Scope

다만 위 예시는 스코프가 없을 때의 상황이고, 스코프 안으로 들어가게 되면 상황이 달라지게 됩니다. 다른 언어와 동일하게, 현 스코프에서 변수을 찾지 못하게 된다면 상위 스코프에서 변수를 찾으러 갑니다. 예를들어 9번째 줄의 studnets는 파란색 스코프 안에 있지만 이 안에 선언되어있지 않았기 때문에 상위 스코프인 분홍 스코프에서 변수를 찾게 되는 것입니다.

function getStudentName() {
    nextStudent = "Suzy";
}

getStudentName();
console.log(nextStudent);	// "Suzy"

그런데 만약 최상단 스코프까지 갔는데도 변수가 없다면 에러를 출력하는것이 정상이지만, 특별한 상황에서는 다르게 작동됩니다. 변수를 Target으로 사용할 때 strict 모드가 사용되지 않았을 경우에는 Scope Manager가 최상단 스코프에 해당 변수를 만들어줍니다.

변수의 역활에 따른 분류인 Target과 Source에 대한 설명은 이전 글을 참고하시면 될 것 같습니다.