Deep Dive - 변수에 대하여

yesolog·2022년 12월 24일

Javascript

목록 보기

1/2

변수란 무엇인가?

변수: 값을 저장하기 위한 메모리 공간이자 그 공간을 식별하기 위해 붙인 이름, 식별자라고도 부른다.

변수는 선언을 통해 자바스크립트 엔진에 존재를 알린다. 그리고 할당을 통해 변수에 값을 할당(저장, 대입)하게 된다.

1. 변수의 선언

변수는 선언을 통해서 생성된다. 변수를 사용하기 위해서는 반드시 선언의 과정이 필요하며 변수 선언 키워드로는 es5까지는 var가 있었으나 es6부터 let과 cosnt가 추가되었다. 모던자바스크립트에서는 let과 const를 사용하는것을 권장하는 추세이며 const와 let은 그 사용방법이 서로 다르다. 오늘은 var 한정으로 간략하게 정리하려한다.

변수선언 방법

var total;

위와 같이 변수를 선언만하고 할당하지 않은 경우에는 해당 변수에 할당을 통한 값이 부여되지 않았으므로 undefined가 부여된다.

console.log(total) 			// undefiend

var 키워드를 사용한 변수의 선언은 선언 단계와 초기화가 동시에 진행된다. var로 변수를 지정한뒤 초기화 단계를 통해 자동으로 undefined가 부여되는 것이다.

2. 변수의 할당

변수에 값을 저장하는 것은 할당이라는 과정을 통해 진행된다. 할당은 할당연산자인 "="을 사용해 진행된다. 할당은 우항에 있는 값이 좌항에 할당된다.

var total = 30

console.log(total)			// 30

변수의 선언은 런타임 이전에 먼저 실행되지만 할당은 런타임 시점에 실행된다.
(개인적으로 선언은 런타임에는 무시된다고 이해했다...)

3. 변수의 재할당

재할당은 이미 변수에 값이 할당되어 있는 상태에서 다시 할당을 하는 것이다.

var total = 30

total = 10

console.log(total)			//10

만약 강제적으로 재할당을 원하지 않는 변수로 만들고 싶다면 상수인 const를 사용하면 된다.(es6문법)

4. 호이스팅

호이스팅은 자바스크립트에서 가장 중요한 개념중에 하나다.
(실제로 모의면접에서 해당 질문을 받았다... 꼭 공부해야하는 파트)

호이스팅은 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

console.log(message)		//undefined

var message = "Hello world"

원래 선언이 이루어지기 전에 변수가 호출되면 참조에러(ReferenceError)가 발생한다. 그런데 위의 코드는 참조에러가 아닌 undefined가 호출된다. 이 이유는 바로 자바스크립트 엔진이 값의 할당을 읽어들이는 런타임 이전에 한번 변수 선언들을 싹 읽어들이기 때문이다. 이로 인해서 값의 할당은 아직이지만 var message라는 변수의 선언은 읽어들이기 때문에 해당값을 초기값인 undefined로 읽어들이는 것이다. 호이스팅은 매우매우 중요한 개념이니 꼭꼭 깊숙하게 배울 필요가 있다!