[JavaScript] 변수의 종류에 따른 재 선언 , 재 할당 그리고 호이스팅을 예제로 알아보기

🤔 변수란?

데이터를 저장하는 그릇으로써

선언과 할당을 통하여 값을 변수에 저장한다.

 

변수는 언어마다 여러 타입과 종류 들이 있으며 각각의 특성을 가진다.

 

 📙 자바스크립트 변수의 종류

• var 는 재 선언 ,재 할당이 가능 하며 , 호이스팅이 일어난다.
• let 은 재 선언은 불가능 하며 재 할당은 가능하고, 호이스팅이 일어나지 않는다.
• const 는 재 선언 , 재 할당 전부 불가능하고, 호이스팅이 일어나지 않는다.

 

❓ 재 선언과 재 할당이 가능하다는게 무엇일까

자바스크립트는 실행 시 인터프리터 라는 프로그램을 사용하여 실행하며,

실행 시 문서의 코드를 한 줄씩 읽어들여 실행하는것이다.

 

위에서 부터 아래까지 순서대로 한 줄씩 읽기때문에 선언과 호출을 어느 위치에서 하였는지에 대한 제약이 생긴다.

 

 

🔹변수들의 특징을 예제로 알아보기

재 선언 재 할당 확인

 

var

//재 선언
//에러 발생 x
var x = 100; 
var x = 200; 

//재 할당
//에러 발생 x
var y = 100; 
y = 200;

 

let

 

//재 선언
//에러 발생 o
let x = 100; 
let x = 200; 


//재 할당
//에러 발생 x
let y = 100; 
y = 200;

 

const

//재 선언
//에러 발생 o
const x = 100; 
const x = 200; 


//재 할당
//에러 발생 o
const y = 100; 
y = 200;

---

호이스팅 확인 

 

🤔 그 전에 호이스팅이란?

자바스크립트는 인터프리터 라는 프로그램을 통해 코드를 한 줄씩 읽어 들이며 실행한다.

인터프리터를 통해 분석 단계와 실행 단계의 순서로 실행된다.

 

👉 분석 단계란? 

• 변수와 함수를 쭉 확인한 후 메모리에 로딩 한다.이러한 처리를 실행 하는 것이 인터프리터 이다.
• 따라서 실행 단계로 들어간 시점에서는 이미 변수와 함수를 인식하고 있다.

하지만 이러한 현상은 많은 문제가 있다.

 

이미 존재를 전부 인식하고 있기 때문에 순서대로 실행되는 실행 단계에서

아직 선언되기 전의 변수나 함수를 호출하여도 출력이 된다.

 

다만 에러 없이 출력은 가능하나 undefined 로 출력된다.

 

그렇게 된다면 에러는 없는데 값은 안 나오기 때문에 에러를 찾기도 힘들 뿐 더러

불편한 점이 굉장히 많다.

 

이러한 점을 보완하여 나온 Type이 let 과 const 이다.

 

let 과 const 호이스팅이 불가능 하며,

선언 되기 이전에 변수를 호출할 경우 실행 오류가 발생하게 된다.

 

실행은 되나 해당 라인에서 에러가 발생한다.

 

 

var 

alert(check);
var check = 10;

👉 실행은 되나 undifined 출력

 

❓ 원인

var 는 호이스팅이 가능한 변수로 분석 단계에서 이미 check라는 이름의 값이 메모리에 저장되어있고

호이스팅은 실행 단계에서 선언 전인 변수를 호출을 하였어도 이미 변수의 존재를 인식 하고있기때문에 에러가 발생하지않는다. 

 

다만 분석 단계에서는 선언만을 저장하기때문에 값까지 같이 저장되진 않기 때문에 값을 출력할 경우

undefined 가 출력된다.

 

 

let / const 

alert(check);
let check = 10;

//and 

alert(check);
const check = 10;

 

⚠️ 에러 발생

 

 

❓ 원인

에러 발생 원인은 초기화 되지않은 변수에는 접근을 할수 없기 때문에 발생한 것이다.

let 과 const 는 호이스팅이 일어나지 않는 변수로 분석단계에서 인식 되었어도 

 

코드의 순서 상 선언 이전에 접근을 하게 될 경우 에러가 발생하게된다.