[모던 자바스크립트 입문] 1-3장

1장. 자바스크립트의 개요

1. 프로그래밍 언어란 컴퓨터 프로그램을 작성하기 위한, 즉 알고리즘을 설명하기 위한 언어이다.

2. 프로그래밍 언어는 컴파일 언어와 인터프리터 언어로 나뉜다.

3. 프로그래밍 언어는 방식에 따라 절차적 언어, 객체 지향 언어, 함수형 언어, 논리형 언어로 나뉜다. 자바스크립트는 객체 지향 언어이지만 함수형 언어의 특징도 가진다.

4. 자바스크립트는 인터프리터 언어이다. 실행 속도가 느릴 것 같지만 최근 웹브라우저 대부분에 실행시간에 자바스크립트 코드를 컴파일하는 JIT 컴파일러가 내장돼있어 실행 속도가 매우 빨라졌다. 이는 자바스크립틀르 활용한 고기능 웹 애플리케이션을 구현할 수 있게 된 중요한 요인 중 하나이다.

5. 자바스크립트는 C++나 Java처럼 클래스를 이용해 객체를 생성하는 클래스 기반 객체 지향 언어가 아닌, 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어이다. 자바스크립트에서는 객체를 생성한 후, 프로퍼티와 메서드를 동적으로 추가하거나 삭제할 수 있다. 이것이 클래스 기반 객체 지향 언어의 객체와 다른 점이다.

6. 동적 타입 언어다. C++와 java는 실행되기 전 변수 타입이 결정되는 정적 타입 언어이지만 자바스크립트는 변수 타입이 없다. 따라서 프로그램을 실행하는 도중 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다. 이러한 언어를 동적 타입 언어라 칭한다.

7. 함수가 일급 객체이다. 자바스크립트의 함수는 객체이고, 함수에 함수를 인수로 넘길 수 있다. 이것이 자바스크립트의 함수가 일급 객체인 이유이며 이 특성을 활용하면 고차 함수를 구현할 수 있어 함수형 프로그래밍이 가능해진다.

 

 

2장. 프로그램의 작성과 실행법

토큰과 공백 문자

1.토큰

프로그램을 구성하는 최소 단위를 토큰(어휘)라 한다. 자바스크립트 인터프리터는 프로그램을 실행하기 앞서 프로그램을 토큰으로 분해한다. 이 동작을 어휘 분석이라 한다. 그 후 토큰을 한 줄로 나열하여 이것이 자바스크립트 구문 규약에 비추어 볼 때 올바른 프로그램인지 판정한다. 이를 구문 분석(파싱)이라 합니다. 인터프리터에 따라서는 어휘분석과 구문 분석을 함께 실행하는 경우도 있습니다. 구문을 분석한 결과, 프로그램에 문제가 없다 판단하면 프로그램을 실행합니다.

토큰은 의미를 가지는 최소의 단어 모음입니다.

 

2. 공백 문자

인접한 토큰을 공백 등에 넣지 않고 나열하기만 해서는 토큰을 판별할 수 없다. 가령 return n부분을 returnn이라 표기하면 returnn을 하나의 토큰으로 인식한다. 즉 공백문자는 토큰과 토큰 사이를 구별해주는 역할을 한다. 이때 공백을 여러개 입력해도 공백문자를 하나만 입력한 것으로 간주한다. 토큰을 구분하는 공백문자로는 스페이스와 탭만 사용하고 필요할 때만 줄 바꿈 문자를 사용한다.

 

3. 공백문자 생략하기

토큰과 토큰 사이에 공백 문자가 없어도 토큰을 판별할 수 있는 경우가 있다. 이때는 공백 문자를 생략할 수 있다. 가령 다음과 같은 경우이다.

a = 1 + 2 * 3  -> a=1+2*3

이처럼 =, +, 1 등 산술 연산자 앞 뒤의 공백 문자, (,), {,},[, ] 와 같은 괄호 앞 뒤의 공백문자, 세미콜론, 쉼표, 콜론(:), 마침표 앞 뒤의 공백문자는 생략할 수 있다. 이러한 토큰은 토큰을 분리하기 때문에 분리자 또는 구분자라고 부릅니다.

 

4. 프로그램 가독성 높이기

