day18, 19_var/let/const, 데이터타입, 호이스팅, var말고 let을 쓰자

*블록스코프 : {} if, for, function 등
 함수스코프 : 블록스코프 중 함수 범위 갖는 스코프.  함수 몸체에 선언한 변수는 해당 함수 안에서만 접근 가능

1) var    : 함수스코프 - 변수 같은 이름으로 재선언 가능(단점)
2) let     : 블록스코프 - 변수 같은 이름으로 재선언 불가
             값 수정 가능(우리가 알고 있는 일반 자바변수와 같음)
3) const : 블록스코프 - 변수 같은 이름으로 재선언 불가
             값 수정 불가(상수와 같음)
             선언시 값 대입 필수

function loop() {
	for(var i = 0; i < 5; i++) {
		console.log(i);
	}
	console.log('final',i);
}
loop();
/*
	0
	1
	2
	3
	4
	final 5
*/

• 이 코드를 보면, for문 안에서 변수 i를 var 키워드로 초기화 해줬다.
• 이 경우에는 블록 스코프가 아닌 함수 스코프를 따르게 되는데, for문 안쪽과 바깥 쪽에서 모두 변수 i에 접근해서 console.log를 하고 있다.
• 이 때는 어차피 loop이라는 함수 스코프 안에 둘 모두 존재하기 때문에 문제 없이 for문 안이든 밖이든 문제없이 i에 접근해서 값을 출력한다.

function  loop() { 
	for (let i = 0; i < 5; i++) { 
		console.log(i); 
	} 
	console.log('final', i); 
} 
loop(); /* ReferenceError: i is not defined */

• 반면 for문 내에서 i를 let으로 선언할 경우에는 달라진다.
• let으로 선언한 순간, 변수i는 for문 내에서만 종속되며, for문 외부에서는 i에 접근할 수가 없다.
• 스코프가 다르기 때문이다.

 

.

.

.

4. 데이터 타입

1) 숫자형 Number
정수 10진수/16진수 실수 
2) 문자형 String
양끝을 쌍따옴표로 묶은 형태(홑따옴표도 가능. 쌍따옴표랑 구분x)
3) 논리형 Bollean
t/f값 갖는 형태
4) undefined
- 변수를 선언만 하고 초기화하지 않은 상태 = 값이 없는 상태
- 함수 인자값 없이 호출되는 경우
- 존재하지 않는 프로퍼티에 접근한 경우

.

.

.

호이스팅의 장점이 뭔데? -> 호이스팅으로 인한 혼란을 조심하기 위해 호이스팅에 대해 알아야 한다.

 

var로 선언된 변수는
[선언 - 초기화 - 할당] 의 단계 중
[선언 - 초기화]가 한번에 이루어지고 다음에 [할당]이 되게 된다.

1. [선언 - 초기화]
2. [할당]

그에 반해 let/const 키워드는 다르게 실행된다.
선언, 초기화, 할당이 따로 이루어지고 TDZ(Temporal Dead Zone)라는 것이 개입한다.

과정은 아래와 같다.

1. [선언]
2. [TDZ]
3. [초기화]
4. [할당]

초기화(변수가 메모리에 할당되며 undefined로 초기화되는 과정)가 되기 전에 변수에 접근하려 한다면 TDZ에 의해서 ReferenceError가 발생하게 된다.

var a;
console.log(a);
a = 10;

let a;
console.log(a);
a = 10;

위처럼 호이스팅 된 코드를 보면 변수에 접근하는 데 있어
기존 var 키워드는 선언과 초기화가 함께 되었으므로 접근하여도 정상적으로 undefined가 출력된다.
하지만 let/const 키워드는 선언만 호이스팅 되고 그것은 초기화 이전이므로 접근하려 한다면 TDZ에 의해서 에러가 발생하는 것이라고 볼 수 있다.

 

 

 

 

reference : https://junhobaik.github.io/js-let-cont-hoisting/

ES6, Hoisting으로 다시 보는 let, const