[ js ] var,let, const

그룹스터디 🦆 팀 러버덕과 함께!

목차
1.var
2.let
3.const
4.호이스팅의 차이
5.스코프의 차이
6.정리

1. var

<var의 특징>
1.var는 중복선언 ⭕️
2.변수 재할당 ⭕️
3.함수레벨 스코프
4.호이스팅

재할당 가능)

var a= "나는 a!"
a ="사과!";
console.log(a); // 사과

중복선언)

var a= "나는 a!"
var a ="나는 두번째 a!";
console.log(a); // 나는 두번째 a! 

👎 중복선언을해도 에러가 나지않아서 개발자가 나중에 모르고 다시 또 중복선언을해서 값을 할당하게 되면 원치않은 결과를 초래할 수 있다.
let,const는 var를 보완하고자 나온 개념들이다.

2.let

<let의 특징>
1.변수 중복 선언 ❌
2.변수 재할당 ⭕️
3.블록레벨 스코프
4.호이스팅

중복선언)

let a= "나는 a!"
let a ="나는 두번째 a!";
console.log(a); // ⛔️ Uncaught SyntaxError: Identifier 'a' has already been declared

재할당 가능)

let a= "나는 a!"
a ="나는 두번째 a!";
console.log(a); // "나는 두번째 a!"

3.const

<const의 특징>
1.변수 중복 선언 ❌
2.변수 재할당 ❌
3.선언동시에 초기화
4.상수개념
5.블록레벨 스코프
6.호이스팅

중복선언)

const a= "나는 a!"
const a ="나는 두번째 a!";
console.log(a); // ⛔️ Uncaught SyntaxError: Identifier 'a' has already been declared 

재할당)

const a= "나는 a!"
const a ="나는 두번째 a!";
console.log(a); //⛔️ Uncaught TypeError: Assignment to constant variable.

+) const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다. 하지만 객체의 참조값을 할당하면 변경이 가능하다. 변수에 객체의 힙 메모리 주소가 저장되므로 힙 메모리 주소가 변경되지 않는다면 객체 내부의 값이나 배열은 수정이 가능하다.

🍀 객체
const obj = {
 color:"red"
}
obj.color="blue";
console.log(obj); // {color: 'blue'}
🍀 배열
const arr= [1,2,3,4,5]
arr[2]=0;
console.log(arr); // [1,2,0,4,5]

선언동시에 초기화)
선언한 동시에 값도 같이 할당해야한다.

const a; //⛔️ Uncaught SyntaxError: Missing initializer in const declaration
const a =2; ⭕️

상수개념)

상수란 한 번 선언되면 다시 선언되거나 할당될 수 없는걸 뜻하는데,
즉, let은 재할당가능으로 값 변경이 되지만 const는 상수의 의미로 변하지 않는 값을 말한다.

4.호이스팅 차이

호이스팅이란 모든 선언문(변수,함수,클래스)들이 코드 최상위로 끌어지는 듯한 효과를 말하는데,
코드실행하기전 모든 선언문들이 메모리에 할당되어져서 변수,함수를 선언하기도 전에 참조할 수 있는 것을 말한다.

var과 let,const 호이스팅은 다르다.

let,const)

console.log(a); // ⛔️ Uncaught ReferenceError: Cannot access 'a' before initialization
let a =2;
(const를 해도 똑같은 에러가 난다.)

var)

console.log(a) ; // undefined
var a=2;

let,const는 var과 달리 선언하기전에 값을 참조하면 에러가 난다.
그럼 let,const는 호이스팅이 안되는걸까?
변수의 생성 단계를 보면,

1️⃣ 선언 단계

2️⃣ 초기화 단계

3️⃣ 할당 단계

var)- 선언하면서 동시에 초기화

 
console.log(a);// undefined
var a= 2;

🍀 var는 런타임전에 이미 a의 메모리 확보하면서 값으로 undefined로 할당되다. 즉, 선언하기도 전에 a를 참조할 수 있다.

let,const)- 선언과 초기화 분리

console.log(a); // ⛔️ Uncaught ReferenceError: Cannot access 'a' before initialization
let a =2;
(+const)

let과 const에 ReferenceError가 뜬 이유는,
일시적 사각 지대가 있기때문이다.
일시적 사각 시대는 선언 단계와 초기화 단계사이로, 참조할 수 없는 곳이다. js엔진이 a를 참조할때는 일시적 사각 지대에 있다. 그래서 ReferenceError가 뜬다.
즉, 초기화하기전에 값을 참조하려하면 ReferenceError가 뜬다.
일시적 사각 지대가 존재함으로써, 예측가능하게하고 잠재적 오류를 줄일 수 있다.

5. 스코프의 차이

var는 함수레벨 스코프
let,const는 블록레벨 스코프이다.

함수 레벨 스코프)
var는 오로지 함수 코드 블록만을 지역 스코프로 인정한다.
코드 블록 내에서 선언해도 모두 전역변수가 된다.

{
  var a =2;
}
console.log(a); //2

function apple(){
 var fruite = "banna";
 }
 console.log(fruite); //⛔️ Uncaught ReferenceError: fruite is not defined

블록스코프)
let,const키워드는 모든 코드 블록({ })들을 지역 스코프로 인정한다.

{
  const a =2;
}
console.log(a); //⛔️ Uncaught ReferenceError: a is not defined

따라서 { }블럭스코프안에 let,const변수를 사용하면 외부에서 접근하지 못하고 안전하게 정보를 숨길 수 있지만 var변수를 사용하면 그대로 노출된다.

6. 정리

변수를 사용할때 var는 대체로 사용하지 말고 주로 const를 사용해 값이 바뀌지 않도록 안전성을 주는것이 좋고 값이 바껴야될 필요가 있다면 let을 최소한 사용하는 것이 좋다.