자바스크립트 추가 공부 - 변수의 개념과 호이스팅

변수

 

변수 : 값의 위치를 저장하는 저장소 

 

 

변수의 종류 : var, let, const

 

✓  let과 const는 ES6부터 추가된 선언 방식으로 var의 단점을 보완하기 위해 나왔다. 

 

? ES6 ( ECMAScript ) 란 ?  A. 자바스크립트 언어의 표준. 

• 표준화 한 이유 : 크로스 브라우징 이슈를 해결하기 위해
• 크로스 브라우징 : 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈
  

 

✓  var : 권장하지 않는 변수 선언 방식. 중복 선언 가능, 값 재할당 가능 => 언젠가 에러가 발생하기 쉬움

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

a = 11; //변수 재할당
console.log(a); //11

var a = '15'; //변수 재선언시
console.log(a); // 아무 문제 없음

 

 

✓  let : 중복 선언 불가능, 값을 다시 재할당 가능

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

a = 11; //변수 재할당
console.log(a); //11

let a = '15'; //변수 재선언시
console.log(a); //Error발생 - Uncaught SyntaxError: Identifier 'a' has already been declared

   

 

✓  const : 중복 선언 불가능, 재 할당 불가능. 즉시 값을 할당하는 초기화가 되어야함. 상수를 할당할 때 사용

const a = 1;
console.log(a); //1

a = 3; //변수 재할당시
console.log(a); //Error-Uncaught TypeError: Assignment to constant variable.

const a = 3; //변수 재선언시
console.log(a); //Error-Uncaught SyntaxError: Identifier 'a' has already been declared

 

 

 

var를 권장하지 않는 이유 

 

✓  var는 let, const와 다르게 변수의 중복 선언을 허용

 

문제점

협업 프로젝트 진행 시 이미 사용한 변수 명인줄 모르고 재선언을 했을 경우 에러가 발생하지 않아 찾기가 어려움

 

이러한 현상이 나타나는 이유는 호이스팅 때문이다 

 

 

 

호이스팅 

 

지역변수 : 변수를 사용할 수 있는 범위가 함수,조건문,반복문처럼 중괄호로 감싸진 범위로 제한

 

전역변수 : 전체 범위에서 사용 가능

 

호이스팅 : 코드가 실행되기 전에 변수/함수 선언이 최상단으로 끌어 올려진 것 같은 현상

• 변수를 JS 엔진이 메모리에 기억해 두었다가 최상단에 선언함. 실제로 코드가 끌어올려지는 것이 아닌 내부적으로 JS가 처리한다.
  
  
• 코드 실행 전 이미 변수/함수 선언이 저장되어 있기 때문에 호출이 먼저 나와도 동작한다.

 

변수 호이스팅

1. 자바스크립트의 모든 선언에는 호이스팅이 일어난다
2. let, const 로 선언할 시 호이스팅이 발생하지만 발생하지 않는 것처럼 동작
3. let, const 변수를 선언문 이전에 참조하면 초기화 되지 않았다는 에러 발생
   
   

▶️ 일시적 사각지대(TDZ) 에 빠지기 때문이다

 

▶️ TDZ 란 ? A. 변수가 선언만 되고 아직 초기화 ( ex. a = 3 ) 되지 않는 변수가 머무는 공간 

 

=> 주요 목적은 프로그래밍 오류를 줄이는 것에 있다. 초기화 되지 않은 변수를 사용하는 것을 방지할 수 있다 

 

// 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남.
console.log(text); // (선언 된 상태, 초기화(메모리 공간 확보와 undefined로 초기화) 안되서 참조 불가능 -> 에러남)
let text; // 여기서 초기화 단계가 실행됨

 

💡 호이스팅이라는 용어가 선언이 먼저 메모리에 저장된다는 의미이기 때문에
      모든 선언은 호이스팅이 된다는 것이다

 

 

 

변수 명명 규칙 

1. 변수는 문자와 숫자, $와 _만 사용
2. 첫글자는 숫자가 될 수 없다 (abc와 ABC는 다름)
3. 영어 소문자와 대문자는 구별됨
4. 예약어는 사용할 수 없다 (예약어 ex. let, const …)
5. 가급적 상수는 대문자를 사용
6. 이름에 공백은 허용되지 않음(카멜케이스, 스네이크 케이스 표기법 사용)
   • 카멜 케이스와 스네이크 케이스
     1. Camel Case 표기 : 공백 대신 다음 문자를 대문자로 표기하여 연결
     2. ex) who am i ⇒ whoAmI
     3. Snake Case 표기 : 공백 대신 언더바(_)를 사용하여 연결
     4. ex) who am i ⇒ who_am_i
7. 변수명은 읽기 쉽고 이해할 수 있게 선언

✓  변수 선언 시 기본적으로 const ( 상수 ) 를 사용하고 니중에 값 변경이 필요한 경우만 let으로 수정할 것을 권장 

 

 

 

 

참고글 

const 참고글 

https://hyunseob.github.io/2016/11/21/misunderstanding-about-const/

const에 대한 오해

 

호이스팅 참고글 

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬

TDZ 일시적 사각지대 
https://ccomccomhan.tistory.com/288

[JS] - TDZ(Temporal Dead Zone)이란? 간단하고 쉽게 이해하기 (예제코드, 임시 사각 지대란?)

 

---

자바스크립트의 변수에서 변수 호이스팅에 대한 심화 내용을 공부했다. 
호이스팅은 이해했지만 TDZ에 대해서는 더 깊게, 정확히 공부가 필요할 것 같다.