21.05.28
책 모던 자바스크립트 Deep Dive 내용을 정리했습니다.
변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JavaScript 고유의 특징을 변수 호이스팅(Hoisting)이라고 한다.
변수 선언의 실행 시점과 호이스팅
아래 코드를 살펴보자.
console.log(score); // undefined
var score; // 변수 선언문
console.log(score)가 실행되는 시점에 score라는 변수는 선언되기 이전이라 얼핏 보기에는 Reference Error(참조 에러)가 발생할 것 같지만 undefined가 출력된다.
- 이유 : 변수 선언은 Runtime에 실행되는 게 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
JS엔진은 소스코드를 실행하기에 앞서 평가 과정을 거치면서 변수 선언을 포함한 모든 선언문을 먼저 실행한다.
값의 할당
변수에 값을 할당할 때는 연산자 '=' 를 사용한다.
var score; // 선언
score = 80; // 할당
var score = 80; // 선언과 동시에 할당, 위의 2문(statement)과 동일한 기능- 하나의 statement로 단축 표현해도 2개의 statement로 나누어 각각 실행한다.
- 선언은 runtime 이전에, 할당은 runtime에
아래 코드를 살펴보고 어떻게 동작하는지 각자 확인해보자.
console.log(score); // undefined
score = 80;
var score;
console.log(score); // ??값의 재할당
ES6에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지된다.
값을 재할당한다면 처음 값이 저장되어 있던 메모리 공간을 지우고 그 공간에 재할당된 값을 새롭게 저장하는 것이 아니다.
- 새로운 메모리 공간을 확보하고 그 메모리 공간에 새로운 값을 저장하는 것이다.
이때, 재할당되어 쓸모 없어진 값은 가비지 콜렉터(Garbage collector)에 의해 메모리에서 자동 해제된다. 단 그 시점은 예측할 수 없다.
- 가비지 컬렉터는 메모리 누수 예방에 중요한 역할을 한다.
식별자 네이밍 규칙
일반적으로 변수나 함수의 이름에는 카멜 케이스를, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.
// 카멜 케이스
var firstName;
// 스네이크 케이스
var first_name;
// 파스칼 케이스
var FirstName;
// 헝가리언 케이스
var strFirstName;
var $elem = document.getElementById('myId');