[JS] JavaScript 정리하기 (1) - 변수와 식별자

자바스크립트의 변수와 식별자, 변수선언 키워드, 호이스팅 등에 대해 알아보자~~

 

---

식별자 정의와 특징

• 식별자는 반드시 문자, $, _ 으로 시작
• 대소문자 구분, 클래스명 외에는 모두 소문자로 시작
• 카멜 케이스(camelCase, lower-camel-case)
  • 변수, 객체, 함수에 사용
• 파스칼 케이스 (PascalCase, upper-camel-case)
  • 클래스, 생성자에 사용
• 대문자 스네이크 케이스(SNAKE_CASE)
  • 상수에 사용

 

---

선언, 초기화, 할당

• 선언(Declaration)
  • 변수를 생성하는 행위 또는 시점
• 초기화(Initialization)
  • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점
  • 변수 객체 값을 위한 공간을 메모리에 할당
  • 이 때 할당되는 값은 undefined
• 할당(Assignment)
  • 선언된 변수에 값을 저장하는 행위 또는 시점

 

let foo         // 선언
console.log(foo)//undefined

foo = 11        // 할당
console.jog(foo)// 11

let bar = 0     // 선언+할당
console.log(bar)// 0

 

---

변수 선언 키워드

1.  let

• 재할당 가능 & 재선언 불가능
• 블록 스코프를 갖는 지역 변수를 선언, 선언과 동시에 원하는 값으로 초기화 할 수 있음

// let
let number = 10 // 1. 선언 및 초기값 할당
number = 20 // 2. 재할당
//-------------------------------
let number = 10 // 1. 선언 및 초기값 할당
let number = 20 // 2. 재선언 불가능!!

 

2.  const

• 재할당 불가능 & 재선언 불가능
• 선언 시 반드시 초기값을 설정 해야 하며, 이후 값 변경이 불가능
• let과 동일하게 블록 스코프를 가짐

// let
const number = 10 // 1. 선언 및 초기값 할당
number = 20 // 2. 재할당 불가능!!
//-------------------------------
const number = 10 // 1. 선언 및 초기값 할당
const number = 20 // 2. 재선언 불가능!!

 

3. var

• 재할당 가능 & 재선언 가능
• ES6 이전에 변수를 선언할 때 사용되던 키워드
• 호이스팅 되는 특성으로 인해 예기치 못한 문제 발생 가능
• 따라서 ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장

 

---

호이스팅

• 호이스팅은 JS에서 변수와 함수 선언이 스코프의 최상단으로 "끌어올려지는" 동작을 말함
• var로 선언된 변수는 선언 이전에 참조를 할 수 있음 (그니까 쉽게 설명하면 아직 정의도 안해줬는데?? 참조를 할수있는 느낌쓰?)

console.log(x); // undefined
var x = 5;
console.log(x); // 5

이게 왜 일어나냐면

var 는 선언과 동시에 초기화가 됨

즉, 선언과 동시에 undefined가 할당됨

 

하지만 let, const는 선언만 될 뿐 초기화가 이루어지지 않는 메모리 할당이 아직 되지 않는은 

TDZ(Temporal Dead Zone)에 들어가게 돼서 일어난다함

Temporal Dead Zone은 알아서 구글링 해보시길 ㅎ...

 

오늘은 JS의 가장 기본인 TDZ에 대해 알아봤따

그럼 안녕~~~