Enjoy Programming

변수의 선언과 할당 본문

JavaScript/Vanilla Js

변수의 선언과 할당

LEETAEEON 2021. 9. 22. 18:46

오늘부터 기초적인 자바스크립트 내용부터 시작해서 차근차근 다시 포스팅하려고 한다.

 

모던자바스크립트 도서를 기준으로 작성하고~ react나 nextjs graphql은 프로젝트 도중 필요한 시점에 작성하겠다~!

 

먼저 짧게 변수의 선언과 할당에 대해 짚고 넘어가자.

 

Runtime을 기준으로 생각하면 좀 더 쉽게 이해하기 쉽다고 생각한다.

 

먼저 score라는 변수를 선언하고 할당해보자

순서는 콘솔창에 선언되지 않은 score를 표시하고

그 다음 score를 선언한다. 그리고 score에 80을 할당하자.

결과부터 보면

먼저 undefined가 뜨고 80이 찍힌다.

 

자바스크립트는 순서대로 읽어 내려간다. 그럼 첫 console.log에 왜 reference오류가 아닌 undefined가 떴는가!

 

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

한가지 더 말하면 이해가 쉽다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행이 된다. 런타임 이전에 변수 선언이 실행되고 상단으로 끌어 올려지는 hoisting이 된다.

 

그렇기에! score가 선언되면서 바로 초기화가 되고 순차적으로 실행되어 score는 undefined!

score=80으로 할당하여 다시 80이라느 ㄴ값이  주어진다.

 

한가지 주의 할 점은 let과 const이다. 주로 let과 const를 사용하는데 이들도 역시 hoisting이 된다.

 

차후 다시 다루겠지만 간단하게 let은 초기화 전에는 접근할 수 없다고 뜨는데 이 역시 런타임 이전에 선언을 hoisting한 것이다.

 

그리고 const는 주의 해야 하는것이 바로 선언과 동시에 초기화가 이루어져야 한다는 것이다.

 

let과 const는 이전에 다룬 temporary dead zone을 상기해야하기에 차후에 다루자 까먹었다.

 

그리고 한가지 더 알아둬야 하는 것은 바로 메모리관리 부분이다.

 

기본적으로 자바스크립트는 선언과 할당이 이루어지고서 만약 재할당이 이루어진다면 같은 메모리에 다른 값을 주는 것이 아니라

 

그 주소는 버려두고 다른 주소에 재할당을 하고 이전 값은 garbage로 버려둔다.

 

이때 메모리 관리를 위해 가비지콜렉터를 이용해 사용되지 않는 메모리를 해제한다. 아주 편리하다

 

unmanaged 언어인 c같은 경우 개발자가 malloc을 이용해 메모리 할당과 해제를 해줘야 한다..

 

아무튼 그렇다 요기까지 오늘!