자바스크립트 실행환경, 변수, 호이스팅, 식별자

p.17

자바스크립트 실행환경

브라우저 환경 vs Node.js 환경

 

브라우저 환경 :

Html, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적

DOM API를 기본적으로 제공

 

Node.js환경 :

노드js 는 외부에서 자바스크립트 실행환경 제공이 주된 목적

파일을 생성하고 수정할 수 있는 파일 시스템을 기본적으로 제공

 

p.32

const arr = [1,2,3]
arr.forEach(alert)

 

Node.js 환경에서 윗 코드를 실행하면

"ReferenceError: alert is not defined" 라는 에러가 발생한다.

 

이유는 클라이언트 Web API 인 alert 함수를 사용할 수 없기 때문이다.

▶️ 클라이언트 사이드 Web API가 포함된 코드를 실행하려면 Node.js환경이 아닌 브라우저에서 실행해야한다.

 

p.34

 

메모리와 변수

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다.

각 셀은 고유의 메모리 주소를 갖는다.

컴퓨터는 모든 데이터를 2진수로 저장한다.

 

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. //차후 더 알아보자

 

var score; //변수 선언 + 변수 이름 score 등록
// undefined 라는 원시타입의 값이 암묵적으로 할당되어 초기화된다.

score = 80 //80이라는 변수값 할당

p.42

console.log(score); //undefined
var score;

윗 console.log(scroe)가 참조에러가 날 것 같지만 undefined가 출력된다.

 

그 이유는.

변수 선언이 소스코드가 한 줄씩 실행되는 시점 ( 즉, 런타임 ) 에서 실행되는 것이 아니라

자바스크립트 엔진이 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거칠때

변수선언을 포함한 모든 선언문(변수선언문, 함수선언문) 등을 소스코드에서 먼저 찾아내 실행한다.

 

이처럼 변수 호이스팅 이란?

런타임 이전단계에서 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는

자바스크립트 고유의 특징을 "변수 호이스팅" 이라 한다. 

사실 변수 선언뿐만 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

 

console.log(score) //undefined

var = score; 변수선언
score = 80; 값의 할당 //var score = 80 이랑 같음

console.log(score) //80

두 문장으로 선언과 할당을 하거나 한문장으로 해도 실제 실행에서는 2개의 문으로 나누어 각각 실행된다.

console.log(score)

score = 80;
var score;

console.log(score) // ??

두번째 console.log(score)의 닶은 80이다.

1. var score 이 먼저 호이스팅되어 선언된다.

2. 첫번째 console.log(score) 는 선언은 되었으나 값이 없으므로  undefined

3. 두번째 console.log(score) 는 80이라는 값이 선언되어 80이 출력된다. 

 

p.45

var 은 재할당이 가능한 키워드이다.

const 는 재할당이 불가능하다.

var score; // undefined 값이 할당된다.
score = 80; // 새로운 메모리에 80이라는 값이 할당된다. (사실은 이것도 undefined에서 재할당)
score = 90; // 새로운 메모리에 90이라는 값이 재할당된다.

차후 가비지콜렉터 가  undefined와 80이 저장된 메모리 처럼 사용되지 않는 메모리를 해제한다.

 

p.49

식별자 네이밍 규칙

//카멜케이스
var firstName;

//스네이크 케이스
var first_name;

//파스칼케이스
var FristName;

//헝가리언 케이스
var strFirstName; //type + identifier
var $elem = document.getElementById('myid'); //DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

일반적으로 

변수나 함수의 이름에는 카멜케이스 사용

생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.