[scope & closure] var / let / const

Call Stack

- excute context가 call stack에 쌓인다.

1) 최초로 생기는 excute context는 전역에서 접근할 수 있는 excute context라하여 => Global excute context

2) a function위해서 만들어진 것 => function excute context

브라우져 변수값 확인 우선 순위  1. Block > 2. Local  >  (3. closure : parent function)  4. Script > 5. Global

※ closure는 함수 안에 함수를 뜻하면 그 중 부모 함수를 뜻한다.

 

이중

생활코딩 (closure === O)

 

생활코딩 (closure === X)

 

따라서 JavaScript  === static Scope or Lexical Scope

 

 

 

참조

https://www.youtube.com/watch?v=bwwaSwf7vkE

 

function B within function A

- It's going to create new LOCAL scope individually(function B's Local scope/ function A's Local scope).

You can't call funcion A's argument value bc the current location is to be function B. You can only access local variables of function B when running function B.

 

when function done the whole scope reset even though loop

변수 Let는 어디에 위치해야 하는가?

  let startTime;
  let endTime;

$screen.addEventListener("click", (event) =>{

   if () { //조건 A가 성립할 경우
    ...declare...
    } else if ( ) { //조건 B가 성립할 경우
    ...declare...
    } else if ( ) { //조건 C가 성립할 경우
    ...declare...
    }
   }

click 이벤트를 통해서 조건 A, B, C 중 하나가 실행되면 조건에 맞는 선언문(declare)가 실행된다. 이때 선언문{ 선언문 안에 scope가 새롭게 생김 } 이 끝나고 addEventListener 종료되면 선언문 안에 있는 scope도 초기화 된다.

다시 말해, 여기서 첫번째 클릭과 두번째 클릭은 다른 시점의 function이 실행된 것.(함수는 한번 실행되면 { }안에 함수 즉 함수 안에 scope는 리셋됨)

여기서 중요 포인트는 let 을 선언문 안에 설정하지 않는 것이다.

그래야만 let startTime 과 let endTime의 변수를 addEventListener 밖에 해놔야만 값들이 계속 존재할 수 있다.

 

참조

https://www.youtube.com/watch?v=UxIvNw9_ap4&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=70

 

 

Excute Context

	(No arugment) A	var	let	const
without a function	Global	(anonymous) Global	Scirpt	Script
with a function	Global	Local	Local	Local
if, for, while, funciton etc { }	Global	Global	Block	Block

 

Scope

	var	let	const
Global Scope	YES	no	no
Script Scope	no	YES	YES
function local Scope	YES	YES	YES
Block Scope	no	YES	YES
재선언	YES	no	no
재할당	YES	YES	no

 

<scirpt>에서 선언 => Global & Local

 

 

Function 안에서 => Local Scope by Call Stack 'fn2()'

생활코딩

 

{ } block Scope

생활코딩

 

참조

https://www.youtube.com/watch?v=QtOF0uMBy7k

https://www.youtube.com/watch?v=61iolhWgQt0