220925_TIL

오늘 한 일

• 호이스팅, 전역변수 등

---

자바스크립트 변수, 함수의 Hoisting 현상

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

예를 들면

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

이 코드의 결과 값은 콘솔창에 첫째로는 undefined가 출력되고 둘째로는 Kim이 출력된다. 왜냐면 Hoisting 때문에

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

이런 순서로 코드가 실행되기 때문. undefined라는건 변수가 선언은 되었는데 값을 아무것도 할당하지 않았을 때 undefined가 출력된다. 일종의 자료형같은 것인데 그냥 정해지지않은 값이라고 생각하면 됨. 하지만 let, const 변수의 경우 Hoisting이 일어나긴 하는데 약간 이상한 방식으로 일어난다.

• 전역변수

변수는 이런 특징이 있다. 바깥에 있는 변수는 안쪽에서 자유롭게 사용가능 이걸 전문 개발자용어로 참조가능하다 라고 하는데 자바스크립트에서는 이 현상을 부르는 다른 말이 있다. = closure

안쪽 바깥쪽이 뭔지 예를 들자면

var 나이 = 20;

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

함수();

지금 함수(){} 안쪽에서 바깥쪽에 있는 나이라는 변수를 가져다 쓸 수 있다. 함수(){} 안쪽에 나이라는 변수 정의가 있으면 그걸 쓰겠지만 없으면 자연스럽게 바깥에 있는 변수를 가져다 씀. (참조)

프로그래밍에선 전역변수라는게 있다. 모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 유용한 변수를 뜻하는데 전역변수를 만들어 쓰고싶으면 그냥 script태그 열고 다짜고짜 변수하나 만들어주면 된다.

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

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

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

나이라는 전역변수를 만들면 자동으로 window 오브젝트에 보관이 되었으니까 신기하게 window.나이를 써도 출력이 된다. (전역함수도 마찬가지로 window에 자동으로 보관됨)

그래서 전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면 전역변수를 만들 때와 사용할 때 window를 활용하는게 좋다.

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