변수에는 let, const, var가 있다
let과 const는 es6부터 새로 생긴 것임
그러면 이 세 가지의 차이는 무엇일까?
var name = "hana";
console.log(name); // hana
var name = "james";
console.log(name); // james위의 예시에서 name에 hana라는 값이 할당되어 있는데
밑에서 다시 james라는 값으로 다시 선언을 했고 콘솔로 찍어보면 오류없이 james로 나오는 것을 볼 수 있다
그래서 var는 한번 선언된 변수를 다시 선언할 수 있다
또한 var는 선언하기 전에 사용할 수 있다
예를 들면 다음과 같다
console.log(name); // undefined
var name = "hana"선언을 콘솔 아래에다 했는데 에러가 아니라 undefined라는 값이 나왔다
왜 에러가 안 나는 것일까?
var name;
console.log(name); // undefined
name = "hana"var로 선언한 변수가 마치 최상단에 끌어올려진 것처럼 동작하기 때문이다
이를 호이스팅이라고 한다
요약하자면 호이스팅은 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것이다
그러면 let과 const는 어떨까?
let name = "hana";
console.log(name); // hana
let name = "james";
console.log(name);
<!--Uncaught SyntaxError: Identifier 'name' has already been declared 식별자 name이 이미 선언되어 있다는 에러가 뜸-->
const baby = "Rey";
console.log(baby); // Rey
const baby = "Jerry";
console.log(baby);
<!--Uncaught SyntaxError: Identifier 'baby' has already been declared 식별자 baby가 이미 선언되어 있다는 에러가 뜸-->let과 const는 한번 선언된 변수를 다시 선언할 수 없다
console.log(name); // 에러에러
let name = "hana"또한 선언하기 전에 사용할 수 없다(호이스팅X)
사실 호이스팅 되긴 되는데 안 되는 것 처럼 보일 뿐이다
바로 TDZ(Temporal Dead Zone) 때문이다
//--TDZ--///
console.log(name)
//-- TDZ--///
const name = "haha" // 함수 선언 및 할당
console.log(name) // 사용 가능TDZ영역에 있는 변수들은 사용할 수 없다
위의 예시에서 보면 console.log(name)가 있는 곳이 TDZ에 속한다
let과 const는 이 TDZ에 영향을 받는데 할당을 하기 전에는 사용을 할 수 없다
-> 이는 버그를 줄이고 코드를 예측가능하게 해준다
변수의 생성과정
1. 선언 단계
2. 초기화 단계
3. 할당 단계
var
- 선언 및 초기화 단계(초기화: undefined를 할당해주는 단계)- 할당 단계
let(선언과 초기화 단계가 분리되어 적용)
- 선언 단계- 초기화 단계
- 할당 단계
호이스팅 되면서 선언 단계가 이루어지지만 초기화 단계는 실제 코드에 도달했을 때 되기 때문에 레퍼런스 에러가 남
const
- 선언+초기화+할당
let baby;
baby = "Rey"; // name = Rey
var age;
age = 3; // age = 30
const gender;
gender = 'male'// 에러가 남스코프
var : 함수 스코프(function-scoped)
let, const : 블록 스코프(block-scoped)
블록 스코프는 모든 코드블록에서 선언된 코드는 블록 안에서만 유효하며 외부에서는
접근할 수 없다는 의미이다
즉, 코드블록(ex: 함수, if, for, while, try/catch 등) 내에서 선언한 변수는 지역변수다
코드블록 예시를 들면 다음과 같다
function add() {
//Block-level scope
}
if(){
//Block-level scope
}
for(let i = 0; i < 10; i++){
//Block-level scope
}
```javascript
const age = 30;
if(age > 19){
var txt = '성인';
}
console.log(txt); // 성인위의 예시에서 if문 안에 var변수는 if문 바깥에서도 사용할 수 있지만
var가 let이나 const였다면 if문 안에 있는 중괄호 내에서만 사용이 가능하다 이것을 블록 스코프라고 한다
function add(num1, num2){
var result = num1 + num2;
}
add(2,3);
console.log(result); // 에러에러함수 스코프는 '함수' 내에서 선언된 변수만 그 지역변수가 되는 것이다
위의 예시에서 함수 안에 있는 var를 외부에서 사용할 수 없으므로 레퍼런스 에러가 난다
var가 유일하게 벗어날 수 없는 스코프가 함수라고 생각하면 편하다
