📙ES6 문법공부
📌변수
변수는 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용한다.
✨const, let
앞선 키워드를 붙이지 않고 변수를 만든다면, 같은 스코프 내에서 변수명이 유일하다는 보장이 있을까? 여러 개발자와 함께 큰 프로젝트를 진행할 때, 다른 개발자가 동일한 변수명으로 변수를 만들게 되면 마지막으로 선언된 변수로 덮어 써지는 위험이 있다.
💡동일한 변수명으로 재선언 막기 위한 let, const
const 또는 let으로 선언된 변수는 동일한 변수명으로 다시 선언할 수 없다.
💡Let과 const 차이점
let은 한번 선언 후에 다른 값으로 바꿀 수 있다.
반면에, const는 절대로 바뀌지 않는 상수를 입력할 때 사용한다.
즉, 재할당이 불가능하다. 그리고, 대문자로 선언해서 상수임을 알려줄 수 있다.
💡변수 선언시 Tip!
모든 변수를 일단 const로 선언하고, 나중에 변경될 여지가 있는 변수들만 let로 바꿔주면 된다.
- 변수는 문자와 숫자, $와 _만 사용한다.
- 첫글자는 숫자가 될 수 없다.
- 예약어(대표적인 예시로 class)는 사용할 수 없다.
- 가급적 상수는 대문자로 알려주자.
- 변수명은 읽기 쉽고, 이해할 수 있게 선언하자.
✨var
var는 한번 선언된 변수를 다시 선언할 수 있다.
📌호이스팅
✨호이스팅이란
스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
📌TDZ(Temporal Dead Zone)
✨TDZ란
TDZ 영역에 있는 변수들은 사용할 수 없다. 이를 통해, 코드를 예측 가능하게 하고 잠재적 버그를 줄일 수 있다.
💡TDZ의 영향을 받는 let과 const
let과 const가 TDZ의 영향을 받는다. 즉 할당을 하기 전에는 사용할 수 없다.
💡TDZ 예시
호이스팅은 스코프 단위로 일어난다. 따라서, 함수 내에서 let으로 선언한 age 변수가 호이스팅을 일으켜 showAge()함수 내 최상위에 선언된 것처럼 행동한다. 이때, 실제 코드에 도달하지 않아 age라는 변수는 초기화되지 않았으므로 사용할 수 없다. 그리고, 결과적으로 ReferenceError가 뜨게 된다.
✨변수의 생성과정
- 선언 단계
- 초기화 단계
- 할당 단계
💡var 변수의 생성과정
var는 선언과 초기화가 동시에 된다. 초기화란 변수가 메모리에 할당되었고 스코프 안에서 사용할 수 있는 상태가 되었다는 것을 말한다. 초기화 단계에서 undefined가 기본적으로 설정된다. 따라서, var는 선언하기 전에 사용할 수 있다.
- 선언 및 초기화 단계
- 할당 단계
💡let 변수의 생성과정
선언 단계와 초기화 단계가 분리되어서 변수가 생성된다. 호이스팅이 되면서 선언 단계가 이뤄지지만, 초기화 단계는 실제 코드에 도달했을 때 되기 때문에 ReferenceError가 뜬다.
- 선언 단계
- 초기화 단계
- 할당 단계
호이스팅은 변수 선언과 함수 선언이 스코프의 최상위로 끌어올려진 것처럼 동작하는 것이지, 실제로 코드가 물리적으로 위로 올라간 것이 아니다. 따라서, 아래 코드에서는 실제 코드 let = a에 도달 했기에 선언 단계를 거치고, 곧바로 초기화가 이뤄졌다.
💡const 변수의 생성과정
선언과 할당이 동시에 된다. 선언과 동시에 할당하지 않으면 SyntaxError가 뜬다.
- 선언 + 초기화 + 할당
📌스코프
✨var 스코프
함수 스코프 (function-scoped)
함수 스코프란 함수 내에서 선언된 변수만 지역변수가 된다.
var는 함수 스코프이기 때문에, 외부에서 if문 안에 있는 변수 txt에 접근할 수 있다.
✨let, const 스코프
블록 스코프 (block-scoped)
블록 스코프란 모든 코드 블럭에서 선언된 변수는 코드 블록 내에서만 유효하며, 외부에서는 참조할 수 없다. 코드 블록 내에서 선언한 변수는 지역변수다. 코드 블록에는 함수, if 문, for 문, while 문, try/catch 문 등이 있다.
