본문 바로가기
FRONT-END/JavaScript

Javascript - 메모리, 식별자, 변수, 변수 호이스팅

by 랄라J 2022. 10. 5.

아래 내용은 모던 자바스크립트 Deep Dive 4챕터 변수를 읽고 정리한 내용입니다.

 

10 + 20

위 식을 해결하기 위해서

- 10, 20, +의 의미를 알고 해석(파싱) 할 수 있어야 함

- 10, 20이라는 정보를 기억해야함

- 연산된 결과 값 30도 어딘가에 활용하기 위해서도 정보를 저장해 재사용해야 함

컴퓨터에서 연산은 CPU가 정보 저장은 메모리가 함

자바스크립트에서는 메모리 공간에 직접 접근할 수 있는 메모리 제어를 허용하지 않음
만약 되더라도 메모리 주소는 코드 실행 시 메모리 상황에 따라 임의 결정되어 변경됨

 

Keyword 1. 메모리

데이터를 저장할 수 있는 셀(1byte, 8bit)의 집합

컴퓨터는 1byte 단위로 데이터를 읽고 저장함

셀은 고유의 메모리 주소(메모리 공간의 위치)를 가짐

메모리에 저장되는 모든 값은 데이터 종류(숫자, 텍스트, 이미지 등)와 상관없이 2진수로 저장

 

Keyword 2. 식별자

어떤 값을 구별해서 식별할 수 있는 고유한 이름

변수 이름 (식별자)               메모리 주소          메모리
       result              ->     0x0213DSFE         30

값이 저장되어있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 기억되어야 함

 

식별자 네이밍 규칙

- 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능 / 단, 숫자로 시작하는 것은 허용하지 않음

- 예약어는 식별자로 사용 불가

 

+. 자바스크립트는 대소문자를 구별함, 대소문자를 다르게 적었다면 각각 별개의 변수가 됨

+. 일반적으로 변수나 함수의 이름에는 카멜 케이스(firstName) 사용, 생성자 함수 및 클래스 이름에는 파스칼 케이스(FirstName) 사용 / 추가적으로 스네이크 케이스(snake_case), 헝가리언 케이스(typeHungarianCase)도 있음

 

Keyword 2. 변수

기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 재사용하기 위한 메커니즘

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

할당 : 변수에 값을 저장

참조 : 변수에 저장된 값을 읽어 들이는 것

 

변수 선언

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

- var, let, const 키워드(자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어)로 변수 선언 가능

- 선언하지 않은 식별자 접근 시 ReferenceError 발생

- 자바스크립트는 변수 선언 후 값을 할당하지 않아도 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined가 암묵적으로 할당되어 초기화됨

- 선언 단계, 초기화 단계 2단계로 나뉘어 실행됨

 

Keyword 4. 변수 호이스팅

변수의 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 특징

변수의 선언이 소스코드 어디에 선언되어있든 관계없이 다른 코드보다 런타임 이전 단계에서 먼저 수행됨

변수 선언은 런타임 이전, 값의 할당은 런타임에 실행됨

(변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해 선언하는 모든 식별자는 호이스팅됨)

console.log(score); // undefined

// 1
var score;
score = 80;

// 2
var score = 80;

// 3
score = 80;
var score;

console.log(score); // 80

 


추가 용어 정리

- 가비지 컬렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사해 더 이상 사용되지 않는 메모리 공간을 해제하는 기능

- 상수 : 한번 정해지면 변하지 않는 값, const 키워드로 정의 가능

반응형

댓글