프론트엔드 (Front-End)/자바스크립트 ( Javascript )

<Javascript> var, let, const 차이점

xxvigrufv 2022. 7. 27. 10:09
반응형

자바스크립트에서 변수를 선언하는 종류에는 3가지가 있다. 

 

이것은 항상 다시 찾아보게 된다.

까먹지 않게 기록하여 보자.

 


1. var

 

var은 변수 선언으로 단점이 존재한다.

 

var carName = 'volvo';
console.log(carName);

var carName = 'hyundal';
console.log(carName);

---------------------------
volvo
hyundal

변수를 재선언 하였더니 에러가 나오지 않고 각기 다른 값이 출력된다.

코드량이 많아 진다면 사용 위치를 파악하기 힘들뿐더러 값이 변경될 위험이 있다.

 

요새는 var 선언을 잘 사용하지 않는다.

 


2.const & let

 

ES6 이후, var을 보안하기 위해 새로운 변수 선언 방식이 추가되었다.

 

const carName = 'volvo';
console.log(carName);

const carName = 'hyundal';
console.log(carName);

----------------------------------
VM428:4 Uncaught SyntaxError: Identifier 'carName' has already been declared

 

변수를 재선언 하였더니 'carName'은 이미 선언되었다고 에러가 나온다.

 

그 결과는 변수 재선언이 되지 않는다.

 

let carName = 'volvo';
console.log(carName);

let carName = 'hyundal';
console.log(carName);

-----------------------------------------------------
VM428:4 Uncaught SyntaxError: Identifier 'carName' has already been declared

 let  또한 마찬가지로 변수를 재선언 하였더니 이미 선언되었다고 에러가 나온다.

(변수 재선언이 되지 않는다.)

 

여기서 또 하나 !! 

 

호이스팅이 있다. 

호이스팅이란 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

 

let carName = 'volvo';
console.log(carName);

carName = 'kia';
console.log(carName);

-----------------------
volvo
kia

※ let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.


<Res>

재선언이 필요하지 않은 변수 선은 const 를 이용하고  재할당이 필요할 경우 let 을 이용한다. 

가급적 var은 이용하지 않는것을 추천한다.

반응형