[모던 자바스크립트 딥다이브] 변수

Coooding·2021년 12월 20일
0
post-custom-banner

변수

변수 : 변수는 값을 저장하기 위해 확보한 메모리의 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

컴퓨터는 연산을 할 때 메모리에서 값을 가져오게 된다.

예를 들어, 10 + 20을 실행할 경우 메모리에 30이 저장될 것이다.

그런데 이를 재사용하기 위해서는 메모리에 직접 접근을 해서 값을 가져와야 한다.

그러나 메모리에 직접 접근을 하는 것은 시스템을 멈추게 하는 등 치명적인 오류를 유발할 수 있기 때문에 지양해야 한다.

마찬가지로 개발자가 메모리를 제어하는 것도 좋지 않다. 동일한 컴퓨터에서 동일한 코드를 실행해도 값이 저장될 메모리 주소는 계속해서 바뀐다. 코드를 실행하기 전까지는 어디에 저장될지 알 수 없으며, 알려 주지도 않는다고 한다. 그래서 메모리 주소를 통해 직접 접근하는 방식은 올바른 방법이 아니다.

위의 이유들로 우리는 변수를 사용한다. 변수(식별자)는 결국 메모리 주소를 기억하는 것이다.

변수 선언

자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다.

  1. 선언 단계 : 자바 스크립트 엔진에 변수의 존재를 알린다.
  2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 저장한다.
var value = 80;

우리가 흔히 하는 변수 선언이다.

그리고 이렇게도 표현할 수 있다.

var value; // 선언 
value = 80; // 할당 

위의 코드와 정확히 똑같은 동작을 한다.

var value; 여기에서는 선언과 undefined로 초기화가 실행된다.

그리고 80이라는 값을 새로운 메모리 공간을 확보해서 집어넣게 된다.

그래서 var value = 80;을 실행하면 undefined와 80의 값을 가지고 있는 메모리 공간 두 개를 사용하게 된다.

소스코드 평가 과정, 런타임

자바스크립트에서 모든 선언은 일반 코드와 똑같이 런타임에 한 줄씩 실행되는 것이 아니라 코드가 실행되기 전 단계인 소스코드 평가 과정에서 실행된다. 자바스크립트 엔진은 모든 선언문을 먼저 실행하는 평가 과정이 끝나고 선언문을 제외한 소스코드를 실행하게 된다.

console.log(value); // 80

var value = 80;

실제로 이 코드를 실행시켜보면 80이 찍히는 것을 확인할 수 있다. 선언문인 var value = 80;이 평가 과정에서 실행된 것이다. 이렇게 선언문이 코드의 제일 위로 끌어 올려진 것처럼 보이는 것을 호이스팅 이라고 한다.

재할당

var value = 80;

value = 100;

변수에 값을 재할당 한다는 것은 기존의 메모리 공간에 새로운 값을 집어넣는 게 아닌 새로운 메모리 공간을 확보해 값을 집어넣는 것이다. 그래서 80이라는 값을 가지고 있는 메모리는 그대로 있고 새로운 메모리에 100이라는 값을 집어넣고 value라는 식별자와 새로운 메모리의 주소를 매핑한다. 이런 식으로 값의 재할당이 이루어진다.

가비지 콜렉터

사실 나는 처음으로 배운 언어가 C++ 이었다. 그래서 수동으로 메모리를 할당하고 해제하는 행동을 모든 언어에서도 똑같이 하는 줄 알고 있었다. 그래서 Java를 처음 배웠을 때 JVM이라는 시스템이 자동으로 메모리를 관리해 주는 것을 보고 신기하다고 생각했다.

여튼 가비지 콜렉터는 내가 말한 것처럼 메모리 할당을 해제해 주는 시스템이다. 위에서 얘기한 대로 값을 재할당 할 때는 새로운 메모리를 확보하고 값을 집어넣는다고 했다. 그렇다면 재할당 되며 사용되지 않는 이전 값들은 메모리에 그대로 남아있기 때문에 메모리 해제를 해주어야 메모리 누수가 발생하지 않을 것이다. 그래서 가비지 콜렉터는 메모리 공간을 주기적으로 검사하여 사용하지 않는 메모리는 해제해 준다.

profile
프론트엔드가 재미있는 사람
post-custom-banner

0개의 댓글