2.3 LexicalEnvironment

[eunzy38]

study 완료 후 체크 부탁드립니다.

• [x] 김혜선
• [x] 전은경
• [x] 서동국
• [x] 김은지
• [x] 이봄
• [x] 오근영
• [x] 정형교

[dongggook]

LexicalEnvironment

• 처음엔 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영된다.

실행컨텍스트와 코드의 실행과정

// ----------------------------(1)
let a = 1;
function outer() {
    function inner() {
        console.log(a); // undefined
        let a = 3;
    }
    inner(); // ---------------(2)
    console.log(a); // 1
}
outer(); // -------------------(3)
console.log(a); // 1

• (1)에서 전역컨텍스트가 생성되고, 이를 콜스택에 쌓는다.
• 다시 코드를 실행하며 (3)에서 outer()가 호출되고, outer()함수 실행을 위한 실행컨텍스트가 생성되고, 콜스택에 쌓인다.
• outer() 함수가 실행되고 코드가 실행되다가, (2)에서 inner() 함수가 호출되어, inner() 함수 실행을 위한 실행컨텍스트가 생성되고, 콜스택에 쌓인다.
• inner() 함수안에서 a를 콘솔에 출력하고 나면 실행할 코드가 더이상 없기 때문에, inner()가 콜스택에서 제거된다.
• 그 다음 콜스택의 최상단에 위치한 outer() 함수가 다시 실행되면서, 9째 줄[console.log(a)]을 실행하고 a를 콘솔에 출력하고, outer() 함수도 콜스택에서 제거된다.
• 콜스택 최상단에 위치한 전역컨텍스트가 다시 실행되며, 12번째줄에서 a를 다시 콘솔에 출력하고 종료된다.

[OHKuenYoung]

2-3-1 environmentRecord와 호이스팅

호이스팅 규칙

변수 선언 부분을 먼저 실행

함수 선언문과 함수 표현식

함수 선언문 function 정의부만 존재하고 별도의 할당 명령이 없는 것

function a(){.....}

a();  //실행

함수표현식 정의한 function을 별도의 변수에 할당하는 것

var b = function() {...} // 익명 함수 표현식

b();  //실행

var c = function d() {..} //기명 함수 표현식

c()  //실행
d()  //에러

함수선언문과 함수 표현식의 차이 함수 선언문은 함수 전체를 호스팅하는 반면 함수 표현식은 변수 선언부만 호이스팅한다.

2-3-2 스코프, 스코프체인, outerEnvironmentReference

스코프 식별자에 대한 유효 범위 자바스크립트는 전역공간을 제외하면 함수에 의해서만 스코프 생성

스코프체인

• 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색하는 것
• 여러 스코프에서 동일한 식별자를 선언한 경우 무족너 스코프 체인상에서 가장 먼저 발견된 식별자에게만 접근 가능

전역변수와 지역변수

전역변수 전역공간에서 선언한 변수

지역변수 함수 내부에서 선언한 변수

[Lee-Bom]

2-3 LexicalEnvironment LexicalEnvironment 내부는 environmentRecord와 outer-environmentRecord로 구성

• 2-3-1 environmentRecord와 호이스팅

  • environmentRecord _현재 컨텍스트와 관련_된 코드의 식별자 정보들을 처음부터 끝까지 훑어나가며 순서대로 수집하여 저장
  • 호이스팅 규칙 코드 실행 전 식별자들을 최상단으로 끌어올린다고 간주(수집) 변수명(식별자 정보)만 끌어올리고 할당 과정은 그자리에 남겨둠 함수 선언 정보는 함수 전체를 끌어올림
  • 함수 선언문과 함수 표현식
  • 함수 선언문: function a ( ) { } function의 정의부만 존재, 함수명 정의, 전체가 호이스팅 됨 전역공간에 함수를 선언하거나 동명의 함수를 중복 선언하면 마지막에 선언된 함수가 덮어쓰는 문제가 있음
  • 함수 표현식: var b = function ( ) { } 정의한 function을 별도의 변수에 할당, 일반적으로 익명 함수 표현식 함수를 하나의 값으로 취급하여 다른 변수에 '할당'

