04. 변수
메모리(Memory)
데이터를 저장할 수 있는 메모리 셀의 집합체다.
메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 1바이트단위로 데이터를 저장하거나 읽는다. 각 셀은 고유의 메모리 주소를 갖는다.
컴퓨터는 모든 데이터를 2진수로 처리하며 메모리에 저장되는 데이터는 모두 2진수로 저장된다.
메모리 주소를 통해 값에 직접 접근하는 것은 매우 위험한 일이므로 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
변수
하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다.
기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용할 수 있다.
🟩 변수는 하나의 값만 저장할 수 있으므로 여러개의 값을 저장하려면 여러개의 변수를 사용해야 한다. 단, 배열이나 객체 같은 자료구조를 사용하면 여러 개의 값을 그룹화하여 하나의 값처럼 사용 가능하다.
let result = 10 + 20
// result는 변수명이고 10+20은 변수 값이다.### 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름이자, 메모리 주소에 붙인 이름이다.
🟩 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 낼 수 있어야 한다. 그러므로, 식별자는 값이 아니라 메모리 주소를 기억해야 한다.
변수 선언
변수를 생성하는 것.
var, let, const 키워드를 사용한다.
var
블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원.
의도치 않게 전역변수가 선언되어 심각한 부작용 발생할 수 있다.
❓키워드(Keyword) : 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어. 예를 들어, let 키워드를 만나면 뒤에 오는 변수 이름으로 새로운 변수를 선언함.
변수 선언 단계
- 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.
✨ 확보된 메모리 공간에는 쓰레기 값(garbage value)이 남아 있을 수 있으므로!
❓ 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다.
실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
변수 및 모든 식별자는 반드시 선언이 필요하다. 만약, 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.
- ReferenceError : 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러
변수 선언의 실행 시점과 변수 호이스팅
console.log(score) // undefined
let score; // 변수 선언문자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행 된다.
변수 선언이 소스코드가 순차적으로 실행되는 시점인 런타임이 아니라 그 이전 단계에서 먼저 실행 된다.
그러므로 참조 에러가 아닌undefined이 출력 된다.
자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수, 함수 선언문)을 소스코드에서 찾아내 먼저 실행한다. 그 후에 변수 선언을 포함한 모든 선언문을 제외한 소스코드를 한 줄 씩 순차적으로 실행한다.
따라서 변수 선언은 어디서든지 참조할 수 있다.
🔑 변수 호이스팅 : 변수 선언문(모든 선언문)이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
값의 할당
let score; // 변수 선언
score = 80; // 값의 할당❗️ 변수 선언과 값의 할당 실행 시점이 다르다.
- 변수 선언 : 런타임 이전 실행
- 값의 할당 : 런타임에 실행
console.log(score) // undefined
let score; // 변수 선언
score = 80; // 값의 할당
console.log(score) // 80먼저 변수 선언 완료 후, undefined로 값이 할당(초기화)되며, 그 후 값을 할당하면 새로운 값으로 재할당된다.
If, 값을 먼저 할당하고 그 후에 변수를 선언하게 되면 참조 에러가 뜬다.
값의 재할당
let score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당변수 : 값을 재할당할 수 있다.
상수 : 한 번만 할당할 수 있는 변수.
ES6에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지 된다.
즉, 상수를 표현할 수 있다.
변수를 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 새로운 메모리 공간을 확보하여 새로운 값을 저장한다. 재할당 후 이전 값들은 `가비지 콜렉터`에 의해 메모리에서 자동 해제 된다.
🟢 가비지 콜렉터 : 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능. 메모리 누수를 방지할 수 있다.
🟢 매니지드 언어 : 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다. 가비지 콜렉터가 그 역할을 수행한다. ( <-> 언매니지드 언어 )
식별자 네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), $를 포함할 수 있다.
- 특수문자를 제외한 문자, 언더스코어(_), $로 시작해야 한다. 숫자 시작은 허용 X
- 예약어는 식별자로 사용할 수 없다.
🔗 네이밍 컨벤션 : 식별자를 가독성 좋게 구분하기 위한 명명 규칙
- 카멜 케이스 : 변수, 함수 이름에 사용
- 파스칼 케이스 : 생성자 함수, 클래스 이름에 사용
let firstName; // 카멜 케이스
let first_name; // 스네이크 케이스
let FirstName; //파스칼 케이스
let strFirstName; // type + identifire
