var, let, const의 차이

Heejin Kim·2022년 1월 21일
0
post-custom-banner

1. 변수 재선언 가능

var를 사용하면 변수 선언 시 할당되는 값이 유동적으로 변경될 수 있다.

var name = "Tom";
console.log(name);

var name = "Juila";
console.log(name);

>>output: "Tom"
>>output: "Juila"

하지만 letconst는 변수 재선언이 불가능하다.

  • let
let name = "Tom";
console.log(name); 

let name = "Juila";
console.log(name);

>>output: Identifier 'name' has already been declared
  • const
const name = "Tom";
console.log(name); 

const name = "Juila";
console.log(name);

>>output: Identifier 'name' has already been declared



2. 변수 재할당 가능

let은 변수에 재할당이 가능하다.

let name = 'Tom' // output: Tom
let name = 'Julia' // output: Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'Kevin' // output: Kevin

반면에 const는 재할당이 불가능하다.

let name = 'Tom' // output: Tom
let name = 'Julia' // output: Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'Kevin' // output: Uncaught TypeError:Assignment to constant variable.



3. 변수의 스코프

var는 기본적으로 function scope를 가지게되고
let, const는 block scope를 가지게된다.


  • var
var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

함수가 아닌 곳에서 a를 선언했기 때문에 전역 변수로 취급한다.
a 변수가 중복 선언되면서, 최하단의 console에서도 출력 값이 5로 바뀐 것을 확인할 수 있다.

var str = "This is String.";
if(typeof str === 'string'){
  var result = true;
} else {
  var result = false;
}

console.log(result);    // result : true

오로지 함수만을 지역 스코프로 인정하므로 (함수 레벨 스코프), 함수가 아닌 곳(if 문)에서 선언했기 때문에 전역 변수로 인정(공유)된다.


  • let, const
let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

let으로 선언한 경우 if문 코드블록 안에 있는 것은 지역 스코프를 가지므로 (블록 레벨 스코프), console을 찍었을 경우 전역에 있는 a가 결과 값으로 출력된다. const도 마찬가지.

var str = "This is String.";

if(typeof str === 'string'){
  const result = true;
} else {
  const result = false;
}

console.log(result);    // result : result is not defined

let, const는 모든 코드블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.




4. 정리

기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장한다. 따라서, var 키워드 보다는 let과 const 키워드를 사용하며, 변경하지 않는 값(상수)이라면 let 보다는 const 키워드를 사용하는 것이 안전하다.

varletconst
스코프함수레벨(넓음)블록레벨(좁음)블록레벨(좁음)
이중선언가능불가능불가능
이중할당가능가능불가능
특징재할당 발생위험가변수할당상수할당
post-custom-banner

0개의 댓글