Hoisting, 전역변수

Hoisting

: 자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다.

예를들어

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

이런 함수가 있다고 하면

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

JavaScript는 이렇게 읽는다.

그러면

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

</script>

이거는 어떻게될까
실행결과

undefined
kim

왜냐하면 읽히는 순서가

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

이러기 때문이다.

전역변수와 지역변수

바깥에 있는 변수는 안쪽에서도 자유롭게 사용가능한데
이를 "참조가능하다" 라고하고 자바스크립트에서는 closure라고 한다.

var 나이 = 20;

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

함수();

실행결과

20

이렇게 함수 안쪽 { }에서 바깥쪽에 있는 나이라는 변수를 사용할 수 있다는 것이다.

이렇게 모든 if나 for 내부에서 공통적으로 참조할 수 있는 변수를 전역변수라고 하는데

그냥 script를 열고 제일 바깥에 변수를 선언하면 된다.

<script>
  var 나이 = 20;

	function 함수() {
  		console.log(나이);
	}
</script>

이렇게 선언하면 밑에 나오는 모든 함수, for, if 등에서 나이라는 변수를 참조 가능하다.

그런데 var 키워드로 전역변수를 만들면 window에도 보관이 되는데

<script>
  var 나이 = 20;

	function 함수() {
  		console.log(나이);
  		console.log(window.나이);
	}
</script>

window.전역변수 이름 으로 사용해도된다.

그래서 전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면

<script>
  window.나이 = 20; // 전역변수 선언
  console.log(window.나이); // 전역변수 사용
  window.나이 = 30; // 전역변수 변경
</script>

이런식으로 가능하다.

반대로 지역변수는

function 함수(){
    let a = 10;
    console.log(a);
};
함수();
console.log(a);

실행 결과

10
Uncaught ReferenceError: a is not defined

a는 함수 안에서만 참조 가능한 변수이고
함수 바깥에서는 정의 되지 않은 값이다.

참고

let이라는 변수는 hoisting되지만 var 변수처럼 자동으로 undefined 라는 값을 할당
(initiallization)해주지 않는다.

선언과 할당 사이에 시간차가 있기 때문에 그런 현상이 일어나는 것이고
let, const 변수는 엄격하게 쓸 수 있는 변수구나~ 라고 이해하면 된다.

undefined와 null의 차이점

정의
undefined : 변수의 값이 할당되지 않았다는 뜻
null : 변수의 값이 명시적으로나 의도적으로 없음을 나타내는 값

쉽게 설명하면
undefined는 값이 할당되지 않은 것이고
null은 "값이 없음" 이라는 것을 할당한 것이다.