JS Scope & JS Hoisting (w3schools)

JS Scope

[지역변수 Local JavaScript Variables]

- 지역변수는 그 함수 내에서만 인식되고, 다른 함수 내에서 같은 이름의 변수가 사용될 수 있음!
- 지역변수는 함수가 시작될 때 생성되고, 함수가 끝나면 삭제됨.

 

지역변수 carName

 

[전역변수 Global JavaScript Variables]

- 함수 밖에 선언된 변수는 "전역"이 됨.

- 전역변수는 "전역범위"를 가짐-> 모든 스크립트와 함수들은 그것에 접근할 수 있음.

전역변수 carName

 

[자바스크립트 변수]

- 자바스크립트에서 오브젝트(object)와 함수(function) 또한 변수임.

- 범위(scope): 코드의 다른 부분들에서 변수 ,오브젝트, 함수의 접근을 결정함.

 

[자동으로 전역 Automatically Global]
- 만약 선언되지 않은 변수에 값을 할당하면, 그것은 자동으로 "전역"변수가 됨.

- 아래 코드는 비록 값(value)이 함수 내에 할당되었을지라도, 전역변수 carName을 선언함.

 

- var을 안 쓰고 변수명만 썼음 -> 선언되지 않은 변수.

- Strict Mode에서는 선언되지 않은 변수는 자동으로 전역화되지 않음.

 

[자바스크립트 변수들의 생성주기]

- 자바스크립트 변수들의 생성주기는 그것이 선언될 때 시작함.

- 지역변수는 함수가 끝날 때 삭제됨.

- 웹 브라우저에서, 전역변수는 브라우저창(탭)을 닫을 때, 삭제됨. 

 

JS Hoisting

- 선언을 맨 위로 이동하는 자바스크립트의 기본 동작.

 

[자바스크립트의 선언은 호이스트됨. JavaScript Declarations are Hoisted]

 

- 변수는 그것이 사용된 후에 선언될 수 있음.

- 다시 말해, 변수는 그것이 선언되기 전에 사용될 수 있음.

- 예시1과 예시2는 같은 결과가 나옴.

- 이 예시를 이해하려면, "호이스팅(hoisting)"이라는 용어를 이해해야만 함.

- 호이스팅은 모든 선언들을 현재 범위(scope)의 맨 위로 움직이는 자바스크립트의 기본 동작.

(현재 스크립트나 현재 함수의 맨 위)

 

[The let and const Keywords]

- let과 const로 정의된 변수들은 블럭의 맨 위에 호이스팅 되지만, 초기화 된 것은 아님.

- 뜻: 코드의 블럭은 변수를 알고 있지만, 그것이 선언되기 전까지는 그것은 사용될 수 없음.

- let 변수가 선언되기 전에 사용하면 Reference Error가 남.

let 변수

- const 변수를 선언되기 전에 사용하는 것은 문법적 에러고, 그 코드는 동작하지 않음.

const 변수

 

[자바스크립트 초기화는 호이스트 되지 않음. JavaScript Initializations are Not Hoisted]

- 호이스트는 오직 선언만!!

 

[Declare Your Variables At the Top !]

- 버그들을 피하기 위해, 모든 scope의 시작지점에 항상 모든 변수들을 선언해라!

- 이것이 자바스크립트가 코드를 해석하는 방법이니깐, 이렇게 하는 게 good rule.