[JS] 변수와 호이스팅

 

변수 (Variable)

---

변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이 이름을 말한다.

 

변수 선언

변수는 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다.

var와 let은 둘을 바꿔서 사용해도 크게 문제 되지 않는다.

 

 

var 와 let의 차이점

var는 한번 선언된 변수를 다시 선언할 수 있다.

var name = "Stella";
console.log(name); // Stella

var name = "Kate";
console.log(name); // Kate

 

동일하게 let으로 선언할경우 에러가 발생한다.

let name = "Stella";
console.log(name); // Stella

let name = "Kate";
console.log(name); // error!

 

var는 선언하기 전에 사용할 수 있다.

console.log(name); // undefined
var name = "Stella";

 

var name이 나오기전에 사용했는데 에러를 일으키지 않았던 이유는 var는 아래와 같이 동작하기 때문이다.

var로 선언한 모든 변수는 코드가 실제로 이동하지 않지만 최상위로 끌어올려진것 처럼 동작한다.

이를 호이스팅 이라고 한다.

 

var name;
console.log(name); //undefined
name = "Stella"; // 할당

 

그럼에도 콘솔의 결과 값은 undefined로 출력한다.

선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문이다.

즉, name이라는 변수만 올려지고 Stella라는 값은 그 자리에 있기 때문이다.

할당은 세번째 줄에서 처리된다.

 

호이스팅(hoisting)이란 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다는 뜻이다.

 

같은 상황에서 let은 에러가 난다.

console.log(name); // ReferenceError
let name = "Stella";

 

let과 const도 호이스팅이 된다. 그런데 에러를 내는 이유는 TDZ(Temporal Dead Zone) 때문이다.

// --- Temporal Dead Zone 영역 -----
console.log(name);
// ---------------------------------

const name = "Stella"; // 함수 선언 및 할당
console.log(name); // 사용 가능

let과 const는 TDZ의 영향을 받는다. 할당을 하기 전에는 사용할 수 없다.

이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있다.

 

 

호이스팅 (Hoisting)

---

Success

 

 

let age = 29;

function showAge() {
	console.log(age);
}

showAge();

 

Error

 

let age = 29;

function showAge() {
// ------ TDZ 존 -----
	console.log(age);
// --------------------
	let age = 19;
}

showAge();

호이스팅은 스코프 단위로 일어난다.

showAge() 함수에서 let으로 선언한 두번째 age변수가 호이스팅을 일으킨다.

때문에 에러가 발생한다.

 

 

변수의 생성과정

---

 

var

1. 선언 및 초기화 단계

var는 선언과 초기화가 동기화가 동시에 된다. (할당 전에 호출 시 에러가 나지 않는 이유)

*초기화: undefined를 할당 해주는 단계

2. 할당 단계 

 

let

1. 선언 단계

2. 초기화 단계

3. 할당 단계

let은 선언 단계와 초기화 단계가 분리되어서 진행된다.

호이스팅 되면서 선언단계가 이루어지지만 초기화 단계는 실제 코드에 도달 했을때 되기 때문에 레퍼런스 에러가 발생한다.

 

const 

1. 선언 + 초기화 + 할당

const는 선언과 할당이 동시에 되어야 한다.

 

var name;
name = "Stella";

let age;
age = 29;

const gender;
gender ="female"; // error! Missing initializer in const declaration

name과 age는 문제 없지만, const로 선언된 gender부분은 선언하면서 값이 할당 되지 않았기 때문에 에러가 난다.

 

 

스코프 (Scope)

---

var

: 함수 스코프 (function-scoped)

함수  스코프는 함수 내에서 선언한 변수만 그 지역 변수가 된다.

 

let, const

: 블록 스코프 (function-scoped)

블록스코프는 모든 코드블록에서 선언된 변수는 코드 블록내에서만 유효하며 외부에서는 접근할수 없다는 의미이다. 즉, 코드 블록 내에서 선언한 변수는 지역변수이다.

 

코드블록은 함수, if 문, for 문, while 문, try/catch 문 등이 있다.

function add() {
 // Block-level Scope
 }
 
 if() {
 // Block-level Scope
}

for(let i=0; i<10; i+= {
 // Block-level Scope
 }

 

 

 

예시

// var
const age = 29;

if(age > 19) {
	var txt = "adult";
}

console.log(txt); // "adult"

// const
const age = 29;

if(age > 19) {
	const txt = "adult";
}

console.log(txt); // Uncaught ReferenceError: txt is not defined

function add(num1, num2) {
	var result = num1 + num2;
}

add(2, 3);
console.log(result); // Uncaught ReferenceError: result is not defined

*유일하게 벗어날 수 없는 스코프가 함수