04장 변수
4.1 변수란 무엇인가? 왜 필요한가?
- 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉, 값의 위치를 가리키는 상징적인 이름.
변수에 값이 저장 되는 것이 아니라, 값이 저장된 메모리값(0x0669F913)을 저장된다.
var result = 10 + 20;
// result가 [변수 이름], 변수에 저장된 값 30을 [번수 값]4.2 식별자
- 식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 값이 아니라 메모리 주소를 기억.
변수 이름에만 국한에서 사용하지 않고, [변수, 함수, 클래스 등]의 이름 모두 식별자라고 함.
4.3 변수 선언
- 변수 선언 : 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보한 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것.
변수를 사용하려면 반드시 선언이 필수임.
변수를 선언할 때는var, let, const키워드를 사용함. (let, const 키워드는 ES6에서 도입됨)
var score; <자바스크립트 엔진의 변수 선언 2단계>
1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.
만약, 선언 하지 않은 식별자를 참조하면 ReferenceError(참조에러)가 발생한다.
4.4 변수 선언의 실행 시점과 변수 호이스팅
console.log(sum); //undefined
var sum; // 변수 선언문
// 변수 선언전이기 때문에 참조에러가 나올거라 예상하지만, undefined가 출력된다.- 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 undefined가 나오는 것이다. 이러한 현상을 변수 호이스팅이라고 한다.
- 변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.
var, let, const, function, function*, class키워드로 선언한 모든 식별자는 호이스팅 된다. 모든 선언문은 런타임 이전에 먼저 실행되기 때문.
4.5 값의 할당
var score; // 변수 선언
score = 100; // 값의 할당
var score = 100; // 변수 선언과 값의 할당변수 선언과 값의 할당의 실행 시점
- 변수 선언 : 런타임 이전에 먼저 실행
- 값의 할당 : 런타임에 실행
console.log(score); // undefined
var score; // 변수 선언
score = 80; // 값의 할당
console.log(score); // 80변수 선언과 값의 할당을 하나의 문으로 단축하거나 2개의 문으로 나누어도 변수에 undefined 할당되는 것은 변함이 없다.
변수에 값을 할당 할 때에는 새로운 메모리 공간을 확보하고, 그곳에 할당 값 80을 저장하는 것이다.
즉, 메모리 주소 값이 바뀐다.
4.6 값의 재할당
var score = 50; // 변수 선언과 값의 할당
score = 70; // 값의 재할당- 재할당 : 변수에 저장된 값을 다른 값으로 변경하는 것. (=변수)
var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화 되기 때문에 엄밀히 말하자면 변수에 처음으로 값을 할당하는 것도 사실은 재할당이다. - 상수 : 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없음.
- 값을 재할당하여 이전의 값을 아무도 사용하고 있지 않으면 가비지 콜렉터에 의해 메모리에 자동 해제 된다.
4.7 식별자 네이밍 규칙
- 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함 할 수 있다.
- 단, 특수문자를 제외한 문자, 언더스코어(_), 달러기호($)로 시작해야 한다. 숫자로 시작할 수 없다.
- 예약어(ex. await, this, case, if ...)는 식별자로 사용할 수 없다.
- 변수는 쉼표(,)로 구분해 하나의 문에서 여러개를 한번에 선언할 수 있지만 가독성이 나빠 권장하지 않는다.
var person, $elem, _name, first_naem, val1;- ES5부터 유니코드 문자를 허용하므로 한글이나 일본어 식별자도 사용할 수 있지만, 권장하지 않는다.
var 이름; // 권장xx- 하이픈(-), 숫자로 시작, 예약어는 사용할 수 없다.
var first-name;
var 1st;
var this;- 자바스크립트는 대소문자를 구별한다.
var firstname;
var firstName;
var FIRSTNAME;- 변수의 목적을 쉽게 이해 할 수 있게 명확히 표현해야 한다.
var x = 3; // x변수의 의미 짐작 x
var score = 100; // score 변수는 점수를 의미4가지 네이밍 컨벤션
카멜 케이스(camelCase) : 주로 변수나 함수의 이름에 많이 사용
var firstName;
스네이크 케이스(snake_case)
var firstName;
파스칼 케이스(PascalCase) : 주로 생성자 함수나 클래스의 이름에 많이 사용
var FirstName;
헝가리언 케이스(typeHungarianCase)
var strFirstName; // type + identifier var $elem= document.getElementById('myId'); // DOM 노드 var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블
