const, let, var 차이점

eslint_0123·2022년 11월 7일

javascript

목록 보기
1/8
post-thumbnail

const, let, var는 javascript에서 변수를 선언할때 쓰인다.
그러면 여기서 변수란 무엇인가?

데이터를 저장할 메모리 공간 혹은 공간의 주소를 식별하기 위해서 사용되는 것이 변수이다.

javascript는 managed언어라고 할 수 있는데 managed 언어의 의미는 특정 런타임 환경 내에서 프로그램을 생성하도록 설계한 언어이다.
javascript는 js 엔진이 VM(Virtual Machine)의 역할을 수행한다.
VM(Virtual Machine)의 역할: 보안, 메모리 관리 등..

javascript es6가 나오기 전에는 var만 있었다.
이후 const와 let이 나왔다.

java에서도 변수를 만들때 선언하고 초기화를 하는데, javascript도 그 과정이 필요하다.

선언: javascript엔진에 변수 존재를 알린다.
초기화: 해당 변수의 메모리 공간을 확보한다.

여기서 알아야 할 개념이 호이스팅(hoisting)이다.

호이스팅이란?
js 엔진이 변수나 함수에게 선언하기 전에 메모리 공간을 주는 것

여기서 var키워드는 선언과 초기화를 런타임 이전에 수행하여

console.log(a);
//undefined 이렇게 나오는 이유는, 호이스팅을 통해 undefined로 초기화만 시키고 런타임에서 할당하기 때문
var a=2;

이런식으로도 출력이 가능하다.
원래는 a=2가 할당하는 것인데 이 과정은 런타임에 실행된다.

하지만 let은 선언과 초기화가 동시에 이루어지지 않는다.

let a //호이스팅으로 런타임 이전에 수행
a=3;
console.log(a); //정상적인 js엔진 실행과정에 의해 실행(런타임)
console.log(a); //메모리 공간은 있는데 let는 var 처럼 undefined로 초기화를 하지 않아서 에러
let a = 3;
//ReferenceError (참조 에러)

함수 호이스팅 추가 공부 필요

호이스팅을 알았으면 var let const의 차이점을 알기 위해 scope도 알아야 한다.

스코프란?

식별자의 유효 범위

  • 전역 스코프 : 전역에 선언된 변수가 갖는 범위
  • 지역 스코프 : 지역에 선언된 변수가 갖는 범위

지역 스코프를 만들 수 있는 애들은?
-> 코드 블록(if, for, while, try/catch 등) = 블록 레벨 스코프

여기서 var는 함수의 코드 블록만을 지역 스코프로 인정
함수가 만든 코드블록 = 함수 레벨 스코프
이게 var를 쓰면 안좋은 점 중 하나
이유는 코드의 규모가 커질수록 동일한 변수이름을 가질 수 있는데 var가 위와같이 처리하면 오류가 생길 확률이 커진다.

let, const

let
중복 선언 x
중복 할당 o
블록 레벨 스코프 따름

let은 선언과 초기화가 따로 이루어진다.
따라서 호이스팅으로 인해서 선언은 되었지만 런타임 이전까지 초기화가 되지 않기 때문에 일시적 사각지대(Temporal Dead Zone: TDZ)가 존재하게된다.


const (상수 - 변하지 않는 값)
중복 선언 x
중복 할당 x
블록 레벨 스코프 따름

const는 선언과 초기화가 동시에 이루어진다
-> 런타임 이전에 실행될 수 없다. 따라서 log를 먼저 찍으면 output: Uncaught ReferenceError: Cannot access 'name' before initialization에러가 뜬다.

변수 선언과 할당이 동시에 이루어져야 함

profile
Frontend 개발자 이예슬입니다.

2개의 댓글

comment-user-thumbnail
2022년 11월 7일

프사가 바뀌었네요

1개의 답글