하나의 값을 지정 하기 위해 확보한 메모리 공간 자체, 혹은 그 메모리 공간을 식별 하기 위해 붙여진 이름을 말한다. 즉, 값의 위치를 가리키는 상징적인 이름이다.
하나의 값을 지정 하기 위해 확보한 메모리 공간 자체, 혹은 그 메모리 공간을 식별 하기 위해 붙여진 이름을 말한다. 즉, 값의 위치를 가리키는 상징적인 이름이다.
// 변수는 하나의 값을 저장하기 위한 수단이다.
var userId = 1;
var userName = 'Lee';
// 객체나 배열을 사용하면 여러 값을 하나의 값처럼 사용할 수 있다.
var user = { id: 1, name: 'Lee'};
var users = [
{ id: 1, name: 'Lee'},
{ id: 2, name: 'Kim'}
{ id: 2, name: 'Kim'}
];이 때, 메모리 공간인 변수에 저장된 값을 식별할 수 있는 이름을 변수 이름(또는 변수명)이라 한다.
그리고 변수에 저장된 값을 변수 값이라고 한다.
변수에 값을 저장하는 것을 할당(assignment)이라 하고, 그 저장된 값을 읽어들이는 것을 참조(reference)라고 한다.
변수 이름을 식별자(identifier)라고도 한다. 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 낼 수 있어야 한다.
이를 위해 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관례를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.
즉, 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다.
이를 위해 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.
즉, 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다.
식별자라는 용어는 변수이름에만 국한해서 사용하지 않으며, 변수, 함수, 클래스 등의 이름은 모두 식별자이다.
식별자는 네이밍 규칙을 준수해야 하며, 식별자를 지정하는 것을 선언(declaration)이라고 한다.
모든 식별자는 실행 컨텍스트(execution context)에 등록된다.
실행 컨텍스트는 자바스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고, 실행 결과를 실제로 관리하는 영역이다.
이 실행 컨텍스트에 변수명과 변수 값이 key/value 형식인 객체로 등록 되는데, 자세한 내용은 13장, 23장에서 살펴볼 것이다.
변수 선언이란 값을 저장하기 위핸 메모리 공간을 확보(allocate)하고 확보된 메모리 공간의 주소를 연결하는 것이다.
변수 선언에 의해 확보된 메모리 공간은 해제(release)되기 전 까지는 보호될 수 있다.
변수를 선언할 때는 var, let, const 키워드를 사용한다.
변수를 선언할 때는 var, let, const 키워드를 사용한다.
ES6 버전에서 let, const 키워드가 도입되기 이전까지 var이 선언할 수 있는 유일한 키워드였다. 먼저 var만 알아보자.
var 키워드는 뒤에 오는 변수명으로 새로운 변수를 선언할 것을 지시하는 키워드다.
var score; //변수 선언위 변수 선언문은 변수명을 등록하고 값을 저장할 메모리 공간을 확보한다.
아직 변수에 값을 할당하지 았았으므로 확보된 메모리 공간에는 undefined라는 값이 암묵적으로 할당되어 초기화된다.
여기서 undefined는 자바스크립트에서 제공하는 원시 타입의 값이며, 변수 선언은 선언 단계와 초기화 단계가 동시에 일어난다.
만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.
console.log(score); // undefined
var score; // 변수 선언문위의 경우 ReferenceError가 발생할 것 같지만 undefined가 출력된다.
변수 선언이 소스코드가 한 줄씩 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
즉, 자바스크립트 엔진은 변수 선언문을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
그리고 소스코드의 평가 과정을 끝내면 비로소 소스코드를 한 줄씩 순차적으로 실행한다.
이처럼 변수 선언문이 먼저 동작하는 자바스크립트 고유 특징을 변수 호이스팅(variable hoisting)이라고 한다.
변수에 값을 할당(assignment)할 때는 할당 연산자 = 을 사용한다. 이것은 우변의 값을 좌변의 변수에 할당한다.
var score;
score = 80;
//단축 표현
var grade = 'B';다음 예제를 살펴보자.
console.log(score); // undefined
var score; // (1) 변수 선언
score = 80; // (2) 값의 할당
console.log(score); // 80(1)은 런타임 이전에 실행되고, (2)는 런타임에 실행된다. 따라서 score 변수에 값을 할당하기 이전, 이후 값이 다르다.
변수 선언이 단축 표현이어도 두 단계로 분리되어 실행되기 때문에 결과는 같다.
(1)과 (2)의 순서가 바뀌어도 결과는 같다.
재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것을 말한다.
var score = 80;
score = 90;var로 선언한 변수는 값을 재할당 할 수 있다. 만약 값을 재할당 할 수 없다면, 변수가 아니라 상수이다. 상수는 단 한번만 할당할 수 있다.
값을 재할당 한다면, 이전 값(80)이 저장되어 있던 메모리 공간을 지우고, 새로운 메모리 공간을 확보하고 그 공간에 새 값(90)을 저장한다.
이전 값은 가비지 콜렉터(garbage collector)에 의해 메모리에서 자동 해제되며, 언제 해제될지는 예측할 수 없다.
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
- 예약어는 식별자로 사용할 수 없다.
| await | break | case | catch | class | const |
|---|---|---|---|---|---|
| continue | debugger | default | delete | do | else |
| enum | export | extends | false | finally | for |
| function | if | implements | import | in | instanceof |
| interface | let | new | null | package | private |
| proteted | public | return | super | static | switch |
| this | throw | true | try | typeof | var |
| void | while | with | yield |
변수는 쉼표로 구분해 하나의 문에서 여러 개를 한 번에 선언할 수 있지만, 가독성 문제로 권장되지 않는다.
또한 알파벳 외의 유니코드 문자로 명명된 식별자를 사용하는 것도 권장되지 않는다.
자바스크립트는 대소문자를 구별한다. 다음 변수는 각각 별개의 변수이다.
var firstname;
var FirstName;변수명은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 해야하며, 별도의 주석이 필요하다면 목적을 명확히 드러내지 못하는 것이다.
네이밍 컨벤션(naming convention)은 가동성 좋은 식별자를 만들기 위해 규정한 명명 규칙이다.
다음과 같은 4가지 유형의 네이밍 컨벤션이 자주 사용된다.
// 카멜 케이스(camelCase)
var firstName;
// 스네이크 케이스(snake_case)
var first_name;
// 파스칼 케이스(PascalCase)
var FirstName;
// 헝카리언 케이스(typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var obserable$ = fromEvent(document, 'click'); // RxJS 옵저버블일반적으로 자바스크립트는 변수나 함수에는 카멜 케이스, 생성자 함수와 클래스 이름에는 파스칼 케이스를 사용한다.