Javascript. 변수, 호이스팅, TDZ(Temporal Dead Zone)

울고있는따개비·2023년 2월 3일
0

study

목록 보기
1/8
post-thumbnail

변수(variable)

어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용

  • let (ES6부터 생김)
  • const (ES6부터 생김, 변수명 전체 대문자)
  • var (ES6 이전)

var와 let

var와 let은 모두 값이 변할 가능성이 있는 경우 사용

var와 let의 차이점

  • var는 한번 선언된 변수 재선언 가능
var name = 'coffee';
console.log(name); //coffee

var name = 'donut';
console.log(name); //donut

  • let은 한번 선언된 변수 재선언 불가
let name = 'coffee';
console.log(name);

let name = 'donut';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared



  • var는 선언하기 전에 사용할 수 있음
// 오류 발생하지 않음
console.log(name); // undefined
var name = 'love';

  • var로 선언한 모든 변수는 코드가 최상위로 끌어올려진 것처럼 아래와 같이 동작
    호이스팅
    선언은 호이스팅되지만, 할당은 호이스팅되지 않기 때문에 console에는 undefined가 찍힘
var name;
console.log(name); // undefined
name = 'love';

  • let은 선언하기 전에 사용하려고 하면 오류 발생
console.log(name); // ReferenceError
let name = 'love';



호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

var뿐만 아니라 let과 const도 호이스팅 됨
그러나 var 처럼 동작하지 않고 에러를 내는 이유는 TDZ(Temporal Dead Zone)가 다르기 때문이다.

| TDZ(Temporal Dead Zone) |
TDZ에 있는 변수는 사용 불가 → let과 const는 TDZ의 영향을 받음
코드를 예측 가능하게 하며 잠재적인 버그를 줄여줌

console.log(name); // TDZ, 오류 발생
const name = 'love'; // 함수 선언 및 할당
cosole.log(name) // 사용 가능

호이스팅은 스코프 단위로 일어남

let name = 'love';
// --------------- 스코프 -----------------
function showName(){
	console.log(name); // TDZ, 오류 발생
	let name = 'hate';
  	console.log(name); // hate
}
// ----------------------------------------
showName();

변수의 생성과정

  1. 선언 단계
  2. 초기화 단계 (undefined를 할당 해주는 단계)
  3. 할당 단계
  • var
    1. 선언 및 초기화 단계 (호이스팅 되면서 동시에 실행)
    2. 할당 단계

  • let
    1. 선언 단계 (호이스팅 되면서 이루어짐)
    2. 초기화 단계 (실제 코드에 도달했을 때 실행)
    3. 할당 단계

  • const
    1. 선언 + 초기화 + 할당

* const와 달리 var와 let은 선언만 해두고 후에 할당하는 것을 허용

스코프

  • var
    함수 스코프 (function-scoped)
    함수 내에서 선언된 변수만 지역변수가 됨
    유일하게 벗어날 수 없는 스코프가 함수

  • let
    블록 스코프 (block-scoped)
    모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 외부에서는 접근이 불가
    블록 내부에서 선언한 변수는 지역변수가 됨





예측 가능한 결과를 내고 버그를 줄이기 위해 var 보다는 let과 const의 사용을 권장

profile
diet mountain dew, baby, new york city

0개의 댓글