[내배캠] 4/23 7일차

실행 컨텍스트란?

: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

Call Stack

• Stack : Last in, first out
• Queue : First in, first out

내가 짜놓은 코드들은 Stack에 쌓이게 된다. 실행이 마치면 스택이 없어진다.

이런 stack방식으로 코드의 순서를 보장하게 된다.

var a = 1;
function outer() {
	function inner() {
		//코드들
		var a = 3;
	}
	inner();
}
outer();

위의 함수가 Stack에 쌓이는 순서

1. 전역 컨텍스트
2. outer()
3. inner()
4. var a = 3;
5. inner() pop
6. outer() pop
7. 전역 컨텍스트 pop

실행 컨텍스트 객체에 담기는 정보

1. VariableEnvironment(VE) : 식별자 정보(변수명), 외부 환경정보를 가진다. 이 정보는 바뀌지 않는다.
2. LexicalEnvironment(LE) : VE와 같지만, 변경이 생길수록 변경사항을 실시간으로 반영한다.
3. ThisBinding : this 식별자가 바라봐야되는 객체

• VE 와 LE 차이점
  • 스냅샷의 유무

LexicalEnvironment

: 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장(수집)된다. (= 호이스팅,뜻은 record의 수집과정)

• 수집대상 : 함수에 지정된 매개변수, 함수 자체, var로 선언된 변수 식별자 등
• 컨텍스트 내부를 처음부터 끝까지 순서대로 수집.(not 실행)

호이스팅

: 식별자 정보를 수집할 때 호이스팅 개념이 나온다. 변수 저장 수집 과정을 알기 쉽게하기 위해 탄생한 가상 개념.

: 식별자 정보를 위로 끌어올리는 것

[호이스팅 규칙]

매개변수 및 변수는 선언부를 호이스팅한다.

호이스팅 전

function a () {
	var x = 1; //선언부: var x 
	console.log(x);
	var x; //선언부: var x
	console.log(x)
	var x = 2; //선언부: var x
	console.log(x);
}

예상된 출력 결과 : 1 undefined 2

호이스팅 후

function a () {
	var x;
	var x;
	var x;
	x = 1;
	console.log(x);
	console.log(x);
	x = 2;
	console.log(x);
}

출력 결과 : 1 1 1

함수 선언은 전체를 호이스팅 한다.

: 모든 함수가 다 호이스팅 되는 것은 아니다.

호이스팅 전

function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() {}
	console.log(b);
}
a();

예상된 출력 결과 : undefined bbb b함수

호이스팅 후

function a () {
	var b;
	function b (){}
	console.log(b);
	b = 'bbb';
	console.log(b)
	console.log(b)
	
	출력 결과 : b함수 bbb bbb

• 함수선언문, 함수 표현식
  - 함수 선언문

      ```jsx
      function a () { ... }
      a();
      ```
      
  - 함수 표현식
      
      ```jsx
      //익명함수표현식
      var b = function () { ... }
      b();
      
      //기명함수표현
      var c = function d () { ... }
      c(); //ok
      d(); //error
      ```
      
      : 기명함수 표현식은 거의 안쓰인다.
      
      
     
     
     

  오늘은 강의를 듣고 개인 프로젝트 초기 세팅을 진행하였다. 내일은 강의 반, 프로젝트 반을 진행 할 예정이다. 오늘 강의에서는 데이터 타입에 대해서와 실행 컨텍스트에 대해 공부하였다
  호이스팅에 대한 내용도 있었고 js개념을 공부하면 내가 코딩했던 것들의 해부도를 보는 것 같은 느낌이라 재밌다.