호이스팅과 TDZ

스코프 = "변수가 영향을 미치는 범위"

​

호이스팅 = "스코프 내부 어디서든 변수 선언은 최상위에 미리 선언되는 것"

*선언만 될 뿐, 실제로 값이 할당되는 않는다.

​

위의 호이스팅 방식에서 var, let, const 이 3개의 변수선언 코드는 차이점을 가진다.

​

 

	var	let	const
1단계	변수 선언 + 초기화(undefined)	선언	선언+초기화+할당
2단계	value 할당	초기화(undefined)
3단계		할당

 

 

위의 표와 같이, 단계별로 작동되는 방식이 다르다.

그렇기에 아래와 같이 코드를 사용할 때 나타나는 값이 다르게 된다.

​

console.log(name)
var name = "a"
//undefined

console.log(name1)
let name1 = "a"
//error

console.log(name2)
const name2="a"
//error

 

 

위의 코드를 살펴보면 var로 선언한 변수는 초기화(undefined)가 잘 작동되고있음을 알 수 있다.

​

그렇다면, let과 const는 호이스팅이 되는 데 왜 에러가 발생하는 것일까?

그것은 TDZ라는 것 때문이다. 이것을 풀어서 쓰면 Temporary Dead Zone 이다. 나는 일시적으로 죽은 구역이라고 연상했다.

​

TDZ의 영향을 받는 구문들은 변수선언이 되기전에 호출이 되면, 그것을 지역스코프 내에서 금지시킨다.

​

그렇다면 그것말고도 차이점이 있을까?

​

가지고 있는 지역스코프가 다르다. 스코프는 말 그대로 변수가 영향을 미치는 범위이다. 그러나 이 범위가 var, const, let 구문마다 다르다는 것을 알아야 한다.

​

 

 

스코프는 블록스코프와 함수스코프로 나뉜다.

 

 

블록스코프는 말그대로 블록으로 나뉘는 구역 안을 뜻한다.

함수스코프는 블록 스코프 중 function의 블록 범위를 갖는 스코프를 말합니다.

​

여기서 var만이 함수스코프를 가지고, const와 let은 블록스코프를 가지게 됩니다.

따라서 var는 오로지 함수의 영역을 지역 스코프로 인식하기 때문에 그 외 모든 블록에서는 일괄적으로 적용됩니다.

또한 같은 function이기만 하면 if나 for 안에서 선언된 변수를 밖에서 사용하는 것도 가능합니다.

​

​

스코프를 이해했다면, 실행 컨텍스트와 콜 스택으로 넘어가보자

 

 

 

자바스크립트가 실행되면 전역컨텍스트가 자동으로 실행된다.

그 다음으로 함수와 같은 컨텍스트가 작동함과 동시에 전역컨텍스트는 종료된다. 자바스크립트가 싱글 스레드이기 때문에 동시에 2가지를 할 수 없기 때문이다. 따라서 우리의 컨텍스트는 하나가 시작되면 하나가 종료됨을 반복하면서 실행된다.

그리고 이것들은 블록을 쌓는 것 처럼 위로 쌓이기 시작한다. 그렇게 쌓인 것을 콜 스택이라고 부른다.

콜스택은 출입구가 하나뿐인 우물과도 같아서 지워지는 순서는 역순으로 지워진다. 결국 가장 마지막에 남아있는 스택은 전역 실행컨텍스트이다.

 

 

 

자바스크립트가 실행되었을 때, 어떠한 일들이 일어날까?

 

 

 

전역 컨테스트 생성 -> 함수마다 컨텍스트 생성 -> 컨텍스트 변수객체(argument,variable),스코프체인,this 생성 -> 함수실행이 끝나면 컨텍스트 아웃 -> 페이지종료되면 전역컨텍스트 아웃

​

​

스코프체인은 체인과 같이 연결된 스코프의 생태계를 연상했다.

이러한 생태계는 안쪽 스코프에서부터 바깥으로 변수를 검색해나간다.

(여기서 주의할 점은 외부스코프에서 내부스코프를 참조하는 것은 일반적으로 불가능하다.)

​

외부에서 내부를 참조하는 것이 불가능하기 때문에, 외부의 개입을 현저히 줄일 수 있다. 이것을 통해, 변수를 은닉화한다(?)

​

​

 

 

---

처음에는 열심히 설명하는 느낌으로 잘 적어보려 했으나, 아직 완벽히 이해를 못한 것인지 그냥 혼잣말하듯이 혼자만 알아볼 수 있게 작성한 것 같다. 오늘이 지나고, 다시 천천히 개념을 정립해야겠다.

​

이것또한 https://www.youtube.com/watch?v=L8OvfMfIWa0

 

위의 영상에 들어있는 리스트강의를 들어보면 이해가 훨씬 빠를 것 같다.