[자바스크립트 Deep Dive] 4. 변수

4.1 변수란 무엇인가? 왜 필요한가?

• 표현식 평가 시, 메모리에서 데이터(피연산자)를 기억(저장)하고 CPU에서 연산을 수행함
  -> 데이터 관리(저장/참조)를 위해 변수가 활용됨

변수

• 값이 저장된 메모리 공간에 붙여진 이름(식별자)
• 하나의 값을 저장하기 위한 메커니즘

-> 메모리 주소 대신 변수를 통해 값에 안전하게 접근 가능함
cf) 코드 실행 시, 컴파일러 or 인터프리터에 의해 변수는 메모리 주소로 치환됨

cf) 하나의 변수에 여러 개의 값을 저장하려면, 배열 or 객체와 같은 자료구조를 사용하면 됨

메모리

데이터를 저장할 수 있는 메모리 셀의 집합체

메모리 셀

• 크기: 1바이트(8비트)
  -> 컴퓨터는 1바이트 단위로 데이터를 읽고 저장하며, 저장되는 데이터는 이진수임
  cf) 1바이트(B) = 1비트 * 8, 1비트(b): 이진수 한 자리(0 or 1)
• 메모리 주소: 메모리 공간의 위치

4.2 식별자

• 메모리 상의 어떤 값(함수/클래스 포함)을 식별할 수 있는 고유한 이름
• 값이 저장된 메모리 주소와 매핑 관계를 맺음
  -> 식별자는 값이 아니라 메모리 주소를 기억함
  -> 메모리 주소를 통해 해당 메모리에 저장된 값에 접근하는 것

4.3 변수 선언

• 변수를 생성하는 것
• 메모리 공간을 확보하고, 변수명과 해당 메모리 공간을 연결함으로써 값을 저장할 수 있도록 하는 것

var result;

1. 선언 단계: 실행 컨텍스트에 변수명을 등록하는 과정
2. 초기화 단계: 해당 변수명과 매핑될 메모리 공간을 확보하며, 초기값이 할당되는 과정
   cf) 다른 어플리케이션에서 사용했던 값이 남아 있을 수 있기 때문에 진행됨
   cf) let/const 변수는 초기값이 할당되지 않음

cf) var 변수는 선언과 초기화가 동시에 이루어짐. 변수명 등록 후, JS 엔진에 의해 undefined가 암묵적으로 할당되어 초기화 됨

ES5 vs ES6

• ES6은 ES5를 기반으로 새로운 기능이 추가된 것임
• var 키워드의 단점을 보완하기 위해 ES6 에서 let/const 키워드가 도입됨
  e.g. 함수 레벨 스코프를 따름 -> 의도치 않게 전역 변수가 선언될 수 있음

if (true) {
  var result = 0;
}
console.log(result); // 0

cf) 키워드: JS 엔진이 수행해야 할 동작을 규정하는 명령어

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

• 호이스팅으로 인해 런타임 이전에 변수 선언이 일어나고, 런타임에는 그들을 제외한 나머지 코드가 한 줄씩 순차적으로 실행되게 됨

호이스팅: 선언문이 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것

• 모든 식별자는 호이스팅 됨
  -> 선언문의 위치와 관계 없이 식별자에 접근할 수 있게 됨 (let/const 변수 제외 ∵ TDZ에서 초기화가 되지 않음)

console.log(result); // undefined
console.log(func); // ƒ func() {}
function func() {}
var result;

4.5 값의 할당

• 변수 선언은 런타임 이전에 일어나지만, 새로운 값의 할당은 런타임에 발생됨
• 기존 메모리 공간이 아닌 새로운 메모리 공간을 확보하여 값을 저장함

console.log(result); // undefined
var result = 0;
console.log(result); // 0

console.log(result); // undefined
result = 0;
var result;
console.log(result); // 0

4.6 값의 재할당

• 기존 메모리 공간이 아닌 새로운 메모리 공간을 확보하여 값을 저장함
  • 기존 메모리 공간은 더 이상 어떠한 식별자와도 연결돼있지 않음
    -> JS의 garbage collector에 의해 해제됨
    cf) garbage collector: 더 이상 사용되지 않는 메모리 공간을 해제하는 기능 -> 메모리 누수 방지

cf) const 변수는 값의 재할당이 불가능함

4.7 식별자 네이밍 규칙

• 특수문자를 제외한 문자/숫자/언더스코어(_)/달러($)를 사용할 수 있음
• 숫자로 시작할 수 없음
• 예약어를 사용할 수 없음 e.g. new, this...
  cf) 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어

• 존재 목적을 쉽게 이해할 수 있도록 명명해야 함

네이밍 컨벤션

var camelCase; // 카멜 케이스
var snake_case; // 스네이크 케이스
var PascalCase; // 파스칼 케이스
// 헝가리언 케이스
var $elem;
var strHungarianCase;

• JS에서는 주로 카멜 케이스/파스칼 케이스를 사용함