[JS] 변수와 Hoisting

goum·2021년 8월 16일

변수

수학에서는 변하는 값을 말한다.
프로그래밍에서는 직접 메모리에 할당하는 것으로 변수명은 메로리상 주소라고 할 수 있다.
언제든 값을 변경할 수 있다. 그것은 마치 건물 재건축한다고 주소가 바뀌지 않는 것과 비슷하다.
종류로는 var와 let이 있다.

let

ES6에서 추가된 변수를 선언하는 키워드
block-level scope ({...} 범위)

let name = 'goum';
console.log(name); // goum 
name = 'hoho'; // 변수 재 할당
console.log(name); // hoho

var

ES6 이전에 사용하던 변수 선언 키워드
function-level scope
hoisting과 function-level scope와 같은 이슈로 사용을 권장하지 않는다.

상수

한번 할당하면 값이 절대 변하지 않는 값
favor immutable data type always for a few reasons
- security : 선언 후 값을 변경할 수 없어 보다 안정적
- thread safety : 여러 스레드가 동시에 접근하여 값이 변경 되는 위험 상황 방지
- reduce human mistakes : 사람의 실수 방지

const number = 7;

Hoisting

모든 선언(var, let, const, fuction 등)을 유효 범위의 최상단으로 끌어올림
JavaScript 인터프리터가코드를 해석할때 변수 및 함수의 선언처리, 실제 코드 실행 두단계로 나눠서 처리하기 때문에 발생하는 현상
JavaScript 인터프리터 내부에서 변수는 총 3단계에 걸쳐 생성된다.
- 선언(Declaration) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계로 이 변수 객체는 스코프가 참조하는 대상이 된다.
- 초기화(Initalization) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계, 이 단계에서 할당된 메모리에는 undefined로 초기화 된다.
- 할당(Assignment) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 이다.

var 키워드

var를 사용하여 선언한 객체의 경우 선언과 초기화가 동시에 이루어진다.
hoisting 되면 초기화(undefined)된 선언만 올라가고, 코드 내 선언부를 만나면 할당이 된다.

console.log(hoisting) // => undefined
var hoisting = 1;

let, const 키워드

let, const도 hoisting이 된다. 하지만 var와 달리 선언되면 TDZ 구간으로 들어간다.
hoisting되었을 때 선언은 되었지만 아직 초기화 되지않아 변수에 담길 값을 위한 메모리가 할당되지 않은 상태로 있는 것 이다.
그래서 코드에서 선언한 부분전에 접근을 시도하면 ReferenceError가 난다.
Temporal Dead Zone(TDZ)
- 한글로 직역하자면 일시적인 사각지대란 뜻이다.
- TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간
- 선언되어 초기화 되기전 까지 let, const, class 구문을 관리하는 곳

console.log(hello); // throws `ReferenceError`
const hello = 'hello';

function 선언식

변수선언 3단계가 동시에 이루어 진다.
function 자체가 hoisting되어 위치와 상관없이 정상적으로 호출 할 수있다.

greet('World'); // => 'Hello, World!'
function greet(who) {
  return `Hello, ${who}!`;
}

greet('Earth'); // => 'Hello, Earth!'

function 표현식

let, const 키워드로 작성할 경우 초기화 없이 TDZ로 들어가 메모리가 할당되지 않아 함수인지 알수없게 된다.
var 키워드로 작성할 경우 초기화값으로 undefined가 되므로 이또한 함수인지 알수없게 된다.

greet('World'); // => greet is not a function
const greet = function(who) {
  return `Hello, ${who}!`;
}

마치며

오늘 자가 진단 테스트에서 호이스팅에 대해 서술해야 했는데 글로 쓰려니까 막상 어떻게 정의해야 할지 떠오르지 않았다. 그래서 화가 나서 파헤치지 시작 했는데 호이스팅이 생각 보다 가벼운 느낌이 아니었다. 그래서 일단 내가 이해한 부분만 간단하게 정리해보았다. 위 내용들 조사하면서 Execution Context, Lexical Environment과 관련지어 설명한 글이 많아 찾아보면서 이해해 보려고 했지만 아직 이해하기 어려웠다. 또 this, closer와 같은 개념도 다 연관되어 있어서 앞으로 더 공부하며 더 포스팅해봐야겠다.

요약