📒 [Deep Dive] 04. 변수

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

애플리케이션은 데이터를 입력(input)받아 처리하고 그 결과를 출력(output)함.
변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념.

[예제 04-01]

10 + 20

자바스크립트 엔진이 [예제 04-1]코드를 평가(계산) 하려면 10,20,+라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하고 10 + 20이라는 표현식의 의미도 파싱(해석)할수 있어야함.

• 컴퓨터는 CPU를 사용해 연산, 메모리를 사용해 데이터를 기억.
  • 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체.
    • 메모리셀 하나의 크키 : 1바이트(8비트). 1바이트 단위로 데이터를 저장하거나 읽음.
      컴퓨터는 모든 데이터를 종류 상관없이 모두 2진수로 저장. (하단 그림은 편의상 10진수로 표기)
    • 각 셀은 고유의 메모리 주소를 가짐 -> 메모리 공간의 위치
      메모리 주소는 메모리 크기만큼 정수로 표현됨 : 0x00000000 ~ 0xFFFFFFFFF
      (e.g. 4GB메모리 : 0~4,294,967,295)
• [예제 04-1]의 숫자 10과20은 임의의 메모리 주소(위치)에 저장되고 CPU는 이 값을 읽어 들여 연산 수행한뒤 결과 값인 30도 임의의 메모리 주소에 저장.
  • 연산과 연산결과가 메모리에 저장 되었지만 재사용 할 수 없음.
    • 재사용 하려면 메모리 주소에 직접접근 해야지만 치명적인 오류를 발생시킬 가능성이 매우 높음.
    • 값이 저장될 메모리 주소는 코드가 실행될 때마다 메모리 상황에따라 임으로 결정됨.
      -> 실행될 때마다 값이 저장될 메모리 주소는 변경.

프로그래밍 언어는 기억하고 싶은 값은 메모리에 저장하고 값을 읽어 재사용하기 위해 변수라는 메커니즘을 제공.
개발자가 메모리 주소에 직접 접근할 필요가 없고 변수를 통해 안전하게 값에 접근.

📌 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체를 식별하기 위해 붙인 이름.
--> 값의 위치를 가리키는 상징적인 이름.

[예제 04-02]

var result = 10 + 20;

• [예제 04-2] 코드는 연산을 통해 생성된 값 30은 메모리공간에 저장되고 이 메모리 공간에 저장된 값 30을 다시 읽어 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 변수.
  • result: 변수명.(변수 이름)
  • 30 : 변수 값.
  • 변수에 값을 저장하는 것 : 할당.(대입, 저장)
  • 변수애 저장된 값을 읽어 들이는 것 : 참조.
• 변수 이름은 변수에 저장된 값은 의미를 파악할수 있게 지어서 개발자의 의도를 명확하게 이해할수있게 함 -> 가독성을 높이고 협업과 품질 향상에 도움을 줌.

4.2 식별자

• 식별자
  • 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 내야하고 어떤 값이 저장되어 있는 메모리 주소를 기억.
    • 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미.
  • 메모리 주소에 붙인 이름.(변수, 함수, 클래스 등의 이름)
• 위 그림에서 식별자 result는 값 0이 저장되어있는 메모리 주소 0x0669F913을 기억해야함.
  식별자는 값이 저장되어있는 메모리 주소와 매핑 관계. 이 매핑 정보도 메모리에 저장.
• 변수, 함수, 클래스 등의 이름(식별자)은 네이밍 규칙('4.7 네이밍 규칙'참고)을 준수해야 하며 선언을 통해 자바스크립트 엔진에 식별자의 존재를 알림.

4.3 변수 선언

• 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비.
  확보된 메모리 공간은 확보가 해제되기 전까지는 아무도 사용할수 없도록 보호 됨.
• 변수 선언 키워드
  (키워드는 수행할 동작을 규정한 명령어. var 키워드는 새로운 변수를 생성할 것을 지시.)
  • var
    • 단점('15.1 var 키워드로 선언한 변수'참고) : 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원해 의도치 않게 전역 변수가 선언되어 부작용 발생.(Scope 스코프)
    ↓ ES6에서 도입 -> var 키워드의 여러 단점 보완.
  • let
  • const

[예제 04-03]

var score; // 변수 선언문

• [예제 04-03]는 다음과 같이 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보.
  • 모든 식별자(변수포함)는 실행 컨텍스트에 등록됨.
    • 실행 컨텍스트 : 식별자와 스코프 관리.
      자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경 제공, 코드의 실행 결과를 실제로 관리하는 영역.
    • 변수 이름과 변수 값은 실행 컨텍스트 내에 키(key)/값(value)형식인 객체로 등록되어 관리.

• var 키워드의 변수 선언의 단계
  var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행.
  • 선언 단계 : 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알림.
    • [예제 04-03], 그림 : 변수 이름 score 등록.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적을로 undefined(원시 타입의 값)를 할당해 초기화.
    • [예제 04-03], 그림 : score변수에 undefined 할당.
    • 변수가 선언된후 최초로 undefined 값을 할당.
      ㄴ 어떠한 값을 할당하지 않아도 undefined라는 값을 갖짐.
    • 쓰레기 값 : 초기화 단계를 거치지 않으면 확보된 메모리 공간에 이전에 사용했던 값.
      ㄴ 변수 선언후 바로 사용시 쓰레기값이 나올 수 있어 var키워드는 암묵적으로 초기화를 진행을 해 안전함.
