실행컨텍스트와 관련된 키워드를 정의 위주로 간략하게 정리한 글입니다.
상세한 내용은 참고링크를 통해 더 확인할 수 있습니다.👸

실행 컨텍스트

자바스크립트가 실행되고있는 컨텍스트(환경)

• 정의_ 실행할 코드*에 제공할 환경 정보*들을 모아둔다.
• 생성시점_ 함수를 실행할 때마다(콜스택의 최상단에 코드가 위치할 때) 해당 함수에 대한 새로운 환경 정보를 생성하여 자신만의 고유 컨텍스트에서 실행된다.
• 컨텍스트 정보
  • Variable Environment : LexicalEnvironment의 스냅샷 (변경x)
  • LexicalEnvironment :
    • Envirionment record : 변수, 매개변수, 인자, 함수 선언 등 정보
      - 코드가 실행되기 전에 정보를 모두 수집
      (== 자바스크립트 엔진은 코드를 실행되기 전, 코드의 변수명을 모두 알고 있다는 것 => hoisting)
    • Outer:
      -다른 LexicalEnvironment를 참조하기 위함 => scope 탐색, scope Chainning

---

*실행할 코드:

• 전역코드_파일이 열리자마자 전역컨텍스트부터 활성화
  콜스택에 전역 컨텍스트는 하나 뿐~
• 함수코드_해당함수를 실행할 때 컨텍스트 생성
• eval코드

*환경정보: 어떤 변수가 있는가, 어떤 변수를 hoisting할지, scope와 scopeChain을 확인하고, this는 어디에 어떻게 binding 되는지 등등...

---

🐟 var, let, const에 대한 특징 비교

---

hoisting

변수의 선언을 끌어올리는 것, 선언은 했지만 어떤 값이 할당되었는지는 파악하지 않는다. 코드가 실행되는 시점에 값을 할당하며 그 전까지는 undefined이다.

표현에 따른 hoisting차이

구분	호이스팅 O	호이스팅 X
함수	함수선언식	함수표현식
변수	var	let, const

• 함수 선언식 function someFunc(){...}
• 함수 표현식 var someFunc = () => {...}

호이스팅 된 경우

//*var
 console.log(test) //undefined :호이스팅
 var test = 'red'
 console.log(test) //red

호이스팅 되지 않는 경우

//*let 호이스팅 불가능
 console.log(subway)
 let subway = 'egg' 
 let subway = 'ham'
	//Uncaught ReferenceError: subway is not defined

---

Scope

변수가 살아있는 유효범위
만약 스코프가 없었다면, 절대 중복되지 않는 변수명을 써야한다.

• Global Scope : browser - window, Node.js - global
var로 선언한 변수는 전역객체의 프로퍼티가 된다.

• Lexical Scope :함수를 호출한 위치가 아닌, 함수를 선언한 위치에 따라 결정된다.
  *자바스크립트의 기본스코프 : 함수 레벨 스코프 (Function-level-scope)
  변수가 var, let, const 에 상관없이 모두 함수 단위에서만 유효하다.

(function () {
  var x = 5;
})();

console.log(x);  // Uncaught ReferenceError: x is not defined

• 비 블록레벨 스코프 (Non-Block-level-scope)
  자바스크립트는 함수 레벨 스코프를 따르기 때문에 전역에 블록 레벨 에 변수를 선언하였다 하여도, 함수내부가 아니므로 전역 스코프에 해당된다.
  var가 해당된다.

if (true) {
  var x = 5;
}
console.log(x); //5

• 블록레벨 스코프 (Block-level-scope)
  블록외부에서 내부의 변수에 접근할 수 없다.
  let, const일때 적용된다.

if (true) {
  let x = 5;
}
console.log(x) 
//Uncaught ReferenceError: x is not defined

     블록 내의 변수와 블록 외의 변수를 다르게 취급한다.

if (true) {
  let x = 5;
}
let x =10;
console.log(x)  //10

---

Scope Chain

변수가 해당 scope에서 유효하지 않을 때, 안에서부터 바깥으로만 차례로 검색해 나가는 것

---

Closure

함수가 선언될 때 scope가 만들어지는데
함수가 종료된 이후에도 scope가 유효하여 변수를 참조할 수 있는 상황

외부함수와 그 함수에 내부함수가 존재하며 결과값으로 내부 함수를 반환하고 있는 경우이다.
외부함수가 실행되어 죵료되어도 외부함수의 scope가 GC에 의해 삭제되지 않고 유효하여, 반환된 내부함수가 계속해서 해당 scope를 참조할 수 있는 상황이다.

*GC: Garbage Collector

• 실행컨텍스트를 참고 하며 사용하지 않는 변수를 삭제함
• 만약 GC에 수집되게 하려면 null이나 undefined를 할당하면 됨

🐠 스코프와 클로저 detail

---

This

• 정의 - 바라보고 있는 객체
• 생성시점 - 실행컨텍스트가 생성될 때 (함수가 호출/실행되는 시점)생성되는데 호출되는 방법에 따라 this가 무엇인지 결정된다.

	함수 호출	메서드 호출
ex	someFunc()	someFunc.play()
this 주체	전역객체	인스턴스

일반함수로 호출할 때의 this는 전역객체를 나타내며
.프로퍼티 형태의 메서드로 호출할 때에는 . 앞의 객체를 this로 인식한다.

*주의할 점: 객체가 함수를 직접! 호출해야 메서드이다.

let user = {
	name: 'kim',
	underTwenty: function(age) {
      	console.log(this)
		return age < 20;
		}
	}

user.underTwenty(30); // 메서드 : user

const under20 = user.underTwenty;
under20(15);    //함수 : Window

const { underTwenty } = user
underTwenty(15) //함수 : Window

메서드로 호출한 경우 user 객체가 this이고
함수로 호출한 경우 this는 전역객체 window가 해당된다. 때문에 window.name으로 접근하여 빈 문자열을 반환한다.

• this 지정하는 this binding 방법
  • this객체를 묶어 함수를 실행:
    callbackFunc.call(this, arg1, arg2) : 파라미터 전달
    callbackFunc.apply(this, [arg1, arg2..]) : 배열 전달
  • this객체를 묶어 새로운 함수를 생성:
    callbackFunc.bind(this) :함수를 생성하기만 하였고 실행하지 않음
  • arrowFunction : scope chain의 가장 가까운 this로 대상 결정!(주의! 메서드를 호출한 경우에도 프로퍼티 앞의 인스턴스를 this로 지정하는 것이 아니라 scope chain 상 가까운 this를 찾는다.)

---