[JS] 변수와 호이스팅

서로·2024년 3월 29일
0

JS

목록 보기
1/15
post-thumbnail

➊ 변수란?

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

애플리케이션은 데이터를 입력받아 처리한다.
이때 데이터는 메모리에 저장한다.

➋ 메모리란?

데이터를 저장할 수 있는 메모리 셀의 집합체다.
메모리 셀 하나의 크기는 1Byte이며 컴퓨터는 메모리 셀의 크기 단위로 데이터를 저장하거나 읽어들인다.

각 셀은 고유의 메모리 주소를 가지며 이 메모리 주소는 메모리 공간의 위치를 나타낸다.
메모리에 저장되는 모든 데이터는 2진수로 저장된다.

그러면 개발자는 어떻게 데이터에 접근해야 할까 ❓

먼저 메모리 주소를 통해 값에 직접 접근하는 방법을 생각해볼 수 있다.
그러나 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 위험이 있으며 코드가 실행되기 이전에는 값이 저장될 메모리 주소를 개발자가 알 수 없다.

따라서 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수를 사용한다.
변수를 사용하면 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수 이름으로 안전하게 값에 접근할 수 있다.

➌ 식별자란?

어떤 값을 구별해서 식별할 수 있는 고유한 이름이다.
변수 이름을 포함하여 함수, 클래스 이름도 모두 식별자다.
식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며 이 매핑 정보도 메모리에 저장되어 있다.
따라서 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

➍ 변수 선언

변수를 사용하려면 먼저 변수 선언문을 작성해야 한다.

var result;

위의 코드는 result 라는 이름으로 변수를 선언하는 문이다.
자바스크립트 엔진은 result 라는 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다.
확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined 라는 값이 암묵적으로 할당되어 초기화된다.

➎ 변수 호이스팅

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다.
그러나 변수 선언문은 런타임이 아니라 그 이전 단계에서 먼저 실행된다.

console.log(result);
var result = 100;
console.log(result);

위의 코드를 예시로 들어보면,

자바스크립트 엔진은 result 변수를 먼저 선언하여 메모리 공간을 확보하고 undefined 을 할당한다.
그 다음에 선언문을 제외한 다른 코드를 순차적으로 실행한다.
따라서 위의 코드는 아래의 코드와 동일하게 동작한다.

var result;

console.log(result); // undefined 출력
result = 100;
console.log(result); // 100 출력

이처럼 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
사실 변수 선언뿐 아니라 함수, 클래스 등의 선언도 호이스팅된다!

➏ 변수 재할당

var result = 100;
result = 200;

위의 코드에서 result 변수에 100을 할당하여 초기화하고
그 다음에 200을 재할당했다.

이때 이전 값 100이 저장되어 있는 메모리 공간을 지우고 그 메모리 공간에 200을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 200을 저장한다.

그러면 기존에 100이 저장되어 있던 메모리 공간은 어떤 식별자와도 연결되어 있지 않다.
이렇게 어떤 식별자와도 연결되어 있지 않은 메모리 공간의 값들을 쓰레기 값이라고 한다.
쓰레기 값은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.
단, 메모리에서 언제 해제될지는 예측할 수 없다.

profile
읽기 쉬운 코드와 글을 작성해요 📝

0개의 댓글