변수 var, let , const 차이점 (호이스팅 중점설명)

목차

 

오늘은 변수와 호이스팅에 대해 알아볼 예정이다.

 

var는 이전부터 있어왔고, 

let/const는 ES6 업데이트 때 등장했다.

 

호이스팅에 대해 알아보기 전에 

"변수의 생성과정"부터 알아보자.

 

사진 출처: 코딩앙마

1. var는 선언과 초기화가 동시에 일어난다.

 

할당 전에, 호출해도 에러를 내지 않고 

undefined를 뱉는다.

 

아래에 호이스팅 동작원리를 이해하고,

예제를 살펴보자.

 

2. 자바스크립트 내부에서

호이스팅 실행순서

 

※ 호이스팅:
함수가 실행되기 전에,
함수 안의 변수들을 범위의 최상단으로 끌어올린다.

 

* (중요)

1. 코드가 실행되기 전에

"자바스크립트 엔진 등장"

 

2. 엔진이 "선언해둔 변수들을 파악"

→ 변수나 function 같은 것들을 미리 파악한다 

 

※ 선언해둔 변수와 함수를 파악해서
메모리에 기억해둔다.

 

3. 변수를 부를 때,

기억해두었던 것을 호출한다.

 

3. var 호이스팅 예제

정상적인 경우

 

apple이 선언되기 전에 apple을 사용한 사례

다른 언어에서는 "apple을 찾을 수 없음" 에러가 뜬다.

 

이유

첫번째 줄에서는 두번째 줄의 apple을 모르는 것이 정상이다.

(앞에 선언이 안되어 있으니까, apple이 누군지 모르는 상태)

4. 왜 에러를 안내고, undefined를 뱉나요?

 

BUT 자바스크립트에서는

undefined와 1을 뱉어낸다.

 

→ 호이스팅 때문이다.

WHY?

왜 undefined를 뱉나요?

 

1. 실행할때,

코드가 콘솔창에 출력되기 전에 

 

2. 엔진이 선언된 변수 apple을 확인한다.

(apple을 기억해둔다)

 

3. 다시 1번 줄로 돌아가서,

아까 a 기억해둔 것을 던져준다.

 

※ 그런데 1로 값을 할당하기 전이어서,

undefined만 딱 줘버린다.

 

4. 

1 할당한 것은 멀쩡하게 출력

설명

 

호이스팅할 때
"변수의 선언과 변수의 초기화를 같이 실행시켰다"

 

(변수 선언을 자기 멋대로 한 것, 초기화도 undefined로 멋대로 해버렸다)

 

할당 먼저 하고 (a =1)

선언 하기 (var a)

 

→ 이것도 역시 같은 결과 

 

var 호이스팅 예제 2

결과로 찍어보면,

어디서 호이스팅이 일어나는지 감이 잡힌다.

5. 헷갈리는 let의 선언과 초기화

 

let은 선언과 초기화가 따로 진행된다.

 

호이스팅되면서 선언 단계가 성립되지만,

초기화는 "실제 코드에 도달했을 때" 이뤄진다.

 

※ Referrence Error가 발생하는 이유 

6. Const

 

const는 선언과 할당이 동시에 되어야 합니다.

 

let, var는 선언해두고,

나중에 할당하는 것이 가능하다.

(애초에 값을 바꿀 수 있으므로, 할당을 다시 할 수도 있습니다.)

 

const만 에러가 납니다.

 

※ 선언과 동시에 할당해주지 않았기 때문이다.

 

동작하려면, 

const gender = 'male'; 로 해줘야 한다.

 

7. 스코프, 전역변수, 지역변수 개념

 

 

block scope :

let, const

"코드블록 내에서 선언된 변수는, block 내에서만 유효하다."

(기본적으로 외부에서 접근할 수 없다)

함수, if문, for문 ..

 

※ if문 블록 안에서, var로 선언한 것은 밖에서도 사용가능

(var는 블록스코프가 아니니까)

function scope:

var

 

함수 내부에서 선언된 변수만 지역변수가 된다.

 

※ var도 유일하게 함수 내에서는 벗어날 수 없다.

 

1. 전역변수

블럭 밖에서 어디서든 쓰일 수 있는 변수

 

2. 지역변수

블럭 안에서 (어떤 범위 안에서) 선언된 변수.

그 지역에서만 살아갈 수 있다.

→ 지역을 벗어나게 되면 에러를 일으킨다.

 

 

8-1. var와 function scope

 

함수 밖에서 콘솔로그 출력이 되지 않는다.

→ 범위 밖이니까, 에러 메시지 출력

8-2. var와 block scope

 

※ var는 함수만 지역변수로 호이스팅되고,

나머지 for문/if문 같은 것들은 전역변수로 올려 버린다.

 

function과 다르게, 무사히 출력된다.

 

9. TDZ (Temperal Dead Zone)

TDZ 영역에 있는 변수들은 사용할 수 없다.

 

let은 호이스팅되지 않는다?

let과 const 도 호이스팅이 된다.

 

호이스팅 되지 않았다면,

함수 바깥의 age 30은 정상 출력되어야 한다.

 

결론

"let과 const를 사용하자."

 

에러메시지를 출력하기 때문에

예측 가능한 코드를 만들고

버그를 줄일 수 있다.

 

※ 호이스팅
스코프 내부 어디서든 

변수 선언이 맨 위에 선언된 것처럼 행동하는 것.

 

출처:

1. 코딩 알려주는 누나

2. 코딩앙마