ES6 이전에는 변수를 선언하는 유일한 키워드가 var 이었다.
ES6 에서는 두 가지 방법이 추가되었다.
1. const
constant는 값을 변경할 수 없는 상수이다.
따라서 상수에 값을 재설정하는 것은 불가하다.
const test = true
test = false // error
const는 변경하면 안되는 값이나 함수, 객체 선언에 주로 사용된다.
함수 예)
const func = function() {
console.log("const")
}
...
// error
func = function() {
}
이미 정의된 함수를 실수로 재정의하게 되는 경우를 막기 위함이다.
객체 예)
const menu = {
"name": "pizza",
"price": 10000
}
menu.price = 15000
간혹 menu.price 값을 변경하면 에러가 발생해야 하지 않냐는 의문을 가지기도 한다.
menu는 객체로, 객체의 주소를 저장하고 있기 때문에 menu를 재정의하는 것이 불가한 것이지 menu 안의 속성값을 변경하는 것은 가능하다.
2. let
자바스크립트에서 변수 선언에 사용되었던 var는 변수의 영역이 블록 안으로만 한정되지 않는다.
(다른 언어를 사용하다가 자바스크립트를 공부하면서 제일 신기하고 어려웠던 것이 이런 점이었다..)
var title = "자바스크립트"
if (title) {
var title = "리액트"
console.log(title) // 리액트
}
console.log(title) // 리액트
title 값을 if 블록 안, 밖으로 찍어보면 모두 리액트가 출력된다.
따라서 잘못 사용하게 되면 글로벌 변수의 값을 실수로 바꾸게 될 수 있다는 단점이 있다.
이런 단점때문에 자바스크립트는 let 키워드를 사용해 렉시컬 스코프를 지원하게 되었다.
let은 범위를 블록 안으로 한정시킨다.
let title = "자바스크립트"
if (title) {
let title = "리액트"
console.log(title) // 리액트
}
console.log(title) // 자바스크립트
하지만 동일한 이름의 변수를 사용함에도 에러가 나지 않고 잘 작동되는 것은 아직 적응이 안된다..^-^
'Web > JavaScript' 카테고리의 다른 글
[JavaScript / ES6] 디폴트 파라미터 (0) | 2019.10.12 |
---|---|
[JavaScript / ES6] 템플릿 문자열 (0) | 2019.10.12 |
[JavaScript] 객체 (0) | 2019.08.09 |
[JavaScript] 콜백 함수 (0) | 2019.08.08 |
[JavaScript] 오버로딩 (0) | 2019.08.08 |