📝 TypeScript
-
JavaScript보다 더 많은 문법을 사용
-
정적 타입 언어(static type language)이기 때문에 컴파일 시간이 조금 걸리더라도 안정성을 보장
📂 ES6
-
ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어
-
뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시
📂 ES6 문법
📍 1. let, const 키워드
-
블로스코프를 가지고 재선언 불가, 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가
-
기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다
🔊 호이스팅(hoisting)
- 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상
- 선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 현상
- 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다.
-
자바스크립트의 모든 선언에는 호이스팅이 일어나는데, let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작
-
let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생
-
var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장되는데 let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문
(초기화 되지 않으면 변수를 참조할 수 없다. 그래서 참조 에러)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <script> var study = "JavaScript"; if(study) { var study = "react"; console.log("공부하자",study); } console.log("재밌다",study); </script> <body></body> </html>
- 결과
- 🔎 var 변수의 스코프: 기본적으로 함수 영역에서는 전부 적용 (if문, while문의 스코프는 적용 안되고 호이스팅의 대상이 된다)
- 🔎 let을 사용하면 변수 스코프를 if 코드 블록 안으로 한정시킬수 있다.
개발 연습장