Today I Learned 10 - JavaScript Deep Dive / 메모리 관점에서의 변수

angie·2022년 6월 22일
0

JavaScript Deep Dive

목록 보기
1/18
post-thumbnail

본 포스팅은 '모던 자바스크립트 Deep Dive'를 기반으로 공부한 내용을 정리한 것입니다.

변수란 무엇이며 왜 필요할까?

먼저 메모리 관점에서 변수를 이해하려면 메모리에 대한 이해가 필요하다

  • 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체
  • 메모리 셀 : 셀 하나의 크기는 1바이트, 컴퓨터는 메모리 셀의 크기를 단위로 데이터를 저장아거나 읽어들인다.
  • 메모리 주소 : 각 셀은 고유의 메모리 주소를 갖는다. 메모리 공간의 위치를 나타낸다.

만약 아래와 같이 변수를 선언한다면

var result = 10 + 20;

10, 20이라는 값과 '10+20'의 결과값인 30도 각각 다른 메모리 주소를 가진 메모리 공간에 저장된다.
이때 '30'과 같은 경우, 저장된 값 '30'을 다시 읽어 들여 재사용할 수 있도록 메모리 공간에 상징적인 이름을 붙인 것이 '변수'이다.

변수

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

변수가 필요한 이유

개발자들은 직접 메모리 주소를 통해 값에 접근할 수 없기 때문에, 저장된 값을 재사용하기 위한 목적으로 변수라는 메커니즘을 제공하는 것이다.



식별자

변수 이름을 '식별자(identifier)'라고도 한다. 그 이유는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이기 때문!

식별자는 값이 아니라 메모리 주소를 기억하고 있다. 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.



변수 선언

변수 선언이란?

변수를 생성하는 것, 즉, 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것

변수를 선언하기 위해 사용되는 키워드에는 var, let, const가 있다.

변수 선언의 단계

  • 선언 단계 : 변수 이름을 등록
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화한다.
    -> 변수의 초기화는 자바스크립트의 독특한 특징

ReferenceError와 undefined의 차이

  • ReferenceError(참조 에러) : 등록된 식별자 자체를 찾을 수 없을 때 (변수가 선언되지 않았음)
  • undefined : 변수가 이미 선언되었고 초기화되었기 때문에 undefined라는 값을 가짐



변수 호이스팅

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

즉, 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 실행

console.log(score);
var score;

// 결과값 = undefined

위 구문에서 결과가 ReferenceError가 아니라 undefined가 나오는 이유?
-> 변수 선언이 한줄씩 순차적으로 실행되는 것이 아니라 그 전 단계에 먼저 미리 실행되기 때문



값의 할당

값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

console.log(score); // undefined

var score; // 변수 선언
score = 80; // 값의 할당

console.log(score); // 80

위의 구문에서 첫번째 콘솔로그는 변수는 선언되었지만 변수 값의 할당 전의 시점이기 때문에 undefined의 값을 갖는다.
하지만 마지막의 콘솔로그는 변수 값의 할당 된 뒤기 때문에 80이란 할당된 값을 가지게 된다.

여기서 값의 할당이나 재할당은 메모리 공간을 지우고 새로운 값을 저장하는 것이 아니라, 아예 새로운 메모리 공간에 할당값을 저장한다.



profile
better than more

0개의 댓글