• 2-3-2 스코프, 스코프 체인, outerEnvironmentReference

  • 스코프: 식별자에 대한 유효범위
  • 스코프 체인: 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
  • outerEnvironmentReference(스코프 체인을 가능케 하는 것)
  • 현재 호출된 함수가 _선언될 당시_의 LexcialEnvironment를 계속 찾아 올라가며 참조
  • 가장 가까운 요소부터 차례대로만 접근 가능
  • 동일한 식별자를 선언한 경우 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능, 변수 은닉화(variable shadowing)
  • 전역변수와 지역변수
  • 전역 변수: 전역 공간에 선언한 변
  • 지역 변수: 함수 내부에서 선언한 변수

[hyeonggyo]

LexicalEnvironemnt

• 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨

[eunzy38]

environmentRecord와 호이스팅

호이스팅

변수와 함수(전체) 선언을 끌어올려 먼저 실행함

함수 선언문 & 함수 표현식

함수 선언문

• function의 정의부만 존재하고 별도의 할당 명령이 없음
• 함수명이 정의되어 있어야 함

  function a ( ) { /* ... */ }  // 함수 선언문, 함수명 a가 곧 변수명
  a( );                         // 실행 OK

함수 표현식

• 정의한 function을 별도의 변수에 할당
• 함수명이 정의되어 있지 않아도 됨

  var b = function ( ) { /* ... */ }  // (익명) 함수 표현식, 변수명 b가 곧 함수명
  b( );                               // 실행 OK

  익명 함수 표현식 함수명을 정의하지 않은 함수 표현식 (일반적으로 많이 쓰임)

  var c = function d ( ) { /* ... */ }  // 기명 함수 표현식, 변수명은 c, 함수명은 d
  c( );                                 // 실행 OK
  d( );                                 // error

  기명 함수 표현식 함수명을 정의한 함수 표현식 함수명은 오직 함수 내부에서만 접근 가능 (외부에서 함수명으로 함수를 호출할 수 없음)

함수 선언문 vs 함수 표현식

함수 선언문은 함수 전체를 호이스팅 하는 반면, 함수 표현식은 변수 선언부만 호이스팅 함

스코프, 스코프체인, outerEnvironmentReference

스코프

식별자에 대한 유효범위 ES5까지의 자바스크립트는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성됨

스코프 체인

• 가장 가까운 요소부터 차례대로만 접근할 수 있고, 다른 순서로 접근하는것은 불가능 (각 outerEnvironmentReference는 오직 자신이 선언된 시점의 LexicalEnvironment만 참조)
• 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상 가장 먼저 발견된 식별자에만 접근 가능하게 됨

전역변수 & 지역변수

전역변수 : 전역 공간에서 선언한 변수 지역변수 : 함수 내부에서 선언한 변수

[KimHyeSeon]

LexicalEnvironment

• 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것

environmentRecord와 호이스팅

• environmentRecord
  • 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장
  • 순서대로 수집
• 호이스팅
  • 코드가 실행되기 전 코드의 변수와 함수를 최상단으로 끌어올리는 것

함수선언문과 함수 표현식

• 함수 선언문
  • function 정의부만 존재, 별도의 할당 명령이 없는 것
  • 반드시 함수명이 정의되어 있어야 함 (기명함수표현식)
  • 외부에서 접근 불가, 내부에서만 접근 가능!!
  • var a = function b ()
• 함수 표현식
  • 정의한 function을 별도의 변수에 할당하는 것
  • 함수명을 정의하지 않아도 됨 (익명함수표현식, 일반적인 함수 표현식을 말함)
  • var b = function ()

스코프

• 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것

environmentRecord와 호이스팅

• environmentRecord
  • 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장
  • 순서대로 수집
• 호이스팅
  • 코드가 실행되기 전 코드의 변수와 함수를 최상단으로 끌어올리는 것

함수선언문과 함수 표현식

• 함수 선언문
  • function 정의부만 존재, 별도의 할당 명령이 없는 것
  • 반드시 함수명이 정의되어 있어야 함 (기명함수표현식)
  • 외부에서 접근 불가, 내부에서만 접근 가능!!
  • var a = function b ()
