[JavaScript] 변수와 상수

변수와 상수

[변수 생성의 3단계]

선언 -> 초기화 -> 할당

- 선언: 실행 컨텍스트에 변수 객체를 등록

- 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보

- 할당: undefined로 초기화된 변수에 실제 값을 할당

 

var

 👉 var는 가급적 사용하지 않는 게 좋다.

• var로 선언한  변수는 블록 스코프가아니라 함수 수준 스코프를 가진다.
• var는 선언과 초기화를 한벙네 한다!
• 재선언이 가능하다
• 선언하기 전에도 사용할 수 있다.
• 코드 블럭을 무시합니다. (var는 함수의 최상위로 호이스팅 된다. 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다.)

// var name은 함수의 최상위로 호이스팅되기 때문에,
실행될 일 없는 구문 속에 있어도 선언이 됩니다.
(자바스크립트가 동작하기 전에 코드를 한 번 훑는데 그 때,
var로 선언된 코드를 전부 최상위로 끌어올려버립니다.
동작해선 안되는 구문이라도... 몽땅..!)

function cat(){
	name = "perl";
	// 이 if문 내로는 절대 들어올 일이 없죠!
	if(false) {
		var name;
	}
	alert(name);
}

cat();

 

let

• 자바스크립트에서 변수를 생성할 때 쓰는 키워드
• block-scope를 갖는다.              ->          {} 안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없다.
• 재선언은 불가, 재할당은 가능

// 재할당은 가능!
let cat_name = 'perl';
cat_name = '펄이';

// 재선언은 오류!
let cat_name = 'perl';
let cat_name = '펄이';

 

const

• 자바스크립트에서 상수를 생성할 때 쓰는 키워드
• block-scope를 갖는다.
• 재선언 불가, 재할당도 불가 ( => 선언과 동시에 할당한다!)

// 재할당 오류!
const cat_name = 'perl';
cat_name = '펄이';

// 재선언도 오류!
const cat_name = 'perl';
const cat_name = '펄이';

// 선언과 동시에 할당 되기 때문에 값을 안줘도 오류가 납니다.
// declare!
const cat_name;

 

TDZ(Temporal Dead Zone) = 일시적 사각지대

1) let과 const도 호이스팅이 될까?

👉 [간단하게 말하자면...]

var과 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점이에요!

Q. 왜 에러가 날까? 호이스팅이 안 된 걸까?

A. 호이스팅(=선언 끌어 올리기)은 됩니다! 다만, 선언한 후, 초기화 단계에서 메모리에 공간을 확보하는데, 선언을 호이스팅해도 초기화 전까지 메모리에 공간이 없죠! 그래서 변수를 참조할 수 없기 때문입니다. 이걸 TDZ라고 해요!

 

[2줄 요약]

→ 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐!

→ let, const 선언도 호이스팅 된다.