자바스크립트 스코프 & 실행 컨텍스트

스코프

정말 짧게 요약하자면 자바스크립트 변수에 접근 가능한 범위를 의미한다.

자바스크립트 스코프에는 크게 전역 스코프와 함수 스코프가 존재한다.

전역 스코프

// 전역 스코프 here
var example = 'global_scope';

function functionScope(){
  console.log(example);
}

functionScope(); //global_scope가 출력됨

전역 스코프는 JS스코프중 가장 바깥에 위치해있다.

위 코드에선 변수 example과 함수 functionScope가 전역스코프내에 선언되어 있다.

함수 스코프

var example = 'global_scope';

function functionScope(){
  // 함수 스코프 here
  var example = 'function_scope';
  console.log(example);
}

functionScope(); //function_scope가 출력됨

전역 스코프에서 함수가 호출되면 함수 스코프가 생성된다.

함수 안에 선언된 지역 변수들은 해당 함수 스코프 내에서만 영향을 준다.

스코프 체이닝

함수는 안쪽 함수에서 바깥쪽 함수로 체이닝되어져 있다.

function outerScope(){
  let value = 'scopeValue';
  return function innerScope(){
    console.log(value);
  }
}

let inner = outerScope();
inner();

함수 실행시 먼저 자신의 함수 스코프 내에서 값을 찾아보고 만약 존재하지 않는다면 자신의 바깥쪽 스코프에서 값을 찾아보는 형식으로 체이닝 되어져있다.

위 코드에서 outerScope와 innerScope는 서로 스코프 체이닝으로 이어졌다.

inner가 실행이 되면 먼저 innerScope의 스코프에서 변수 value을 찾는다.

value가 없으면 체이닝된 outerScope에서 변수 value를 찾아 화면에 출력한다.

렉시컬 스코프

스코프는 함수 실행시 결정되지 않고 코드 선언의 위치에 의해서 결정된다.

let value = 'global';

function inner(){
  console.log(value);
}

function outer(){
  let value = 'outer';
  inner();
}

outer();

예를 위 코드에서는 outer-inner 간 스코프 체이닝이 이루어지지 않았기 때문에 outer에서 inner을 호출하였다 하더라도 화면에 outer가 출력되진 않는다.

렉시컬 스코프에 의해서 스코프는 코드 선언 위치에 의해 결정되었기 때문에 발생한 문제이다.

실행 컨텍스트

함수가 실행되면 컨텍스트도 생성된다.

컨텍스트는 기본적으로 this와 매개변수, 선언된 변수,스코프 체이닝으로 이루어져있다.

각 컨텍스트는 함수가 종료되면 자동으로 사라지게된다.

실행 컨텍스트도 크게 전역 컨텍스트와 함수 컨텍스트로 이루어져있다.

실행 컨텍스트 생성 순서

//global Context
let value = 'global';

function localContext(val){
  console.log(val);
}
localContext(value);

실행 컨텍스트 생성 순서는 다음과 같다.

JS 코드가 실행 되면 전역 컨텍스트를 생성한다.

전역 컨텍스트의 기본 this 값은 window이며 위 예제 에서는 변수로 value와 localContext를 가지게 된다.

전역 컨텍스트가 생성된 후 함수를 실행시키면 함수 컨텍스트가 생성된다.

함수 컨텍스트의 this는 new 키워드나, bind, call을 통해서 변경할 수 있고, 컨텍스트내의 매개변수, 변수 정보, 스코프체이닝 정보를 담아 생성된다.

함수가 종료되면 생성된 함수 컨텍스트도 함께 사라지게된다.

클로저

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다

function createClosure(){
  var innerValue = 'inner';
  return function(){
    console.log(innerValue);
  }
}

var outer = createClosure();
outer();

코드를 설명하면 createClosure 함수는 내부에 innerValue 변수를 선언하고 익명함수를 리턴하는 함수이다.

outer 변수는 createClosure 함수가 리턴한 익명함수를 받는다.

createClosure 함수를 호출하면 함수 컨텍스트가 생성이된다.

이 createClosure 함수내에 innerValue 변수가 선언되고 컨텍스트에 저장된다.

createClosure가 리턴하는 익명함수는 서로 스코프 체이닝으로 연결되어져있어 innerValue를 참조하여 사용할 수 있다.

createClosure가 모두 실행되면 컨텍스트도 사라지는데

익망함수는 여전히 사라진 컨텍스트 속 innerValue을 참조하고 있어 createClosure 컨텍스트가 사라져도 값을 그대로 이용할 수 있다.

이 함수 외의 다른 스코프에서는 컨텍스트가 사라져 innerValue에 접근할 방법이 없다.

이런 방식으로 클로저를 활용하여 변수를 은닉화,캡슐화 하는것이 가능하다.