• 함수 표현식
  • 정의한 function을 별도의 변수에 할당하는 것
  • 함수명을 정의하지 않아도 됨 (익명함수표현식, 일반적인 함수 표현식을 말함)
  • var b = function ()

스코프

• 식별자에 대한 유효범위
• 오직 함수에 의해서만 스코프가 생성(ES5까지)
• 스코프체인
  • 식별자의 유효범위를 안에서 바깥으로 차례로 검색해 나가는 것
  • 스코프 체인을 가능하게 하는 것이 outerEnvironmentRefernce

스코프 체인

• outEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조
• outEnvironmentRefernce는 연결리스트의 형태를 띔
• 여러 스코프에서 동일한 식별자를 선언한 경우 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능

전역변수

• 전역 스코프에서 선언한 변수
• 코드의 안전성을 위해 전역변수 사용 최소화

지역변수

• 함수 내부에서 선언한 변수

this

• thisBinding에는 this로 지정된 객체가 저장
• 실행 컨텍스트 활성화 당시 this가 지정되지 않은 경우 this에는 전역 객체가 저장

[hyeonggyo]

• 호이스팅은 코드 해석을 좀 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념으로 실행 컨텍스트가 관려하는 코드 집단의 최상단으로 이들을 끌어올린다고 해석하는 것입니다.
• 스코프는 변수의 유효범위를 말합니다.

[jeonEK]

LexicalEnvironment

• 사전적 환경.
• 컨텍스트를 구성하는 환경 정보들을 사전에 접하는 느낌으로 모아 놓은것.

1. environmentRecord와 호이스팅

• environmentRecord (환경기록)
  • 현재 컨텍스트와 관련된 코드의 식별자 정보들을 저장
  • 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순수대로 수집
• 호이스팅
  • 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대처한 가상 개념

함수 선언문과 함수 표현식

• 함수 선언문
  • function 정의부만 존재하고 별도의 할당 명령이 없는 것.
  • 반듯이 함수명이 의정돼 있어야함
• 함수 표현식
  • 정의한 function을 별도의 변수에 할당하는 것.
  • 함수명의 정의하지 않아도 됨(정의할경우 기명함수 표현식, 정이하지 않을 경우 익명 함수 표현식)
  • 기명 함수 표현식의 경우 외부에서 함수명으로 함수 호출이 불가하며 함수 내부에서만 접근 가능함.

스코프, 스코프체인, OuterEnvironmentReference

• 스코프
  • 실별자에 대한 유효범위
  • 자바스크립트에서는 전역공간을 제외하면 오직 함수에 의해서만 스코프 생성
• 스코프 체인
  • 스코프가 어떻게 연결되었는지 보여주는 것.
  • 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프체인 상에서 가장 먼저 발견된 식별자에만 접근 가능
• OuterEnvironmentReference(외부 환경에 대한 참조)
  • 현재 호출된 함수가 선언될 당시의 lexicalEnvironment를 참조.

전역변수와 지역변수

• 전역변수 : 전역 스코프에서 선언한 변수
• 지역변수 : 함수 내부에서 선언한 변수
• 코드의 안전성을 위해 가급적 전역변수 사용을 최소화하는 노력이 필요.

렉시컬 환경은 세가지 일을 한다. (VariableEnvironment도 동일) 1. Environmnet Records lexical environment 안에 함수와 변수를 기록한다.

2. Reference to the outer environment 외부 환경으로의 참조 값의 의미는 외부 lexical 환경으로 접근할 수 있다는 의미이다. 자바스크립트 엔진이 현재의 lexical environment에서 변수를 찾지 못했다면 외부 환경에서 해당 변수를 찾아 볼 수 있다는 의미이다.

3. This binding this의 값이 여기서 결정된다. 글로벌 실행 컨텍스트에서 this는 global object 이다. 함수 실행 컨텍스트에서는 this 값은 어떻게 함수가 호출되었는지에 따라 달라진다. 만약 함수가 object reference로 호출되었다면 this는 해당 객체를 가리키게 된다. 그렇지 않으면 this는 글로벌 객체(window)를 가리키거나 strict mode에서는 undefined를 가리키고 있다.