공삼
article thumbnail
Published 2023. 8. 25. 22:30
var, let, const 차이 Front-End/JavaScript


var와 let,const 환경차이 

var - object 환경 

let & const - declarative 선언환경을 가지기때문에 결과값이 달라진다.

 

Object 환경 특징

- 함수 스코프 : 'var'로 선언된 변수는 해당 함수의 스코프 내에서만 유효하다. 함수 외부에서 접근할 수없다. 

- 호이스팅 : 'var'로 선언된 변수는 해당 스코프 내에서 최상위로 끌어올려지는 현상(호이스팅)을 가진다. 즉 변수 선언이 해당 스코프의 최상단으로 옮겨지기 때문에 변수 선언 이전에도 변수를 참조할 수 있다.

 

렉시컬환경 내 메모리환경에 호이스팅으로 끌어올려지면 var는 undefined로 할당된다. var가 할당 되기전이기때문에 undefined 출력된다. 

 

반면에 let 과 const도 똑같이 호이스팅되지만 동작 방식이 다르다.

 

let과 const는 선언단계와 초기화 단계로 구분되는데, 변수가 선언되면 실제 메모리 공간은 확보되지만, 초기화 되기 전까지 변수에 접근하면 'ReferenceError'가 발생한다. 이로 인해 일시적 사각지대라고 불리우는 TDZ(Temporal Dead Zone)이라는 개념이 생긴다. 

 

이 사각지대에서 변수는 선언되었지만 초기화 되기 전이므로 접근하면 에러가 발생한다. 

 

호이스팅 결과

console.log(myVar);  // undefined
var myVar = 42;

console.log(myLet);  // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 42;

console.log(myConst);  // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 42;

 

var는 선언전에 호출하면 undefined라고 뜨고, let 과 const는 ReferenceError가 발생하게 된다. 

 

결론적으로 let과 const도 호이스팅은 되지만, var와 다르게 일시적 사각지대에 빠지게 되므로 변수 선언 이전에 접근하는 것을 피해야 한다.

 

자바스크립트 실행컨텍스트 or 자바스크립트 클로저 > 검색 키워드

 


let admin = 1;
let name = 2;

console.log(admin == name);

== 는 같냐고 물어보는 문법.

 

var와 let의 차이

콘솔 a

var a=’a’;
콘솔 b

let b='b';

var는 콘솔에서 a 바로 undifiend 되지만

let은 그냥 b 로 선언되서 오류남

 

 

 

 

 

 

 

 

 

 

profile

공삼

@g_three

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!