JavaScript

변수(var, let, const) + feat.메모리

foxlee 2021. 12. 16. 16:25

변수

  • 하나의 값을 저장하기 위해 확보된 메모리 공간/ 그 공간을 식별하기 위한 이름
  • 값의 위치(메모리 주소)를 가리킴
  • 개발자는 메모리 주소가 아닌 변수를 통해 값에 접근
  • 하나의 값 또는 여러개의 값이 그룹화된 값(배열, 객체)

메모리

  • 메모리 셀 하나의 크기는 1바이트(8비트), 컴퓨터는 1바이트 단위로 데이터 저장, 읽기
  • 값은 고유의 메모리 주소를 가짐
  • 모든 데이터는 2진수로 저장됨

변수-메모리-값

var result = 10 + 20;
// 10과 20이 각각 다른 메모리 공간에 먼저 저장되고
// cpu를 통해 계산된 30이 다른 공간에 저장됨
// result 변수는 30이 저장된 *메모리 위치*를 가르키는(식별하는, 기억하는) 식별자

var result = 30; // 할당 : 변수에 값을 저장하는 것
console.log(result) // 참조 : 변수에 저장된 값을 읽는 것

// 사용자가 변수 사용 시 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환
  • 변수 이름을 통해 값의 의미를 알 수 있고, 가독성을 높이기 위해 네이밍 규칙을 준수하자

  • 변수의 선언 과정
var score; // 변수 선언문
// 1. 변수가 매핑된 메모리 공간 확보
// 2. 확보한 공간에 undefined 값으로 할당(초기화)
// 3. 변수는 실행 컨텍스트에 등록
  • 변수 선언의 실행, 호이스팅
console.log(score); // undefined
var score;
// 위와 같이 참조가 선언보다 먼저 실행된다.
// 에러가 아닌 undefined 가 출력됨
// * 변수 선언은 런타임(소스코드가 한 줄씩 순차적 실행)이 아닌 그 단계에서 먼저 실행된 후
// * 초기화 과정을 통해 undefined가 할당됨

* 변수의 선언, 할당 및 재할당
var score = 80; // 변수 선언과 값의 할당
score = 90;     // 값의 재할당

// 1. score - 메모리 주소 a - 메모리 공간 (undefined)  = 변수 선언 및 초기화
// 2. score - 메모리 주소 b - 메모리 공간 (80)  = 값 할당
// 3. score - 메모리 주소 c - 메모리 공간 (90)  = 값 재 할당
// a,b 주소의 메모리 공간들은 가비지 콜렉터에 의해 메모리를 해제하여 메모리 누수를 방지함
  • const, let 변수 선언과의 차이점
// var 중복 선언 가능
var x = 1;
var y = 1;

var x = 100;
var y; // 무시함

console.log(x); // 100
console.log(y); // 1

=======================
// var 의 부작용
var x = 1;

if (true) {
  var x = 10;  // 전역 변수 x의 값이 변경되는 부작용
}

console.log(x); // 10

================
// let. const 같은 스코트 내 재선언 불가능

let bar = 123;
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

// 런타임 이전에 선언 단계가 실행되나(호이스팅) 아직 변수가 초기화되지 않음.
// 초기화 이전에는 참조 불가능 - var과 다른점
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

=====================
let foo = 1; // 전역 변수

{
// let의 호이스팅은 일어나는 것을 알 수 있음
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  let foo = 2; // 지역 변수
}

let letX = 1;
var Varx = 1;

// var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티
console.log(window.Varx); // 1

// let, const 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아님
console.log(window.letX); // undefined
console.log(letX); // 1