Hoisting 현상

자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어난다.
자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다.

function 함수(){
  
  console.log('hello');
  var 이름 = 'Kim';
  
}

이렇게 함수 내에서 변수를 만들었다고 친다면

자바스크립트가 이 코드를 해석하는 순서는 이렇게 된다.

function 함수(){

  var 이름; 
  console.log('hello');
  이름 = 'Kim';
  
}

변수의 선언 부분을 강제로 변수의 범위 맨 위로 끌고가서 해석하고 지나간다.

우리 눈에 보이진 않지만 자바스크립트는 코드 동작 순서가 이렇다.

이게 Hoisting 현상이다.

함수를 만들어도 똑같고, 변수를 let, const로 만들어도 똑같다.

<script>
  
  console.log(이름); ///undefined
  var 이름 = 'Kim';
  console.log(이름); ///kim

</script>

전역변수와 변수의 참조

바깥에 있는 변수는 안쪽에서 자유롭게 사용가능하다.

이걸 전문 개발자용어로 참조가능하다 라고 하며 자바스크립트에서는 이 현상을 부르는 다른 말이 있다

closure라고한다

var 나이 = 20;

function 함수(){
  console.log(나이)
}

함수(); ///20

지금 함수(){} 안쪽에서 바깥쪽에 있는 나이라는 변수를 가져다 쓸 수 있다.

함수(){} 안쪽에 나이라는 변수 정의가 있으면 그걸 쓰겠지만

없으면 자연스럽게 바깥에 있는 변수를 가져다 쓴다. (참조한다)

프로그래밍에선 전역변수라는게 있다.

모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 유용한 변수를 뜻한다

window

window는 자바스크립트 기본함수 보관하는 큰 오브젝트

alert, getElementById, console.log 이런 함수들이 다 들어있다.

alert이런것도 window에 보관된 애들이기 때문에 window.alert('안녕') 이렇게 해도 나온다

이게 window 오브젝트의 역할이다. 끝!

쌩으로 전역변수를 만들면 window에도 보관이 된다.
(let말고 var 키워드)

<script>
  var 나이 = 20;

  console.log(나이);
  console.log(window.나이);
</script>

나이라는 전역변수를 만들면

자동으로 window 오브젝트에 보관이 되었으니까

신기하게 window.나이를 써도 출력이 된다.

(전역함수도 마찬가지로 window에 자동으로 보관된다
)