JavaScript의 변수
- 변수는 모든 언어가 그렇듯, 데이터를 저장할 때 이름을 붙은 저장소를 말한다.
- 변수의 이름을 정할때, 자바스크립트에만의 몇가지 규칙이 있다.
변수 규칙 알아보기
- 변수명에 영어,숫자,한자, 한글, 특수문자(일부만)다 사용 가능하다.
- 자바의 경우는 왠만해선 안되지만 자바스크립트는 왠만해선 다되는 편
- 하지만 변수명의 첫시작 글자는 숫자가 오면 안된다.(애초에 에러가 남)
- 영어 대문자도 가능하지만, 보통 변수의 시작은 소문자로 시작한다.
- 띄어쓰기도 안된다.(띄어쓰기이후 나올 영문을 대문자로 바꿔 표기하는 카멜방식으로 쓴다.)
- 그리고 선언하는 키워드는 var와 let이 있지만, let을 사용한다.
let is disallowed as a lexically bound name
- 변수를 선언할때, 사용하면 안되는 예약어들이 존재한다.
- 여기서 예약어란, javascript가 특정 목적을 위해 미리 예약된 단어나 키워드를 말한다.
- ex) const, var, await등
- 그래서 보통 아래와 같이 예약어를 변수명으로 사용하게되면
Uncaught SyntaxError: Unexpected token 'class'라는 에러가 뜬다.- 해석하자면 "'class'라는 단어(토큰)에서 예기치못한 에러가 발생했다." 이다.
- 해석하자면 "'class'라는 단어(토큰)에서 예기치못한 에러가 발생했다." 이다.
- 하지만,
let은let is disallowed as a lexically bound name이라는 에러가 나온다.- 해석하자면, "let은 변수명으로 허용되지않는다"라는 것인데, 🤔 대체 왜 이런 에러가 나는 것일까?
에러가 다른 이유
-
답은
var let = 1;이라고 코드를 쳐보면 나온다.- 아래를 보면
var let = 1;은 에러 없이 잘 실행된다.
그 이유는
let이라는 문법이 ES6 이후로 추가된 문법이기 때문이다.
그래서 사실let은 예약어가 아니다. 뒤늦게 추가되었기 때문에 위와같이 다른 에러로 처리를 한 것이다
- 아래를 보면
-
🧐 그럼 왜? 예약어로 추가하지않고 새로 추가했을까?
- 이것의 이유는 간단하다. 이미 많은 사람들이 사용하고있는 JS에 새로운 문법을 추가하는 것보다 기존의 있는 문법을 변경하는것이 매우~어렵고 불가능하기 때문이다.
- 기존의 문법을 바꾸게 된다면 JS로 표현한 웹페이지들은 모두 변경되게되어 잠재적 버그가 일어날수도 있고 그만큼 안정적이지 못한 언어로 된다는 것이다.
-
🧐그럼 왜 굳이 var가 있는데 let를 추가했을까?🤔
var가 있는데 let이 추가된 이유
-
이유는 간단하다. 문제가 있어서 보완하기위해 추가된 것!
- 그럼 그문제를 var와 비교하면서 알아보자!
1. 함수 스코프와 호이스팅
var는 호이스팅(hoisting)이 일어나기 때문에 변수를 선언하기 전에도 사용할 수 있으며, 함수 스코프를 가지기 때문에 의도하지 않은 변수의 전역화 현상이 발생할 수 있다.- 이에 비해
let은 호이스팅이 발생하지 않고,변수의 범위를 더 명확하게 제어할 수 있는 점에서 차이가 난다.
코드실행
코드내용
// 코드예시 1: 함수 스코프와 호이스팅
console.log(x); // undefined
var x = 10;
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined
let y = 20;
console.log(y); // 202.변수 재선언
let은 변수 재선언을 허용하지 않습니다.var는 같은 이름의 변수를 중복해서 선언할 수 있는 반면,let은 중복된 변수 선언 시SyntaxError를 발생시킨다.- 이로써, 이름 충돌로 인한 문제 방지가 가능하다.
코드실행
코드내용
// 코드예시 2: 변수 재선언
var a = 30;
var a = 40; // 재선언이 가능
console.log(a); // 40
let b = 50;
let b = 60; // SyntaxError: Identifier 'b' has already been declared
console.log(b);3.블록 스코프
var키워드로 선언된 변수는 함수 스코프를 가지며, 함수 내에서 선언된 변수는 해당 함수 전체에서 접근할 수 있다.(전역변수가 되어 버린다.)- 하지만
let은 블록 스코프 변수로 변수가 선언된 블록({}) 내에서만 유효하며, 블록 외부에서는 접근할 수 없어, 제어하기 좋아졌다.
코드실행
코드내용
// 예시 3: 블록 스코프
function varExample() {
var x = 70;
if (true) {
var x = 80; // 외부에서 선언한 x와 같은 변수
console.log(x); // 80
}
console.log(x); // 80
}
varExample();
function letExample() {
let y = 90;
if (true) {
let y = 100; // 블록 내에서만 유효한 새로운 변수
console.log(y); // 100
}
console.log(y); // 90
}
letExample();
이러한 이유로 let이 ES6에 추가가 되었고, 위와 같은 에러가 나는 것이다!
참고자료
한단계씩 올라가는 개발자