[TIL] JavsScript - 실행컨텍스트 23.05.26

✔️오늘 한일!

• JS종합반 3주차까지 2회독 완료
• 개인과제 발제 후 팀명 선정 및 진행계획 논의
• 선정된 팀원들과의 알고리즘 스터디 계획 수립

---

1. 스택 vs 큐

(출처 : https://velog.io/@leejuhwan/%EC%8A%A4%ED%83%9DSTACK%EA%B3%BC-%ED%81%90QUEUE)
1) 콜 스택 LIFO (Call stack)
실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체.
전역공간으로 시작해서 콜스택을 쌓아 올리며 후입선출 방식
2) 큐 FIFO (Queue)
스택이 쌓인 순서대로 실행되는 선입선출 방식

실행컨텍스트 구성 예시 코드

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

실행순서
코드실행 -> 전역(in) -> 전역(중단) + outer(in) -> outer(중단) + inner(in) -> inner(out) + outer(재개) -> outer(out) + 전역(재개) -> 전역(out) -> 코드종료

2. VE (VariableEnvironment) vs LE (LexicalEnvironment)

• 두 객체에 담기는 항목은 record와 outer로 동일
• 스냅샷의 유지여부로 비교 가능, VE는 스냅샷을 유지하며 LE는 실시간으로 변경사항을 계속해서 반영
  -> 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음 이를 복사하여 LE를 만들고 활용

1) 호이스팅 규칙
1. 매개변수 및 변수는 선언부를 호이스팅
2. 함수선언은 전체를 호이스팅

2) 적용 예시
[적용 전]

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

[호이스팅 적용]

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

-> 먼저 매개변수 및 변수의 선언부를 위로 끌어올린 후에 나머지는 순서대로 수집
적용 전의 결과 값은 1, undefined, 2로 예상되지만 실제 결과 값은 1, 1, 2가 도출
-> 함수의 경우 협업을 많이 하고 전역 공간에서 이루어지는 코드 협업일 수록 함수 표현식을 활용하는것이 더 좋음
ex) 초기에 함수선언문으로 작성된 코드 이후 많은 양의 코드가 쌓인 후에 동일한 함수 선언문이지만 결과 값이 다른 코드를 작성하게 되면 전역 공간에 영향을 주게 되는 case

---