자바스크립트 Hoisting, 전역변수, 참조

2023.03.27 - [Front end/JavaScript] - 자바스크립트 var, let, const 차이점 (1)

자바스크립트 var, let, const 차이점 (1)

위 포스팅에서 이어서 작성합니다.

 

 

 

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

자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어난다.

자바스크립트는  변수나 함수의 선언부분을 최상단으로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다.

 

 

변수 Hoisting 예제 

function 함수() {
  console.log('hello');
  var name = '강동욱';
}

함수 내에 name이라는 변수를 만들었다.

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

 

function 함수() {
  var name;
  console.log('hello');
  name = '강동욱';
}

변수의 선언부분을 변수의 범위(스코프) 최상단으로 끌고가서 해석한다. 

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

 

 

변수 Hoisting 예제 

console.log(age); // undefined
var age = 30;
console.log(age); // 30

변수가 선언부가 최상단으로 올라가고 해석하니까 첫번째로 나오는 console.log(age)는 undefined가 출력된다. 

왜냐하면 var는 Hoisting이 될때 변수의 선언부분만 최상단으로 이동하고 자동으로 undefined가 할당된다.

let, const는 특이하게도 Hoisting이 되긴 하지만 undefined라는 값이 할당되지 않는다.

 

 

함수 Hoisting 예제

hello() // hello

function hello () {
  console.log('hello');
}

함수도 함수 선언 자체가 최상단으로 올라간다.

 

함수표현식은 Hoisting이 안된다. 왜냐하면 함수표현식도 결국은 변수에 함수를 집어넣는것이다.

hello() // 에러

var hello = function () {
  console.log('hello');
}

 

 

 

(참고) 변수 여러개 편리하게 만들기

var name='강동욱', age=20, gender='Male';

 

 

 

 

전역변수와 변수의 참조

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

이걸 "참조가능하다" 라고 말한다.

하지만 자바스크립트에서는 이 현상을 부르는 다른 말이 있다. closure라고 한다.

var age = 20;
function 함수(){
  console.log(age)
}

함수(); // 20

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

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

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

 

 

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

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

 

 

전역변수를 만드는 첫번재 방법. 가장 바깥쪽에 변수를 만든다.

var age = 20;

function 함수(){
  console.log(age);
}

함수(); // 20

if(true) {
  console.log(age); // 20
}

for(let i=0; i<5; i++) {
  console.log(age); // 20이 5번 출력된다.
}

위 예제에서 함수, if, for 내부에서 공통적으로 사용할 수 있는걸 볼 수 있다.

var 키워드로 전역변수를 만들면 window라는 객체에 보관된다.(let은 보관안됨)

 

window에 대해 궁금하다면 2023.03.27 - [Front end/JavaScript] - 자바스크립트 this (1) 이 포스팅을 읽어보면 좋습니다.

 

 

전역변수를 만드는 두번째 방법. window로 전역변수 만들기

window.age = 20;

function 함수(){
  console.log(age);
}

함수(); // 20

if(true) {
  console.log(age); // 20
}

for(let i=0; i<5; i++) {
  console.log(age); // 20이 5번 출력된다.
}

 

 

 

🌈 정리 

- 변수나 함수를 선언하면 Hoisting 현상이 일어난다.

- 바깥에 있는 변수는 안쪽에서 자유롭게 사용가능하다. 참조가능하다. 이걸 자바스크립트에서는 클로저라고 한다.

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

- 전역변수를 만드는 방법은 2가지가 있다. 가장 바깥에 변수를 선언하는 방법과 window로 만드는 방법이다.

- 전역변수를 만들면 window라는 객체에 보관된다.

- window로 만들면 명시적으로 전역변수같은 느낌을 준다. 전역변수를 만들때는 window를 이용하자.

- var 는 호이스팅이 되면서 undefined를 할당하는 반면에 let, const는 undefined라는 값이 할당되지 않는다.

- 함수선언문은 호이스팅이 되지만, 함수표현식은 변수의 선언 부분만 호이스팅이 된다.