TECHIT 멋쟁이사자처럼/프론트엔드 스쿨

[JS]변수, 호이스팅, var와 let의 차이

D0HA 2024. 1. 20. 18:46

 

 

변수(Variable)

  • 계속 변하는 값
  • let으로 선언
  • 넣은 데이터 변경 가능
let a = 1;
console.log(a); // 출력: 1
let b = a;
console.log(a, b); // 출력: 1 1
a = 2; // 위에서 이미 변수를 선언했으므로 let을 생략하고 값만 변경
console.log(a, b); // 출력: 2 1
let c; // 변수는 선언과 값 대입을 따로 할 수 있음
console.log(c); // undefined

c = 5;
console.log(c); // 출력: 5

상수(Constant)

  • 변하지 않는 고정 값
  • const로 선언
  • 넣은 데이터 변경 불가
  • 프로그램에서 널리 쓰이는 상수들의 경우 대문자로 지음(일종의 국룰!)
const A = 1;
console.log(A); // 출력: 1
A = 2; // Error!!, 값 변경 불가
const B; // Error!! 상수는 선언만 할 수 없고, 선언과 할당을 같이!

식별자 네이밍 규칙(Identifier Naming Rule)

  • 영문, 한글, 숫자, 대부분의 문자(유니코드) 사용 가능
  • 특수문자는 _ 또는 $ 사용 가능
  • 숫자로 시작할 수 없음
  • 공백, 예약어 사용 불가

var와 let 차이, 호이스팅

console.log(a); // Error!!
console.log(a);
var a = 1; // 출력: undefined
console.log(a);
var a = 1;
console.log(a); // 출력: undefined
                //       1
console.log(a);
a = 1;
var a; 
console.log(a); // 출력: undefined
                //       1

 

위와 같은 일이 일어나는 이유!

코드 실행 전에 변수를 해당 범위의 상단으로 끌어올리는 호이스팅 때문!

이외에도 var는 전역변수와 지역변수 개념이 확실하지 않고, 변수명 중복이 가능하다는 등의 문제가 있습니다.

이를 해결하기 위해 TDZ(Temporal Death Zone) 개념이 있는 let이 등장했습니다.