호이스팅, TDZ, 변수의 생성과정, 스코프

나는야 토마토·2022년 4월 4일

JavaScript💛

목록 보기

4/15

호이스팅

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

var

중복 선언이 가능
즉, 한번 선언된 변수는 다시 선언할 수 있다.

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

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

또한 선언되기 전에 사용될 수 있다.

var name;
console.log(name); // undefined
name = 'mike';

선언은 호이스팅 되어지지만 할당은 호이스팅 되어지지 않는다.
즉, name이라는 변수만 올려지고 mike라는 값은 할당되어지지 않는다.

할당을 하기 전에는 사용할 수 없음! 이는 코드를 예측 가능하게 하고, 잠재적인 버그를 줄일 수 있다!

but) 코드량이 많아졌을 때, 같은 이름의 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생하는지 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이let, const이다.

let

재 할당이 가능

let name = 'mike';
console.log(name); // Mike
name = 'Jane';
console.log(name); // Jane

console.log(name); // Reference Error
let name = 'mike';

호이스팅은 스코프 단위{}로 일어난다. 그렇기 때문에 세 변수 모두 다 호이스팅이 일어난다.

여기서 스코프는 함수 내부를 의미한다. let으로 선언한 age 2번째 변수가 호이스팅을 일으킨다! 만약 호이스팅이 되지 않았다면 함수 밖에서 선언된 age변수 30이 찍혀야한다.

변수의 생성과정

변수는 3단계의 생성과정을 거친다. 1. 선언 단계, 2. 초기화 단계, 3. 할당 단계

var는 선언과 초기화가 동시에 일어난다. 즉, var가 선언되면 undefined가 할당되어져 초기화되어진다. 그래서 할당 전에 호출하면 에러를 내지 않고 undefined가 나오게 된다.

let은 선언 단계와 초기화 단계가 분리되어 이루어진다. 호이스팅 되면서 선언단계가 이루어지지만 초기화 단계는 실제 코드가 도달해질 때 되기 때문에 reference error가 발생하게 된다.

const는 선언과 할당이 동시에 되어야 한다. let과 var는 선언만 해두고 할당을 나중에 한다. let과 var는 값을 변경할 수 있기 때문이다!

선언하면서 할당을 해주지 않았기 때문에 syntax error가 나는 것을 확인할 수 있다.

스코프

var는 함수 스코프이고, let과 const는 블록 스코프이다! 블록 스코프에서 선언된 변수는 블록 내에서만 유효하며 외부에서는 접근할 수 없다. 즉, 블록 스코프는 지역변수이다. 여기서 말하는 코드 블록은 함수, if문, for문, while문, try-catch문 등을 의미한다. 반면에 함수 스코프는 함수 내에서 선언된 변수만 지역 스코프가 되는 것이다.