[변수] Hoisting, 전역변수

📌 Hoisting이란?

변수/함수의 선언 부분을 스코프의 최상단으로 끌어 올려 해석하는 자바스크립트의 성질

• Hoisting 예

<script>
console.log(name) // undefined
var name = 'kim'
console.log(name) // 'kim' 출력
</script>

• 자바스크립트의 시점

<script>
var name;
console.log(name) // undefined
name = 'kim'
console.log(name) // 'kim' 출력
</script>

👀 코드의 1행에서 아직 name변수가 선언되지 않았음에도 undefined가 뜬다.

c.f. Undefined vs null

• undefined : 변수 선언 O, 할당 X
• null : 변수 선언 X, 할당 O (빈값)

📌 변수의 참조(closuer)

안쪽에서 바깥쪽 지역 변수를 가져다 쓸 수 있음

📌 전역변수란

한 지역에 국한되지 않고, 전체 범위에서 사용할 수 있는 변수를 뜻한다.

📌 전역변수의 선언

1. script태그 내 가장 외곽에 선언한다.

<script>
  var variable = 'a' // 이 변수는 모든 함수, 메서드에서 참조 가능하다.
</script>

2. window.변수명

전역객체인 window에 직접 변수를 선언한다.
더 선호되는 방식이다 (직관적으로 전역변수임을 알 수 있음)

<script>
  window.나이 = 20;  //전역변수만들기
  console.log(window.나이);  //전역변수사용하기
  window.나이 = 30;  //전역변수변경하기
</script>

📌전역변수 사용 시 주의할 점

✔️ 비동기코드의 콜백함수에는 전역변수 X

👀 오작동 예 1

    for (var i = 0; i < 3; i++) {
      버튼들[i].addEventListener('click', function () {
        모달창들[i].style.display = 'block';
      });
    }

👀 오작동 예 2

for (var i = 0; i < 5; i++){
  console.log(i)
  setTimeout(function(){ console.log(i) }, i * 1000)
}

반복문에 var 사용했더니 작동하지 않는다

✔️ 왜 작동하지 않을까?

JavaScript는 비동기처리되는 코드(실행하는데 시간 걸리는 코드. ajax, EvntListner...)
를 만나면 대기실로 보내고 다른 것부터 읽어들인다.

위 코드에서 setTimeout을 만났을 때 일단 대기실로 보낸 후, 반복문을 모두 돌린다. 반복문 종료 후, 전역변수로 반복문의 가장 마지막 인덱스인 5가 저장되어있다. 이후 setTimeout이 동작한다

✔️ 해결방법

반복문 인덱스 변수로 let을 사용해 변수 참조 범위를 한정지어준다.

for (let i = 0; i < 5; i++){
  console.log(i)
  setTimeout(function(){ console.log(i) }, i * 1000)
}

👀 의도대로 콘솔에 1초마다 1부터 5까지 출력된다.