코드 가독성을 높이는 방식은 매우 다양하다. 특히 공백 문자를 코드의 어느 부분에 넣을 것인지에 대해서는 개발자 집단에 따라 의견이 크게 나눠진다. 그러나 { 문자 다음에는 개행 문자로 줄을 바꾸어야 하고,  함수의 몸체인 { ... } 안에 작성된 코드는 앞에 탭 문자를 넣어야 하는 등의 규칙은 모두가 동의하는 내용이므로 이 규칙만큼은 지키도록 하자. 코드 가독성을 높ㄹ이는 방법은 11.1.3절의 스타일 가이드 사용하기(436페이지)를 참조하자.

 

5. 문장

영어가 단어 하나만으로 의사를 표현할 수 없어, 여러 개의 단어로 된 문장으로 의사를 표현하듯이, 자바스크입트는 토큰 하나만으로는 프로그램이 실행하려는 문장을 끝낼 수 없다. 따라서 토큰을 나열해 한 문장을 만들고, 문장을 이용해 컴퓨터에 명령을 내린다. 
영어 문장이 마침표로 끝나는 반면, 자바스크립트 문장은 세미콜론으로 끝난다.

가령 다음과 같은 것이 문장이다.

console.log(i + "! = " + fact(j) );

특별한 경우를 제외하고는 문장 끝에 반드시 세미콜론을 붙이고, 개행문자로 줄을 바꿔라. 그리고 한 줄에는 한 문장만 작성하라. 

 

6. 복합문

문장 여러 개를 중괄호({})로 감싼 코드를 복합문 또는 블록문이라 한다.

Ex.
{
    sum = sum + x;
    console.log("sum = " + x);
}

복합문 끝에는 세미콜론을 붙이지 않는다. 복합문의 중괄호 안에 포함된 문장은 중괄호를 기준으로 들여쓰기를 할 수 있습니다. 
들여쓰기를 하지 않아도 오류가 발생하지는 않지만, 들여쓰기를 해야 프로그램의 계층 구조를 명시할 수 있어 프로그램을 읽기가 쉬워진다. 

복합문은 일반적으로 if 문이나 while 문 등의 제어 구문에 사용한다. 제어 구문은 7장에서 배운다.

 

7. 빈 문장

빈 문장이란 문장이 하나도 없는 문장을 뜻합니다. 빈 문장은 세미콜론으로 작성합니다.

;

빈 문장은 실행해도 자바스크립트 인터프리터가 아무런 작업을 하지 않습니다. 그러나 빈 문장이 필요한 상황이 있는데 이를 응용하는 방법은 7장에서 배웁니다.

 

8. 세미콜론 자동 추가 

문장을 작성하고 다음 줄에 문장을 작성하면 앞 문장 끝에 세미콜론이 없어도 자바스크립트 엔진이 자동으로 세미콜론을 추가합니다. 

단, 자바스크립트 엔진은 세미콜론을 생략한 줄이 다음 줄과 이어지고 있다고 판단하면 세미콜론을 자동으로 추가하지 않습니다. 

다음 코드를 살펴봅시다.

 

3장. 변수와 값

 

1-4. 변수 끌어올림과 중복 선언

프로그램은 작성한 순서에 따라 윗줄부터 차례대로 실행되지만 변수 선언은 이 원칙을 따르지 않는다. 

가령 다음의 코드를 보자. console.log(x)에서 오류가 나는 것이 아니라 undefined가 출력된다.

 

cosnsole.log(x) // undefined

var x;

 

이 코드에서 첫번째 줄은 아직 변수 x가 선언되지 않아 오류가 발생할 것 같지만, 실제로는 오류가 발생하지 않고 undefined가 출력된다.
이는 프로그램 중간에서 변수를 선언하더라도 변수가 프로그램 첫머리에 선언된 것처럼 다른 문장 앞에 생성되기 때문이다. 이를 변수 선언의 끌어올림(호이스팅)이라 한다.

단, 선언과 동시에 대입하는 코드는 끌어올려지지 않는다. 가령 다음의 코드를 살펴보자.

console.log(x); // -> undefined

var x = 5;

console.log(x); // -> 5

 

이 코드의 첫번째 줄에서는 undefined가 출력되고, 3번째 줄에서는 5가 출력된다.

변수 선언부 var x는 끌어올려지지만 대입부 x = 5는 끌어올려지지 않기 때문입니다.

또한 var 문을 사용하여 같은 이름을 가진 변수를 여러 개 선언하더라도 문제가 발생하지 않습니다.

같은 이름으로 선언된 변수는 모두 끌어올린 후 단 하나의 영역에만 할당됩니다.

 

변수 선언의 끌어올림은 다른 언어에 없는 자바스크립트만의 고유한 특징입니다. 그래서 다른 프로그래밍 언어의 사용자도 이해하기 쉬운 프로그램을 만들기 위해 변수 선언부를 반드시 프로그램의 시작 부분에 위치시켜야 한다는 주장이 힘을 받고 있습니다.

 

1-5. 변수의 명명 규칙

변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자라고 합니다. 식별자는 다음과 같은 명명 규칙을 따라야 합니다. 

1. 사용할 수 있는 문자는 알파벳 (a-z, A-Z), 숫자(0-9), 밑줄(_), 달러기호($)다.
2. 첫 글자로는 숫자를 사용할 수 없다. 즉 첫 글자는 위에 1번에서 언급한 문자 중 하나여야 한다.
3. 하이픈(-)은 사용할 수 없고, 예약어는 사용할 수 없다.

변수 이름은 식별자 명명 규칙에 어긋나지만 않으면 자유롭게 지정할 수 있다. 그러나 프로그램이 커질수록 사용하는 변수 개수도 늘어나므로 변수가 뜻하는 바를 파악하기가 어려워진다. 이럴 때 일정한 표기법에 따라 변수의 의미를 알 수 있다면 좋다.
변수 표기법에는 아래 3가지 방식이 있다. 
1. 캐멀 표기법 = ex. newName, createLifeGame
2. 파스칼 표기법 = ex. NewName, CreateLifeGame
3. 밑줄 표기법 = ex. new_name, create_life_game

 

예약어는 자바스크립트 문법에서 사용하는 특수한 키워드로, 변수로 사용하면 원래의 기능을 수행하지 못하므로 변수로 사용하는 것을 지양한다.
(ex. extends, debugger, const, else..)

 

3-1. 데이터 타입

데이터 타입과 변수의 동적 타이핑

데이터 타입은 숫자나 문자열처럼 변수에 저장하는 데이터 종류를 의미한다. 
자바스크립트는 변수에 타입이 없어, 변수에 모든 타입의 데이터를 저장할 수 있는 "동적 타입 언어"이다.

 

3-2. 데이터 타입은 원시타입과 객체 타입으로 나뉜다.

 

3-2-3.숫자

- 대다수의 프로그래밍 언어에는 정수 타입과 부동소수점 타입이 따로 있지만, 자바스크립트에는 타입이 없어 숫자를 모두 64 비트의 부동소수점으로 표현한다. 이는 C나 자바에서 사용하는 double 타입에 해당한다.

- 프로그램에 직접 작성할 수 있는 상수 값을 리터럴이라 한다. 숫자를 표현하는 리터럴은 정수 리터럴과 부동 소수점 리터럴이 있다.
- 가수부 e, E 사용방식과 8진수는 숫자 앞에 0o을 붙이는 것, 2진수는 0b, 16진수는 0x를 붙이는 것은 ECMAScript 6에서만 사용 가능하고 5에서는 사용 불가하다.

- 다음의 문자열은 자바스크립트에서 특별한 숫자를 표현하기 위한 문자열로 ECMAScript에서는 모두 읽기전용이라 수정할 수 없다.

 

Infinity - 플러스 무한대
NaN - 부정값

Number.POSITIVE_INFINITY : 플러스 무한대

Number.NEGATIVE_INFINITY: 마이너스 무한대
Number.MAX_VALUE: 표현할 수 있는 최댓값

Number.MIN_VALUE: 표현할 수 있는 최솟값

Number.NaN : 부정값

Number.EPSILON : Number.EPSILON 속성(property)은 Number 형으로 표현될 수 있는 1과 1보다 큰 값 중에서 가장 작은 값의, 차이다.(아주 미세한 차이를 확인해 이것 이하이면 같은 수, 즉 차가 없다라고 본다)

Number.MIN_SAFE_INTEGER: 

Number.MAX_SAFE_INTEGER:

 

NaN은 0을 0으로 나눈 결괏값, Infinity를 Infinity로 나눈 결괏값, 음수의 제곱근 등 숫자로 표현할 수 없는 부정 값을 뜻한다.

 

3-2-4. 문자열

줄바꿈 문자와 탭 문자 등은 문자열에 그대로 추가할 수 없다. 이러한 특수 문자는 이스케이프 시퀀스로 표현해야 한다. 이스케이프 시퀀스는 역슬래쉬(\) 뒤에 특정 문자를 뜻하는 기호를 표기한 형태이며, 이를 이용해 특정 제어 코드나 문자를 표현할 수 있다.

 

유니코드로 표현할 수 없는 문자(이모티콘, 자주 사용하지 않는 한자 등)은 써로게이트 페어를 사용해 표현할 수 있다.
Ex. \u{1f4d6}

 

3-2-5 논리값

논리값은 조건식이 참인지 거짓인지 표현하기 위해 사용하는 값. 

Ex. x == 2

 

3-2-6 특수한 값

값이 없음을 뜻하는 특수한 값: null, undefined

undefined

- 값을 아직 할당하지 않은 변수의 값. 
- 없는 객체의 프로퍼티를 읽으려 시도 했을 떄의 값
- 없는 배열의 요소를 읽으려 시도했을 때의 값
- 아무것도 반환하지 않는 함수가 반환하는 값
- 함수를 호출했을 때 전달받지 못한 인수의 값

null
- 아무것도 없음을 값으로 의도적으로 표현한 결과

 

3-3. ECMAScript6부터 추가된 데이터 타입

1) 심벌 (구별할 때 쉽게 만듦)

var NONE = Symbol("none");

var BLACK = Symbol("black");

var WHITE = Symbol("white");

 

Symbol.for() 을 활용해 문자열과 연결된 심볼을 생성할 수 있다.

var sym1 = Symbol.for("club");

이는 나중에 console.log(Symbol.keyFor(sym1))로 가져올 수 있다. 

 

템플릿 리터럴은 ECMAScript6 부터 추가된 문자열 표현 구문이다. 

var t = `I like pizza.`

var v = String.raw`Man Loves to do \nsports` => 이스케이프 시퀀스 문자 그대로 출력함.(String.raw를 태그함수라 한다)

보간 표현식 : 템플릿 리터럴 안에 자바스크립트 표현식의 결과값 삽입 Ex. `I want to do ${something}`.   var something = sports;