3.1 자바스크립트 실행 환경
브라우저는 JS 해석 엔진을 내장하고 있다. Node.js 도 마찬가지다. 다만 브라우저는 화면에 렌더링 하는것이 주 목적이고, Node.js는 브라우저 외부에서 실행환경을 제공하는 것이 주 목적이다. 자바스크립트의 코어를 담당하는 ECMAScript를 실행할 수 있지만 그 이외에는 호환되지 않는다.
브라우저는 DOM API같은 메서드를 해석할 수 있지만 Node.js는 별도의 모듈을 설치하지 않는 이상 DOM API를 제공하지 않는다.
많이 쓰는 DOM API
document.querySelector(cssSelector)element.appendChild(child)element.innerHTML
4. 변수
4.1 변수란 무엇인가? 왜 필요한가?
10+20위 코드를 자바스크립트 엔진에서 계산(평가)하려면 10, 20, + 라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며, 10+20이라는 식(표현식)의 의미도 해석(파싱)할 수 있어야 한다.
파싱하기 전에 피연산자를 기억해야한다. 컴퓨터는 메모리를 사용해 데이터를 기억한다. 피연산자는 각각 메모리 주소에 저장되고 CPU가 이 값을 읽어 연산한다. 그리고 연산 결과 또한 메모리 주소에 저장된다.
메모리에 10, 20, 30이 각각 다른 주소를 가지고있는데, 만약 30이란 숫자 값을 재사용하려면 어떻게 해야할까? 30이 저장된 메모리 주소에 직접 접근하는 방법밖에 없다. 하지만, 메모리 주소를 통해 직접 값에 접근하는 것은 치명적인 오류를 발생시킬 수 있기 때문에 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
그래서 기억하고 싶은 값을 메모리에 저장하고, 값을 읽어들여 재사용하기 위해 변수라는 메커니즘을 제공한다. 변수의 정의는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는 상징적인 이름이다.
var result = 10 + 20;고유한 이름(result)을 변수 이름이라고 하고 변수에 저장된 값(30)을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당(대입)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.
4.2 식별자
변수이름 = 식별자
식별자는 값이 아닌 메모리 주소를 기억하고 있다. 즉, 식별자가 기억하고 있는 메모리 주소를 통해 메모리에 저장된 값에 접근할 수 있는 것이다. 메모리 주소에 붙인 이름이라고 하는게 좋을 듯.
식별자는 변수 이름 뿐만이 아니라 함수, 클래스 등의 이름도 포함한다. 함수 식별자는 메모리 상에 존재하는 함수를 식별할 수 있다.
JS에서 함수는 값이다.
4.3 변수 선언
변수를 만드는 것. 변수를 사용하려면 선언이 반드시 필요하다. var let const 키워드를 사용한다.
var키워드는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다. 이로 인해 의도치 않은 전역변수가 선언되어 부작용이 발생하기도 한다.
var x = 'global';
function foo() {
var x = 'local';
console.log(x);
}
foo(); // local
console.log(x); // globalvar 키워드로 선언한 변수는 선언 시 초기화 단계에서 암묵적으로 undefined로 초기화된다. 초기화란, 변수가 선언된 이후 최초로 값을 할당하는 것이다. 그러므로 var 키워드는 할당 안해도 undefined라는 값을 갖는다.
4.4 변수 선언의 실행 시점과 호이스팅
소스코드가 한 줄씩 실행되는 런타임 이전 단계에서 먼저 실행된다. 즉, 변수 선언이 어디에 있든 다른 코드보다 먼저 실행한다. 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징을 변수 호이스팅이라고 한다.
var, let, const, function, class 등의 키워드를 사용하는 모든 식별자는 호이스팅된다.
4.5 값의 할당
할당 할 때는 연산자 = 를 사용하여 우변의 값을 좌변의 변수에 대입한다. 선언 -> 할당을 두개의 문으로 나눠서 할수도 있고, 선언과 할당을 하나의 문으로 단축할 수 있다. 또한, 변수 선언은 런타임 이전에 실행되고 할당은 런타임에 실행된다.
4.6 값의 재할당
이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것. var 키워드는 재할당이 가능하다. 재할당을 하면 기존의 메모리 주소를 지우고 새롭게 저장하는게 아니라 새로운 메모리 공간을 확보한다.
더 이상 사용하지 않는 메모리는 가비지 콜렉터(GC)에 의해 해제된다.
