1. 같은 이름의 중복 생성이 된다.
위와 같이 name 변수에 "정의철"을 선언하고,
뒤에 똑같은 이름의 변수명인 name에 "김수민"을 선언했는데 아무 문제없이 초기화되었다.
출력도 문제없이 되는걸 확인할 수 있다. 이로 인해 기존에 선언했던 변수가 덮어쓰기가 되어
값이 지워지는 상황이 발생하게 된다.
하지만 let 자료형으로 같은 변수명을 선언했을 경우, 필드에서 빨간 밑줄로 문제가 있다고 알려주고,
실행할 경우에도 출력창에도 오류가 뜬다.
2. Hoisting
**Hoisting이란?**
-Hoisting이란, js에서 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 할당되는 동작이다.
변수나 함수의 선언이 코드의 최상단으로 끌어올려지는것처럼 동작한다.
다음과 같이 var 자료형으로 name1을 초기화할 경우,
선언 후에 작성된 코드에서는 정상적으로 출력을 하지만,
선언 전에 작성된 코드에서는 undefined를 출력한다.
'name1'이라는 이름의 변수는 코드의 최상단에 위치하는것처럼 메모리에 먼저 저장된다.
하지만 "jiwon"은 원래의 위치에서 초기화가 되기 때문에 undefined로 출력한다.
이로 인해, 개발자가 작성한 의도와는 다르게 코드가 실행되거나 오류가 실행될 수 있다.
똑같이 let 자료형으로 초기화 전과, 후에 출력을 했다.
그 결과, 다음과 같이 출력창에서 오류를 띄운다. let 자료형도 호이스팅은 되지만,
TDZ로 인해 변수나 상수를 선언 전에는 접근할 수 없다.
이렇게 되면 초기화 전 접근을 방지할 수 있어서 버그를 예방하는 데 도움이 된다.
3. Scope
다음과 같이 i를 var 자료형을 통해 1000으로 초기화 해주고,
for문에서 또다시 i를 선언하고 출력했다.
그 결과, 다음과 같이 반복문을 통해 0~9까지 출력을 하고 ,
마지막에 1000이었던 i가 반복문을 통해 i값이 10으로 초기화된 것을 확인할 수 있다.
만약 함수 외부에서 var로 변수를 선언하면, 그 변수는 전체함수에서 유효하고 블록 내에서는 구분되지 않는다. 이로 인해 예기치 않은 결과가 발생할 수 있다.
같은 방식으로 j를 let 자료형으로 1000을 초기화 하고,
똑같이 반복문에서 j를 선언하고 값을 출력했다.
그 결과, 반복문을 통해 0~9까지 출력을 하고 ,
기존에 초기화값이었던 1000이 여전히 정상적으로 출력되는 모습을 확인할 수 있다.
이와 같이 let 자료형은 반복문에서 다시 변수선언을 할 경우,
반복문 내에서 새로운 스코프를 구축해 필드의 변수와 구분 할 수 있다.