[JS] Scope chaning

// 생활코딩님의 영상 내용을 정리하며 복습합니다. https://www.youtube.com/watch?v=QtOF0uMBy7k

 

 

오늘은 스코프 체이닝에 대해 알아보겠습니다.

 

 

 

위 사진은 개발자도구에서 소스탭에서 확인할 수 있는 요소들 중에 scope와 callStack 입니다.

 

간단하게 callStack은 디버그 중단점을 통해 위치를 파악한, 현재 진행되고 있는 줄이 속한 함수명이 출력됩니다.

 

다시말해 위 사진에서는 fn1함수 내에서 디버그를 출력하고 있다고 생각하시면 됩니다.

 

중요한건 scope입니다.

 

js에서는 변수명, var, let, const를 통해 변수를 선언할 수 있습니다.

 

각각 저장되는 scope의 위치가 다릅니다. 이것이 포인트인데

 

먼저 함수 밖에서 변수명만 썼을때 ex) num0 = "num0" 이 경우에는 Global에 저장됩니다.

 

Global은 수많은 변수와 매서드가 담겨있는 윈도우 객체입니다. global 안에 num0: "num0"가 생성되는 것입니다.

 

var의 경우도 마찬가지입니다. var num1 = "num1"이라 저장하면 global스코프에 num1: "num1"이 저장됩니다.

 

let과 const의 경우에는 script에 저장됩니다.

 

Global의 경우 어디서든지 접근이 가능하기 때문에 scope의 제약에서 자유로운 편입니다.

 

하지만 script와 local의 경우 함수내에서만 스코프가 작동하기 때문에

 

함수내 에서 선언한 변수, 함수는 해당 함수 외부에서 찾을 수 없고, 외부에서 찾으면 참조에러가 발생하게 됩니다.