JavaScript

실행 컨텍스트

소스코드의 타입

• 전역 코드 전역코드는 전역 변수르 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야한다. 그리고 var키워드로 선언된 전역 변수와함수 선언문으로 정의 된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다
• 함수 코드 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, arguments객체를 관리해야한다 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야한다. 이를 위해 함수코드가 평가되면 함수 실행 컨텍스트가 생성된다
• eval 코드 eval. 코드는 strict mode에서 자신만의 독자적인 스코프를 생성한다 이를 위해 eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다
• 모듈 코드 모듈 코드는 모듈별로 독립적인 모듈 스코프를 생성한다 이를 이해 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다

소스코드의 평가와 실행

평가 → 실행 컨텍스트 → 소스코드의 실행

• 소스코드 평가 과정 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다.

• 평가 과정 이후 선언문을 제외한 소스코드가 순차적을 실행되기 시작한다(런타임) → 소스코드 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다

var x;
x = 1;

자바스크립트 엔진은 두 가지의 과정으로 나누어 처리한다

1. 평가과정에서 변수 선언문을 먼저 실행 → 변수 식별자 x 생성 → 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화

2. 소스코드 평가 과정이 끝나면 소스코드 실행 과정이 시작된다. 변수 선언문 var x;는 소스코드 평가 과정에서 이미 실행 완료. 변수 할당문 x = 1;만 실행. 이때 x 변수에 값을 할당하려면 x변수가 선언된 변수인지 확인해야한다

3. 실행 컨텍스트가 관리하는 스코프에 x변수가 등록되어 있는지 확인한다 x변수가 실행 컨텍스트가 관리하는 스코프에 등록되어 있다면 x변수는 선언된 변수 즉, 소스코드 평가 과정에서 선언문이 실행되어 등록된 변수다

클로저

자바스크립트에서는 함수안에 함수를 작성할 수 있다. 외부함수가 내부함수보다 더 일찍 종료되는 경우가 있다.

function outerFunc() 
{
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}
 
/**
 *  함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.
 *  그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.
 */
var inner = outerFunc();
inner(); // 10

outerFunc()함수는 innerFunc()을 반환하고 먼저 종료되었다 outerFunc()은 innerFunc()의 상위 스코프이다 즉, 함수 outerFunc는 실행된 이후 실행 컨텍스트 스택에서 제거되었으므로 함수 outerFunc의 변수 x 또한 더이상 유효하지 않게 되어 변수 x에 접근할 수 있는 방법은 달리 없어 보인다 그러나 예시코드는 10이 출력이 된다

즉, 외부함수 바깥에서 내부함수를 호출하면 외부함수를 접근할 수 있다는 것이다.

closure을 어떻게 쓰는가?

• closure라는 이름의 함수를 만들고 toggle 변수에 함수를 실행한 리턴값인 내부 함수를 반환한다 반환한 함수는 자신이 생성됐을 때의 렉시컬 환경에 속한 변수 isShow를 기억하는 클로저다 클로저가 기억하는 변수 isShow는 box 요소의 표시 상태를 나타낸다
• 클로저를 이벤트 핸들러로서 이벤트 프로퍼티에 할당했다 이벤트 프로퍼티에서 이벤트 핸들러인 클로저를 제거하지 않는 한 클로저가 기억하는 렉시컬 환경의 변수 isShow는 소멸하지 않는다 다시 말해 현재 상태를 기억한다
• 버튼을 클릭하면 이벤트 포로퍼티에 할당한 이벤트 핸들러인 클로저가 호출된다 이때 .box 요소의 표시 상태를 나타내는 변수 isShow의 값이 변경된다 변수 isShow는 클로저에 의해 참조되고 있기 때문에 유효하며 자신의 변경된 최신상태를 계속해서 유지한다

이벤트

ㅇ