해당 게시물은 "모던자바스크립트 Deep Dive(위키북스)" 저서를 참고 및 인용 하였음을 알려드립니다.

🔎  변수

🔖  1.  변수란 무엇인가?

• 컴퓨터는 CPU를 사용하여 연산, 메모리를 사용하여 데이터를 기억 한다.
• 데이터는 메모리셀에 저장되며 각 셀은 고유한 메모리 주소를 갖는다.
• 저장된 데이터 재사용을 위해서는 메모리 주소에 직접 접근해야 한다.
• 메모리 주소를 통해 값에 직접 접근할 경우 🚫치명적 오류 발생 가능성이 높다.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

따라서 변수(variable)란 저장된 값을 읽어 들여 재사용하기 위해 상징적으로 이름을 붙인 것이다.

할당(assignment) 변수에 값을 저장하는 것
참조(reference) 변수에 저장된 값을 읽어 들이는 것

---

🔖  2.  식별자

• 값을 구별하는 고유한 이름
• 값이 저장되어 있는 메모리 주소를 기억
• 변수, 함수, 클래스 포함

---

🔖  3.  변수선언

var score; // 변수 선언(변수 선언문)

• 변수의 생성
• 메모리 공간 확보, 변수 이름과 메모리 주소 연결
• var, let, const 키워드 사용
• var를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시 진행

• 선언 단계 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계 메모리 공간을 확보하고 undefined를 할당해 초기화

• 초기화 단계를 거치지 않으면 확보한 메모리 공간에 이전에 사용했던 애플리케이션의 값이 남아 있을 수 있다. 이러한 값을 🗑쓰레기 값(garbage value)라고 한다.
• 메모리 공간을 확보한 다음, 값을 할당하지 않은 상태에서 변수 값을 참조하면 🗑쓰레기 값이 나올 수 있다.

---

🔖  4.  실행 시점과 변수 호이스팅

referenceError❓ undefined ❓

console.log(score); // undefined
var core; // 변수 선언문

• 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순처적으로 진행
• 변수 선언은 runtime 이전 단계에서 "우선" 실행
• 소스코드 실행준비단계(평가 과정)에서 자바스크립트 엔진이 모든 선언문을 찾아내 "우선" 실행
• var, let, const, function, function*, class로 선언하는 모든 식별자는 hoisting 된다.

runtime 소스코드가 한 줄씩 순차적으로 실행되는 시점
hoisting 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유한 특징

💡 선언과 할당이 하나의 문으로 되어있는 경우

• 선언 부분만 위로 끌어올라가고 할당 부분은 그대로 유지

fuction foo(){
  consol.log(a); // undefined
  var a = 100;
  console.log(a); // 100
}

foo();

---

🔖  5.  값의 할당

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

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

• 우변의 값을 좌변의 변수에 할당
• 하나의 문으로 단축표현해도 변수선언과 값의 할당이 각각 실행

console.log(score) // undefined

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

console.log(score); // 80

• ⏰ 변수 선언과 값의 할당의 실행 시점이 다르다.

변수 선언 런타임 이전에 먼저 실행
값의 할당 런타임에 실행

---

🔖  6.  값의 재할당

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

• var 키워드는 선언한 변수의 값을 재할당 가능
• 값을 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 새롭게 저장되는 것이 아니라 새로운 메모리 공간을 확보하고 그 공간에 저정된다.

---

🔖  7.  식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달라표시($)를 포함할 수 있다.
• 단, 숫자로 시작하는 것은 허용되지 않는다.
• 예약어는 식별자로 사용할 수 없다.

📌 예약어

📌 네이밍 컨벤션(naming convention)

• 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙

// 카멜 케이스(camelCase)
var firstName; 

// 스케이크 케이스(snake_case)
var firt_name; 

// 파스칼 케이스(PascalCase)
var FirstName; 

// 헝가리언 케이스(typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

• "변수, 함수" → 카멜 케이스(camelCase)
• "생성자 함수, 클래스" → 파스칼 케이스(PascalCase)