var-let-const의 차이를 보기 전에
이 세 가지 변수들의 차이를 보기전에, Hoisting과 Scope을 정리한 글을 보고오길 바란다.
Hoisting에 대한 글 : https://philipbox.tistory.com/42?category=867101
Scope에 대한 글 : https://philipbox.tistory.com/43?category=867101
var let const를 비교할 때 몇가지 키워드로 알아보도록 하겠다.
- 변수 값의 변환
- 변수의 유효범위
1. 변수 값의 변환
기존의 Javascript를 사용하면서 가장 문제가 있다고 느낀점은 변수 선언의 방식이였다.
var를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고있다.
아래 코드를 보자
var name = "Philip"; console.log(name); var name = "Jihwan"; console.log(name); output: Philip output: Jihwan | cs |
다음과 같이 name이라는 변수를 중복(2번) 선언했는데도 불구하고 에러가 나오지않고 각기 다른 값이 출력되는걸 볼 수 있다.
하지만 ES6 업데이트 이후로 추가된 변수 선언 방식인 let과 const는 var와 같은 선언 방식을 막고있다.
let name = "Philip"; console.log(name); let name = "Jihwan"; console.log(name); output: Identifier 'name' has already been declared | cs |
위와 같이 let을 사용했을 경우에는 name이 이미 선언되었다는 에러 메시지가 나오는걸 볼 수 있다.
위에 코드에는 let만 케이스로 집어넣었지만 const도 마찬가지로 변수 재할당이 안된다는 특징을 가지고있다.
그럼 let과 const는 어떤 차이가 있을까?
let과 const의 차이점은 변수의 immutable여부이다.
let은 변수에 재할당이 가능하지만,
const는 변수 재선언, 재할당 모두 불가능하다.
아래 코드를 보자.
let
// let let testCase = 'let' // output: let let testCase = 'let2' // output: Uncaught SyntaxError: Identifier 'testCase' has already been declared testCase = 'let3' // output: let3 | cs |
const
const testCase = 'const' // output: const const testCase = 'const2' // output: Uncaught SyntaxError: Identifier 'testCase' has already been declared testCase = 'const3' // output: Uncaught TypeError:Assignment to constant variable. | cs |
위와같이 var let const 각각의 차이는 명확하다.
2. 변수의 유효범위
먼저 var는 기본적으로 function scope를 가지게되고
let, const는 block scope를 가지게된다.
var
var str = "This is String."; if(typeof str === 'string'){ var result = true; } else { var result = false; } console.log(result); // result : true | cs |
let, 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 | cs |
'개발 언어 > Javascript' 카테고리의 다른 글
Javascript #5 (Scope) (0) | 2019.12.11 |
---|---|
Javascript #4 (Hoisting) (0) | 2019.12.11 |
Javascript #3 (alert, console) (0) | 2019.12.11 |
Javascript #2 (ECMAScript, Vanilla JS) (0) | 2019.12.11 |
Javascript #1 (Javascript) (0) | 2019.12.11 |