• ReferenceError(참조에러) : 선언하지 않은 식별자에 접근하면 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 실별자를 찾을 수 없을 때 발생하는 에러.
  

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

자바스크립트 엔진은 런타임이 실행되기전 소스평가과정(23.2'소스코드의 평가와 실행'참고)에서 모든 선언문을 실행한 뒤 선언문을 제외하고 소스코드를 순차적 실행함.

• 런타임 : 자바스크립트 코드가 인터프리터(2.5'자바스크립트의 특징'참고)에 의해 한줄씩 순차적으로 실행되는 시점.

📌 변수 호이스팅 :
변수 선언문이 런타임 이전단계에서 실행됨 -> 코드의 선두로 끌어 올려진 것처럼 동작하는것처럼 보이는 자바스크립트 고유의 특징.

즉, 자바스크립트 엔진이 런타임 이전인 소스평과가정에서 변수 선언문을 포함한
모든 키워드(var, let, const, function, function*, class)를 사용해 선언하는
모든 식별자는 호이스팅이 됨.

4.5 값의 할당

[예제 04-04]

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

// 단축문
var score = 80; // 변수 선언과 값의 할당

연산자 =를 사용해 우변의 값을 좌변의 변수에 할당(대입, 저장)함.
변수 선언과 값의 할당을 나누어 표현한 코드와 하나로 단축한 코드는 2개문으로 각각 나누어 동일하게 동작.
변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 런타임에 실행되기 때문.

[예제 04-05]

console.log(num); // 2. undefined

num = 10;  // 3. 값의 할당 : 런타임에서 순차적으로 진행
var num;  // 1. 변수 선언 : 런타임 보다 먼저 실행(호이스팅)

console.log(num); // 4.100

• [예제 04-05] 코드 실행 과정

  1. var num; 식별자 num에 undefined로 초기화된 메모리 공간 주소 저장.

  2. console.log(num); undefined 출력.

  3. var num; num에 10을 할당한 새로운 메모리 공간 주소 저장.

  4. console.log(num); 10 출력.

4.6 값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당. -> 다른값으로 변경되기 때문에 변수.
변수는 선언과 동시에 undefined로 초기화되기 때문에 처음 값을 할당하는 것도 사실은 재할당.
상수(const) : 값이 재할당이 안되서 변수에 저장된 값을 변경할 수 없음.

• 값의 재할당 과정

  1. 변수선언 전

  2. 변수 선언 :
     값을 저장하기 위해 일정 크기의 메모리 공간 확보(다른 프로그램 이 공간을 사용,침해 X).
     undefined를 할당해 초기화.
     확보된 메모리 공간의 주소를 num이 기억

  3. 값의 할당 :
     undefined 가 저장되어 있던 메모리공간을 지우고
     새로운 메모리 공간을 확보해 10을 할당하고 새로운 메모리 공간 주소를 num이 기억.

  4. 값의 재할당 :
     10이 저장되어 있던 메모리 공간을 지우고
     새로운 메모리 공간을 확보해 1000을 할당하고 새로운 메모리 공간 주소를 num이 기억.

• num의 이전 값인 undefined과 10은 더 이상 필요가 없어 가비지 콜렉터에 의해 메모리에서 자동해제가 되나 언제 해제될지는 예측할수 없음.

  • 가비지 콜렉터 : 할당되었던 메모리 공간을 주기적으로 검사하요 더 이상 사용되지 않는 모리를 해제하는 기능. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어.

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호를 포함할 수 있음.
• 단 숫자로 시작하는 것은 허용하지 않음.
• 예약어는 식별자로 사용할 수 없음.
• 쉼표로 구분해 여러 개 한번에 선언 가능, 유니코드 문자 허용 (둘다 권장하지 않음).
• 대소문자를 구분.
• 존재 목적을 쉽게 이해할 수 있돌록 의미를 명확히 표현. -> 코드의 가독성을 높임.

[네이밍 컨벤션]

// 카멜 케이스 | camelCase (가장많이 사용)
var firstName;

// 스네이크 케이스 | snake_case
var first_name;

// 파스칼 케이스 | PascalCase (생성자함수, 클래스)
var FirstName;

// 헝가이언 케이스(typeHungarianCase)
var strFirstName;
var $elem = document.getElementBId('myId'); // DOM노드 (jQuery)
var observable$$ = fromEvent(document, 'click'); // RxJS 옵져버블

📌 ECMAAScript사양에 정의되어 있는 객체와 함수들도 카멜 케이스와 파스칼 케이스를 사용함으로 카멜 케이스와 파스칼 케이스를 따르는 것이 유리함.

---

👩‍💻 STUDY 관리

1. Notion | 모던 자바스크립트 Deep Dive 공부 계획과 진행률
2. GitHub | 코드소스 관리

📍출처 및 참고

원문 출처: [책] 모던자바스크립트 DeepDive
책 지은이 블로그: https://poiemaweb.com/
책 지은이 유튜브: https://www.youtube.com/c/poiemaweb/playlists
FE재남 실무자의 책 요점 유튜부 : https://www.youtube.com/playlist?list=PLjQV3hketAJnP_ceUiPCc8GnNQ0REpCqr