[자바스크립트] 개념정리② - 스코프, 실행컨텍스트, 스코프체인

[먼저 보면 좋은 게시글]

- [자바스크립트] 짧게짧게 개념정리① : http://jinbroing.tistory.com/112

[스코프]

- 변수의 범위를 뜻함

- 자바스크립트는 블록( { ... } )이 아닌 함수 기준 변수 범위를 사용함

- 함수의 유효범위는 [[Scopes]] 프로퍼티로 함수 객체 내 연결리스트 형태(왜 연결리스트인지는 아래 내용들 참고)로 관리됨 

[실행컨텍스트와 스코프]

- 실행컨텍스트가 생성될 때 스코프 정보를 생성함

- 실행컨텍스트 종류는 어플리케이션이 실행되면 자동으로 생성되는 전역 컨텍스트 / 함수가 실행되면 생성되는 함수 컨텍스트가 있음

- 전역 컨텍스트에는 전역객체(스코프정보가 담긴 [[Scopes]] 프로퍼티, 함수 파라미터 정보가 담긴 arguments)가 있음

- [[Scopes]] 에는 전역 혹은 함수의 객체 프로퍼티(변수, 함수)가 들어감

- 현재 컨텍스트에서 특정변수에 접근하려고 할 경우 [[Scopes]] 프로퍼티 (리스트)를 활용함

- [[Scopes]] 프로퍼티에 담겨있지않은 변수를 호출할 경우는 undefined 에러를 발생함

- 현재 컨텍스트 뿐만 아니라 상위 컨텍스트의 변수에 접근할 때에도 사용 : 스코프 체인

- 아래는 앱이 실행되었을 때 생성된 전역 실행 컨텍스트의 내부와 전역 코드임

var global1 = "hi";
var globar2 = "hello";

- [[Scopes]]는 전역 변수객체를 가리킴

[스코프체인]

- 스코프체인이란 [[Scopes]] 프로퍼티가 연결리스트로 관리되는 형태를 지칭함

- 현재 컨텍스트 뿐 아니라 상위 컨텍스트의 스코프 정보를 참조하는 것을 말함

- 전역 컨텍스트 내에 있는 함수 객체의 경우 : 전역 컨텍스트의 [[Scopes]]를 그대로 물려받음

- 함수가 호출되면 : 통합 [[Scopes]] = 함수 실행컨텍스트 [[Scopes]] (AO) + 상위 컨텍스트의 [[Scopes]] (전역을 포함한 상위 함수)

var global = "hi";
 
function foo(){
     var local = "hello";
}
 
/*********** foo 호출 [[Scopes]] 변화 ************/
foo();

- foo가 전역 실행컨텍스트에서 변수객체로 있을 때에는 [[Scopes]]에 전역 변수객체의 [[Scopes]]를 그대로 가지고 있음

- foo 호출되면 컨텍스트가 만들어지고, foo 변수객체 [[Scopes]]는 기존 [[Scopes]]에 foo 함수 스코프 정보 [[Scopes]]와 합침

- 새로운 스코프체인을 생성, 연결리스트처럼 활용됨(지금 컨텍스트의 [[Scopes]]에 없으면 상위 개념으로 올라가서 찾음)

[더 알아볼 개념]

- 클로저, 캡슐화

[참고자료]

- 개인블로그, [ javaScript ] 자바스크립트 스코프 체인 : https://goo.gl/Sl7fsI

- 개인블로그, [자바스크립트] 그림으로 이해하는 Scopes, Closures - https://goo.gl/3l1GlO