[JavaScript] 상수와 변수 그리고 hoisting

박이레·2022년 9월 21일

목록 보기

3/13

　수학에서 상수란 변하지 않는 일정한 값을 가진 수나 양을 뜻합니다. 변수의 반대말이죠. 값을 바꿀 수 있는 변수가 좀 더 유용해보이지만 JS에서는 상수를 훨씬 많이 사용합니다. 값을 변경할 가능성이 있으면 변수를 사용하고, 그렇지 않으면 상수를 사용합니다.

상수와 변수에 대해 알아보고 이제 사용하지 않는 var 키워드와 호이스팅에 대해 알아봅시다.

수(數)

자연수, 정수, 분수, 유리수, 무리수, 실수, 허수 따위를 통틀어 이르는 말. 좁은 뜻으로는 자연수를 가리킵니다.

constant. '항상 같은 수'. const 키워드로 선언합니다.

> const pi = 3.141592
>> undefined

> pi
>> 3.141592

> pi = 99
>> Uncaught TypeError: Assignment to constant variable.

variable. '변할 수 있는 수'. let 키워드로 선언합니다. (var 키워드도 사용할 수 있지만 권장되지 않습니다.)

> let pi = 3.141592
>> undefined

> pi
>> 3.141592

> pi = 99
>> 99
> pi
>> 99

> let pi = 100
>> undefined
>> 100

JS는 2015년, ES6를 발표하고 큰 변화를 줬습니다. 변수 선언 키워드였던 var를 deprecated 시킨 것입니다. 왜 그랬을까요?

var는 variable의 준말입니다. let보다 더 직관적이죠. 그럼에도 var를 포기할 수 밖에 없었습니다. 아래 코드는 어떻게 동작할까요? C나 C++, Java를 배운 개발자들은 실행하지 않고도 오류가 발생할 것을 예상할 수 있습니다. 그러나..

> console.log(a)
> var a = 1

정상적으로 작동합니다. 심지어 아래 코드도..

> console.log(a)
> a = 1
> var a

정상 작동합니다. 왜 그럴까요? 바로 hoisting 때문입니다. JS는 이렇게 동작합니다.

① Chrome V8 engine이 미리 문서를 읽습니다.
② top to bottom 순서로 읽습니다.
③ engine에 var a = 1이 있기 때문에 "undefined"를 반환합니다.
즉, hoisting은 변수의 선언과 초기화를 같이 실행합니다.

아래 코드는 어떨까요? 결과를 한번 예상해볼까요?

> for (var i = 1; i < 5; i++) {
  console.log(i)
}
> console.log(i)

정상 작동합니다. var는 전역변수 지역변수 개념이 확실하지 않습니다. var는 함수만 지역변수로 호출 되고, 나머지는 전역변수로 호출이 됩니다.

이러한 이유 때문에 let이 등장하게 됐습니다.

다음 글은 for 반복문에 대해 다룹니다.

혼자 공부하는 자바스크립트

윤인성 지음ㅣ한빛미디어ㅣ2021ㅣ도서 정보

mdn web docs

Mozilla 재단 ㅣ출처

혜화동 사는 Architect