const, let, var에 대해 알아보자

햐얀하늘·2023년 11월 1일

Var

Var의 범위

전역 범위 or 함수 변위
함수 블록 외부에서 var를 사용해 선언된 모든 변수를 전체 윈도우상에서 사용가능
var가 함수 내에서 선언시 함수 내에서만 사용하고 접근 가능

var test = "test";
    
function newFunction() {
  var hello = "hello";
}

console.log(hello); // error: hello is not defined

hello는 함수 내에서만 사용가능하고 greeter는 전역 범위를 가지게된다.

함수 밖에서 hello를 찍어보면 함수 내부에서만 사용되기 때문에 정의되지 않았다는 에러가 발생

재선언과 업데이트

같은 범위 내에서는 똑같은 변수명으로 재선언이 가능하고 해당 변수값을 바꿔줄 수 있다.

var test = "var 선언";
var test = "var 재선언";


var test = "var 선언";
test = "var 업데이트";

호이스팅

변수와 함수 선언이 맨위로 이동되는 매커니즘

console.log (greeter);
var greeter = "say hello"

위의 코드는 자바스크립트에서 아래의 코드로 해석됨

var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"

greeter라는 변수가 먼저 선언되고 함수가 호출된다. 고로 변수 값은 나중에 저장되기 때문에 error가 발생

var의 문제점

var greeter = "hey hi";
var times = 4;

if (times > 3) {
    var greeter = "say Hello instead"; 
}

console.log(greeter) // "say Hello instead"

변수 greeter가 정의되어 있다는 것을 모를 시 값이 바뀌어버림 버그발생이 많음

Let

블록 범위 let

블록은 {}로 바인딩 된것이다. 하나의 블록은 중괄호 속에서 존재하고 중괄호 안에 있는 것은 모드 블록 범위이다.

let은 블록내에서만 사용이 가능하다

let greeting = "say Hi";
let times = 4;

if (times > 3) {
  let hello = "say Hello instead";
  console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not defined

중괄호 안에서 hello를 선언하고 중괄호 밖에서 출력하니 에러가 발생

Let은 재선언은 불가하지만 업데이트는 가능하다

let은 범위 내에서 다시 선언은 할 수 없지만 값 변경은 가능하다.

let greeting = "say Hi";
greeting = "say Hello instead"; // 값 업데이트 가능

let greeting = "say Hi";
let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 재선언 불가

만약 다른 블록 범위에서 재선언 된다면 에러 발생 X

let greeting = "say Hi";
if (true) {
  let greeting = "say Hello instead";
  console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

let의 호이스팅

let선언은 맨 위로 끌어올려진다. undefined로 초기화 되는 var와 달리 let의 키워드는 초기화되지 않는다. 선언 이전에 let 변수를 사용하려고 하면 에러가 발생한다.

const

블록 범위 const

let과 마찬가지로 블록 범위 내에서만 접근 가능하다.

const는 업데이트, 재선언이 불가능

재선언과 업데이트시 에러가 발생

const greeting = "say Hi";
greeting = "say Hello instead";// error: Assignment to constant variable. 

const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

단 객체의 경우에서는 객체의 업데이트는 불가능하나 객체의 속성은 업데이트 가능하다.

const greeting = {
  message: "say Hi",
  times: 4
}

greeting = {
  words: "Hello",
  number: "five"
} // error:  Assignment to constant variable.

greeting.message = "say Hello instead";

const의 호이스팅

let과 마찬가지로 const 선언도 맨 위로 끌어올려지나 초기화 되지 않음

var, const, let 총 정리

var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다.
var 변수는 범위 내에서 업데이트 및 재선언할 수 있다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다. const 변수는 업데이트와 재선언 둘 다 불가능하다.
세 가지 모두 최상위로 호이스팅된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고 let과 const 변수는 초기화되지 않는다.
var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야한다.

출처: https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/