중요한 자바스크립트 핵심이지만 너무 어렵기에 주니어에게 중점적으로 요구하지 않지만 자바스크립트에서 정말 중요한 개념이니 조금씩 공부하자!!
📕 실행 컨텍스트
JavaScrip 코드가 실행되고 있는 환경이며 실행하고자하는 코드의 정보들을 담아놓은 객체
실행컨텍스트는 브라우저에서 파일에 열리는 시점에서 생성되는데 그 때 순서대로 CallStack༌에 쌓아 올린다. 각각 고유한 실행 컨텍스트를 가지고 있으며, stack이란 자료구조 때문에 환경과 순서가 보장된다.
(CallStack༌ : 현재 실행중인 작업에 대한 정보를 저장하는 곳)
실행 컨텍스트 종류
-
전역 코드
- 실행 컨텍스트에 가장 먼저(하단에) 들어가는 코드
- 콜스택에 전역 컨텍스트는 딱 하나일 수 밖에 없다.
- 브라우저가 종료될 때 전역 컨텍스트는 유지된다.
-
함수 코드
- 함수가 실행될 때마다 생성
- 함수마다 스코프를 가지게 되는데 이걸 지역 스코프라 한다.
-
eval 코드
- eval이라는 자바스크립트 내장 함수를 실행할 때마다 만들어짐
(요즘은 거의 사용하지 않는다)
- eval이라는 자바스크립트 내장 함수를 실행할 때마다 만들어짐
Variable Environment
LexicalEnvironment의 본떠 놓은 snapshot
Lexical Environment
- 변수, 매개변수, 인자, 함수 등의 정보를 모아둔 곳
- Environment recode, outer로 구성
1️⃣ Environment recode
실행되기 전에 모든 변수에 대한 정보들을 (ex. 어떤식으로 사용되는지, 어떤 값이 있는지) 수집하고 호이스팅에 대한 정보들을 가지고 있지만, 아직 할당에대한 정보는 없음
2️⃣ outer
외부 Lexical Environment를 참조하는 포인터로, 중첩된 자바스크립트 코드에서 스코프 탐색을 하기 위해 사용한다(스코프 체이닝).
ThisBinding
this의 식별자가 바라봐야 할 대상 객체
📗 hosting
변수 선언을 스코프의 최상단에 끌어 올리는 것
변수의 hosting
변수의 선언이 사용하는 코드 밑에 작성 되었지만 변수를 찾을 수 없다고 에러가 뜨는게 아닌 선언된 식별자의 이름과 값은 할당되었다고해도 undefined를 갖게 되는 것
함수의 hosting
함수선언식 (function declaration)
함수자체를 선언한 것
function 함수명() {
// 로직
}함수표현식 (function expression)
함수를 변수에 할당한 것
var 변수a = function() {
// 로직
}
var 변수b = function 함수명() {
// 로직
}
변수a();
변수b();
함수명(); // error변수b 함수는 기명 함수 표현식이라 함수명()으로는 내부에서만 접근할 수 있음
차이점
함수 선언식은 호이스팅에 영향을 받아 함수가 선언되기전에 실행을 시키더라도 작동을하게 되지만, 함수 표현식은 변수로 인식하여 호이스팅에 영향을 받지 않아 실행시키면
Uncaught TypeError: 함수명 is not a function란 에러가 뜬다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
🤔 let, const hosting 되지 않는다?
아니요! 할당되기 전까진 선언만 임시적 공간(TDZ)에 보관된다.
- Temporal Dead Zone(TDZ)
LexicalEnvironment에 모든 변수들을 다 모아두기 때문에 호이스팅은 되어있지만, 실행되게 전에 접근할 수 없고 이 단계를 TDZ라고 함
let과 const가 호이스팅 되었다고 말할 수 있는 이유는 값 먼저 할당되고 나중에 선언했을 때 에러가 x is not defined가 아닌 x에 접근할 수 없다고 나옴
📘 Scope
범수가 유효한 범위
-
전역 스코프
코드가 어디서든 참조가 가능한 범위
여기에서 전역이란 window를 뜻해 그 변수가 window의 프로퍼티로 사용된다.
(Node.js에선 global로 쓰임)
왠만하면 절대 쓰지 않지만 라이브러리는 어디서든 접근해야하닌깐 쓴다. -
지역 스코프
자바스크립트는 다른 언어와 달리 스코프 범위가 함수에 의해서만 생성된다.
주의할 점
let, const가 선언 되었을 때는 {}로 스코프 범위가 정해진다.
{}안에 var로 선언하였다면 외부에서도 접근이 가능하다.
📙 closure
함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 에서 사용되는 중요한 특성으로 자신이 생성되었을 때 환경을 기억하고 그것을 사용하는 함수
내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.
📓 this
바라보고 있는 객체인데
전역공간의 this는 window
어디있는지 상관이 없고 .앞에 있는 객체가 무엇인지에 따라 결정하게 된다.
.앞에 없다면 전역에 있는 변수를 가르치게 된다.
함수와 메서드 차이
메서드 그 전에 .이 있냐 없냐의 차이로 나눌 수 있다
call / apply
바라보는 객체를 정할 때 쓰는 것
- call : 첫 번째 인자는 this에 관한 것, 나머지는 요소로 넣어줌
- apply : 첫 번째 인자는 this에 관한 것, 나머지는 배열로 넣어줌
bind
call, apply와 같이 바로 호출하는게 아니라, 묶어 놓기만 함
arrow function에서는 무조건 this에 관한 내용을 정리해야한다.
