본문 바로가기
HTML, CSS, Javascript

javascript 변수 선언시 var, let, const의 차이 간단 요약

by Davidev 2022. 7. 29.
반응형

 


 

저는 자바스크립트는 변수를 선언할 때,

 

var를 주로 사용하는데

 

 let 과 const는 무엇인지,

 

어떤 차이가 있는 것인지 간단 정리 해볼게요!

 


 

var


변수 선언시 사용하는 키워드




변수에 값을 자유롭게 할당할 수 있다. (중복, 재할당 가능!)

 

 

 

But, 아래와 같이 3가지 문제가 있다고 합니다!

 

 

1. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.

 

2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.

 

3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

 

 


 

 

그리하여 ES6(ECMA Script)부터 나오게 된 키워드가

 

바로  let 과 const 입니다!

 

let 은 똑같은 변수 이름으로 여러번 선언하는 것이 불가능해졌습니다!

 

그러나 *재할당은 가능하도록 만들어졌습니다.

 

재할당 : 변수에 값을 다시 넣어주는 것(: 초기화 또는 할당) 

 

let name = '홍길동'
console.log(name); // 홍길동


let name = '고길동' // Uncaught SyntaxError 발생


name = '둘리'
console.log(name); // 둘리

 

 


 

 

Const 는  let 보다 더 제약이 큽니다!

 

변수의 선언-초기화 과정을 반드시 동시에 진행해야 하며, 

 

단어의 뜻(상수)처럼 변하지 않는 값(변수)을  담게끔 되어있지요.

 

단, 값이 객체인 경우는 가능합니다.

 

const name; // 변수의 선언 >>> : Uncaught SyntaxError 발생

const name = '도우너'; // 변수의 선언과 초기화를 동시에 해줍니다.

name = '마이콜'; // 이미 초기화된 변수에 값 재할당시 Uncaught TypeError



'객체인 경우'

const name = { animal : '또치', };

name.animal = '공룡';

console.log(name); // { animal : "공룡"}

 

 


 

 

위에서 살펴본 선언- 초기화 사용시 개념과 더불어

 

const 와 let 

 

 

실제 코드 내에서 함수, if, for, while, try/catch문 내에서 사용할 시

 

'지역변수' 로써 작동하므로 해당 블록 외부에서는 사용할 수 없게 됩니다.

 

*참조용어 : 블록 레벨 스코프

 

 

 

 

 

 

 

 

 

자, 그러면 이제 대충 감이 오셨지요?

 

ES6부터는 무조건 var를 사용하기보다는 

 

const 와 let 의 이용을 권장하므로 표준을 잘 따라가는 개발자가 되도록 노력합시다!!

 

 

 

참고 : https://www.howdy-mj.me/javascript/var-let-const/

 

 

오늘도 굿데이 :)

 


 

반응형

댓글