ㅎㅅㅎ

Rookie 개발자

4장 변수

변수란 무엇인가?

변수란 값을 저장하기 위한 메모리 주소에 이름을 지정한 것(실제로 그 주소를 알게 하는 건 위험하다)

컴파일러 또는 인터프리터에 의해 메모리 공간의 주소로 치환된다.

var result = 10 + 20; // 할당(assignment)
result; // 참조(reference)
  • result는 식별자(변수의 이름)
  • 30은 변수 값
  • 사실 result는 30이 아니라 30이 저장되어 있는 메모리 주소를 기억하는 것. = 메모리 주소의 이름

변수 선언

var score;

변수 선언 = Allocate(값을 저장하기 위한 메모리 공간 확보) + Name Binding(변수 이름과 메모리 주소를 연결)

변수 선언 키워드 - let, const, var

  • let, const 는 ES6에서 처음 등장 ( var의 한계 때문에 )
    • var의 한계 : 블록 레벨 스코프를 지원하지 않고 함수레벨 스코프를 지원하기 때문에 의도치 않은 전역 변수 선언으로 인한 부작용 발생 ? (15.1절 참고)
  • 키워드 = 예약어 (자바스크립트 엔진이 수행할 동작을 규정한 예약어)

score에 메모리 공간 확보

score에는 null이 아니라 undefined가 할당되어 있다.(암묵적 초기화 자동수행) 자바스크립트의 독특한 특징

  • undefined는 자바스크립트의 primitive type value
  • 초기화하지 않으면 이전의 쓰레기값이 참조될 수 있다.

자바스크립트 엔진의 변수 선언은 2단계(선언, 초기화)

  • 선언 : 변수 이름 score를 등록하여 자바스크립트 엔진에 변수의 존재를 알림
    • 실행 컨텍스트 내에 등록
    • Key/value 형식의 객체로 등록됨
  • 초기화 : 메모리 공간을 확보하고 score 주소의 메모리에 undefined 할당하여 초기화.

ReferenceError : 선언하지 않은 식별자를 참조할 때(score가 아닌 다른 것들)

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined
var score;

결과 : 참조에러 발생하지 않고 undefined 출력

변수 선언이 한꺼번에 먼저 되고 나서 (Runtime 이전)

-> Runtime에 소스코드가 sequential하게 실행하기 때문에 by 인터프리터

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

모든 선언문은 런타임 이전에 실행된다.

값의 할당

// 할당 방법 1
var score = 30; 

// 할당 방법 2
var score; // 변수 선언 - 런타임 이전에 실행
score = 30; // 값의 할당 - 런타임에 실행

1과 2는 정확히 동일하게 작동(1이 2의 단축표현일 뿐)

  • 변수 선언은 런타임 이전에 실행
  • 값의 할당은 런타임에 실행됨
console.log(score); // undefined
score = 30; // (1)
var score; // (2)
console.log(score); // 30

(2)가 먼저 실행되어 score 변수 주소(ex. 0xF2)에 undefined로 초기화

-> (1)에서 score에 새로운 주소를 확보하고 그 주소에 30을 할당(기존 주소 0xF2에 덮어쓰는게 아님) ?

-> 기존의 0xF2는 더 이상 사용되지 않는 메모리(어떤 식별자도 참조하지 않음)

-> Garbage Collector에 의해 메모리 free (자바스크립트는 managed language)

  • Unmanaged language : 개발자가 명시적으로 메모리 할당, 해제 ex) C
  • Managed language : 개발자의 직접적인 메모리 제어를 불허

값을 재할당할 때도 덮어쓰는게 아니라 새로운 주소를 확보하고 확보한 주소에 새로운 값을 저장

const 키워드로 선언된 변수는 단 한 번만 값을 할당할 수 있음.

식별자 네이밍

문자, 숫자, _, $ 포함 가능. 단 첫 문자는 숫자 제외 / 예약어 제외

var person, _name, $elem, val1; // 가능
var first-name, 1st, this; // 불가능

Reference

본 포스트는 이웅모, 모던자바스크립트 Deep Dive의 4장 내용을 요약 및 재구성한 것입니다.

Leave a comment