쉅정리 실행 컨텍스트, Closure, Hoisting, Scope, this

*위코드X원티드 프론트엔드 프리온보딩코스 수업내용 복붙 정리 중

실행 컨텍스트 Execution Context

- JS 가 실행되고 있는 컨텍스트 (환경)

- 실행할 코드에 제공할 환경 정보들(변수 정보들)을 모아놓음. 코드를 실행하기 위한 여러가지 정보들 ( 어떤 변수가 있고, 어떤 변수를 hoisting 할 지, scope 는 어떤지, scope chain 은 어떤지 등등등등 )

- 함수를 호출할 때마다 그 함수에 대한 실행 컨텍스트가 생성되며, 함수는 자신만의 고유한 컨텍스트에서 실행된다

 

- Call Stack 과 함께 동작한다, Call Stack 은 현재 실행중인 작업에 관한 정보를 저장하는 Stack 자료구조

 

- 하나의 JS 코드를 실행할 때, 필요한 환경 정보들을 모아 Context 를 구성하고, Call Stack 에 쌓아 올린다

- 가장 위에 있는 Context 와 관련된 코드를 실행하고, 그 다음 순서로 쭉쭉 .. 이런 식으로 전체 코드의 환경과 실행 순서를 보장한다

 

컨텍스트 종류에는 총 3가지가 있는데, 1개는 생략한다

- 전역 Context : 전역 영역에 존재하는 코드에 대해 전역 Context 가 생성되며, Call Stack 에 전역 Context 는 단 1개 뿐. JS 파일이 실행하면 전역 Context 가 가장 먼저 활성화된다

- 함수 Context : 함수에 존재하는 코드를 실행하기 위한 함수 Context

 

Context 에 담기는 정보는 3가지이다. 간단히 변수의 참조를 기록하는 환경이라 생각하자

① VariableEnvironment 변수 객체라고도 하고, LexicalEnvironment 의 스냅샷 이라고 보면 된다

② LexicalEnvironment 변수, 매개변수, 함수 선언 등의 정보를 담고 있으며 ① Environment record 와 ② Outer 로 구성됨

③ ThisBinding

 

Hoisting

변수 선언을 끌어올리는 것. 선언부는 맨 위로 끌어올리고, 할당은 코드가 실행되는 시점에 진행된다고 생각해라

 

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

function doSomething() {
	// 로직
}

함수 표현식 function expression : function 키워드로 정의한 함수를 변수에 할당하는 것

var click = function doSomething() {
	// 로직
}

click();

- 함수 선언문은 hoisting 되어서 위에서 호출 가능한데, 함수 표현식으로 변수에 할당하고 나면 할당 전에 호출 못한다

 

let, const, var 의 차이

- let, const 는 hoisting 안된다 > 정확히 말하면, TDZ 에 존재하기 때문에 접근할 수 없다

- let, const 는 scope 을 block 단위로 적용할 수 있다

 

Scope

변수가 유효한 범위. Scope 가 없다면 코드 전체에서 무조건 unique 한 변수를 써야한다. 모든 프로그래밍 언어에 적용되는 개념

 

Global Scope 은 코드 어디에서든 참조가 가능하다

- var 로 선언한 변수는 전역 객체에 속한다. 브라우저의 전역 객체가 window 이므로, window 의 property 가 되는 것

var a = "안녕";

console.log(a); // 안녕
console.log(window.a); // 안녕

Local Scope 는 함수 block 에만 적용된다. JS 는 scope 범위가 함수다, 보통 다른 언어는 scope 가 {} block 이다

if (true) { // if(){} 는 함수 block 이 아니고, 일반 block 이니까 x 는 전역변수
    var x = 5;
}

console.log(x); // 5

(function () { // 함수 block 이므로 local scope 가 적용됨
    var x = 5;
})();

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

다만 let, const 로 변수를 선언하면 scope 는 block 이다

 

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

 

Closure

함수가 선언됐을 때 만들어진 scope 가 함수가 끝난 후에, scope 이 사라진 후에도 호출할 수 있는 것. scope 이 끝난 외부 함수의 변수를 참조할 수 있다

 

this

다른 언어에서 this 는 class 에서만 사용하고, class 로 생성한 인스턴스 객체를 가리킨다. 그런데 JS 에서는 대상이 항상 달라진다

 

함수와 메소드는 모두 function 키워드로 함수를 정의한 것을 의미한다

- 객체에 property 로 함수가 정의되면 메소드인데, 호출할 때 객체.함수로 호출해야 메소드이다. 이 메소드를 다시 변수에 할당해서 객체없이 그냥 호출하면 그것은 함수이다

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

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

const under20 = user.underTwenty;
under20(15); // 함수. 객체 안에 정의된 property 이지만, 객체가 호출하지 않았으므로 함수

this 는 실행 컨텍스트가 생성될 때 결정된다. ( 실행 컨텍스트는 함수를 호출할 때 생성되므로 ) 선언, 할당할 때가 아니라 함수가 호출될 때 this 가 결정된다

- 전역 공간에서의 this 는 window (브라우저), 혹은 global (Node) 를 가리킨다

var a = 1;
console.log(this.a); // 1

- 메소드가 호출될 때 this 는 호출한 객체를 바라본다

 

arrow function 을 사용하면 this 가 위와 같이 결정되지 않는다. this 의 대상이 어떤 객체가 호출했느냐에 따라 결정되지 않는다. 함수 선언 시 scope chian 에서 가장 가까운 대상이 this 로 결정된다 ( class component 에서 this bind X )