모던 자바스크립트 공부 시작

방학을 맞이해서 대충 지나간 자바스크립트를 보다 깊게 공부하고자 한다.

가장 후기가 좋고 자바스크립트 서적 중 근본이라고 불리는 '모던 자바스크립트 Deep Dive' 를 중심으로 내용을 정리하려고 한다.

양이 상당한데 평소에 그냥 넘어간 부분 중 중요하거나 모르는 부분 위주로 기록하고자 한다.

 

 

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행하게 된다.

• 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

console.log(score); // undefined

var score;  // ① 변수 선언
score = 80; // ② 값의 할당

console.log(score); // 80

 

변수 호이스팅

console.log(score); // undefined

score = 80; // 값의 할당
var score;  // 변수 선언

console.log(score); // 80

위의 코드를 보면 score는 변수 선언이 되어있지 않지만 에러없이 undefined를 출력하고 있다.

그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 살행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

 

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자라스크립트 공유의 특징을 변수 호이스팅 이라고 한다.

 

값의 할당

var score;  // 변수 선언
score = 80; // 값의 할당

var score = 80; // 변수 선언과 값의 할당

자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

 

식별자 네이밍 스타일

// 카멜 케이스 (camelCase)
var firstName;

// 스네이크 케이스 (snake_case)
var first_name;

// 파스칼 케이스 (PascalCase)
var FirstName;

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

 

표현식과 문

값: 식(표현식)이 평가되어 생성된 결과.

리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.

표현식: 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조.

문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

토큰: 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

 

표현식인 문과 표현식이 아닌 문

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;
// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError: Unexpected token var

// 변수 선언문은 표현식이 아닌 문이다.
var x;

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
x = 100;

// 표현식인 문은 값처럼 사용할 수 있다
var foo = x = 100;
console.log(foo); // 100