변수

자바스크립트의 변수

---

1. 변수의 필요성

• 1+2를 계산할 때, 사람은 1과 2와 +의 의미를 기억해서 두뇌로 계산함. -> 컴퓨터는?
• 컴퓨터는 CPU가 연산, 메모리가 기억을 담당
  • 메모리: 데이터를 저장할 수 있는 메모리 셀의 집합
  • 각 셀은 고유의 메모리 주소를 가지며 메모리 공간의 위치를 나타냄.
  • 메모리 저장 값은 모두 2진수로 저장됨
• 메모리에 1과 2를 기억(저장), CPU가 메모리에서 값을 읽어 계산(연산)함
• 이론상 메모리 주소를 통해 메모리 저장 값에 접근할 수 있지만 실제로는 위험함.
• 메모리 주소를 통한 접근이 가능하더라도 메모리 주소는 메모리 상황에 따라 임의 결정 -> 코드 실행 시마다 저장되는 메모리 주소가 다름.
• 변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체. or 메모리 공간을 식별하기 위해 붙인 이름(=변수명)
  • 변수명: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
  • 변수값: 변수에 저장된 값
  • 할당(대입, 저장): 변수에 값을 저장하는 것
  • 참조: 변수에 저장된 값을 읽어 들이는 것
• 변수는 컴파일러/인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨. -> 안전한 메모리 사용 가능

2. 식별자

• 식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 변수, 함수, 클래스 등의 모든 이름이 식별자.
• '어떤 값'은 메모리 공간에 저장되어 있는 값. -> 메모리 저장 값을 식별하기 위해 메모리 주소를 기억(저장)함. 값이 아니라 메모리 주소를 기억.
• 메모리 주소와 매핑 관계를 맺으며 매핑 정보도 메모리에 저장되어야 함

3. 변수 선언

• 변수 선언: 1) 값을 저장하기 위한 메모리 공간을 확보하고 2) 변수 이름과 확보된 메모리 주소를 연결해서 값을 저장할 수 있도록 준비하는 것
  • 확보된 메모리 공간은 해제되기 전까지 다른 곳에서 사용할 수 없도록 보호됨
• 변수 선언의 2단계
  • 1) 선언 단계: 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알림
  • 2) 초기화 단계: 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
• 변수 선언을 위한 키워드는 var, let, const가 있으며 var는 선언과 초기화가 동시에 진행
  • 초기화를 거치지 않으면 확보된 메모리에 이전 애플리케이션이 사용하던 값(쓰레기 값)이 남아있을 수 있음
• 선언하지 않은 식별자에 접근 시 ReferenceError(참조 에러) 발생

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

• 변수 선언은 런타임(소스 코드가 실행되는 시점)이 아니라 그 이전의 평가 단계에서 먼저 실행됨
• 호이스팅: 변수 선언문이 코드의 선두르 끌어올려진 것처럼 동작하는 자바스크립트의 특징
• 변수뿐 아니라 키워드를 사용해 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅됨

5. 값의 할당

• 값의 할당은 런타임에 실행
• var score = 100;에서 변수 선언인 var score는 호이스팅되지만 값의 할당인 100은 나중에 런타임에서 실행
• 변수 선언 시점에서 해당 변수에는 undefined가 자동으로 값이 할당되어 초기화됨 -> 런타임에서 값을 할당하는 것은 해당 값을 새로운 메모리 공간을 확보하고 값을 저장함. 해당 메모리 주소와 변수명을 새로 매핑하는 것

6. 값의 재할당

• var 키워드로 선언한 변수는 값을 재할당할 수 있음.
• 자바스크립트는 변수 선언 후 기본적으로 undefined로 초기화하므로 모든 값 할당 행위는 실제로는 재할당하는 것
• 재할당도 새로운 메모리 공간을 확보해 값을 저장함. -> 기존 값은 사용하지 않으므로 쓰레기 값이 됨 -> 가비지 콜렉터가 자동 해제함(해제 시기는 예측 불가능)
  • 매니지드 언어: 자바스크립트와 같이 메모리 관리 기능을 언어 차원에서 담당함. 개발자가 명시적으로 메모리 할당/해제가 불가능함.
  • 언매니지드 언어: C와 같이 메모리 관리를 개발자가 담당. 개발자가 명시적으로 메모리를 할당/해제해야 함.

7. 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음
• 식별자는 숫자로 시작할 수 없음
• 예약어는 식별자로 사용할 수 없음
• 쉼표를 이용해 변수 동시 선언이 가능하지만 권장 X
• 알파벳 외의 유니코드 문자(한글, 일본어 등)의 식별자 사용은 권장 X
• 자바스크립트는 대소문자를 구분함
• 변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있어야 함(별도의 주석이 필요하다면 좋지 않은 네이밍)
• 네이밍 컨벤션: 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 구분하기 위해 규정한 명명 규칙
  • 카멜 케이스: var firstName
  • 스네이크 케이스: var first_name
  • 파스칼 케이스: var FirstName
  • 헝가리안 케이스: var strFristName // type + identifier, var $elem = document.getElementById('myId') // DOM 노드, var observable$ = fromEvent(document, 'click') // RxJS 옵저버블
• 일반적으로 자바스크립트에서는 카멜 케이스(변수, 함수)와 파스칼 케이스(생성자 함수, 클래스)를 사용함

---

용어
키워드: 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어
초기화: 변수가 선언된 이후 최초로 값을 할당하는 것
예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 언어.(ex: await, break, case, if, var 등)