1. 변수란 무엇인가? 왜 필요한가?
변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고, 변수를 통해 안전하게 값을 접근할 수 있다.
변수이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다.
변수 값 : 변수에 저장된 값
할당 : 변수에 값을 저장하는 것
참조 : 변수에 저장된 값을 읽어 들이는 것
2. 식별자
식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름
값이 아닌 메모리 주소를 기억하고 있다.
3. 변수 선언
변수 선언 : 변수를 생성하는 것
- 값을 저장하기 위한 메모리 공간을 확보한다.
- 변수 이름과 확보된 메모리 공간의 주소를 연결
- 값을 저장할 수 있게 준비하는 것
자바스크립트 엔진의 변수 선언
- 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.
undefined : 자바스크립트에서 제공하는 원시 타입의 값
변수 이름은 어디에 등록 되는가?
모든 식별자는 실행컨텍스트에 등록된다.
실행 컨텍스트 : 자바스크립트엔진이 소스코드를 평가, 실행하기 위해 필요한 환경을 제공하고, 코드의 실행 결과를 관리하는 영역
초기화 : 변수가 선언된 이후 최초로 값을 할당하는 것
ReferenceError(참조에러) : 식별자를 통해 값을 참조하려 했지만, 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러
4. 변수 선언의 실행 시점과 변수 호이스팅
console.log(a); // undefined
var a; // 변수 선언문인터프리터인데 왜 ReferenceError(참조에러)가 아닌 undefined가 나타나는 것인가?
런타임이 아니라 이전 단계에서 먼저 실행되기 때문이다.
자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징
5. 값의 할당
var a; // 변수 선언
a = 80; // 값의 할당
var b = 90; //변수 선언 & 값의 할당자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다.
실행 시점 주의
변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행된다.
값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
console.log(a); // undefined
var a; // 변수 선언
a = 80; // 값의 할당
console.log(a) // 806. 값의 재할당
재할당 : 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당을 하는 것
상수 : 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없는 것
let a = 10;
a = 20; // 20
const b = 10;
b = 20; // TypeError: Assignment to constant variable.
let a = 80;
a = 90;위의 코드에 따른 메모리 확보하는 그림이다.
위의 그림을 보면 최종적으로 undified 와 80 은 어떠한 식별자와도 연결되어 있지 않다.
이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제 된다.
단, 메모리에서 언제 해제될지는 예측할 수 없다.
가비지 콜렉션 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능.
메모리 관리 방식에 따른 분류
언매니지드 언어
- 개발자가 명시적으로 메모리를 할당하고 해제할 수 있는 메모리 제어 기능을 제공한다.
- 장점 : 개발자의 역량에 따라 최적의 성능을 확보할 수 있다.
- 단점 : 그 반대의 경우 치명적 오류를 생산할 가능성이 있다.
매니지드 언어
- 개발자가 명시적으로 메모리를 할당하고 해제할 수 없다.
- 더 이상 사용하지 않는 메모리의 해제는 가비지 콜렉터가 수행한다.
- 장점 : 개발자의 역량에 의존하는 부분이 상대적으로 작아져 어느 정도 일정한 생산성을 확보
- 단점 : 성능 면에서 어느 정도의 손실은 감수 할 수 밖에 없다.
7. 식별자 네이밍 규칙
식별자 : 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름
네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- 숫자로 시작하는 것은 허용하지 않는다.
- 예약어는 식별자로 사용할 수 없다.
예약어 : 프로그래밍 언어에서 사용되고 있거나, 사용될 예정인 단어. ex) function, var, let ...
네이밍 컨벤션 : 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위한 규정한 명명 규칙
// 카멜 케이스(camelCase)
let firstName;
// 스네이크 케이스(snake_case)
let firstName;
// 파스칼 케이스(PascalCase)
let FirstName;
// 헝가리언 케이스(typeHungarianCase)
let strFirstName; // type + identifier
let $elem = document.getElementByIm('myId'); // DOM 노드
let observable$ = fromEvent(document, 'click') // RxJS 옵져버블일반적인 네이밍 컨벤션
변수, 함수 = 카멜 케이스
생성자 함수, 클래스 = 파스칼 케이스
