Each File is a Program

JS에서 .js로 나눠진 파일들은 자체 별도 프로그램이다. JS는 파일을 프로그램으로 취급하기 때문에 한 파일이 실패 할 수 있으며 (파싱 / 컴파일 또는 실행 중에) 반드시 다음 파일이 처리되는 것을 막지는 않는다.
상태를 공유하고 "global scope"를 통해 이 전역 범위 네임 스페이스에서 함께 혼합되어 여러 독립형 .js 파일들이 단일 프로그램으로 런타임에 전체로 작동한다.

ES6 이후 JS는 일반적인 독립형 JS 프로그램 형식 외에도 모듈 형식도 지원한다. 모듈도 파일 기반이다.

Values

값은 데이터이며 프로그램이 상태를 유지하는 방법이다. JS에서 값은 primitive와 object 두 가지 형태로 제공됩니다.

1. console.log("name: ${ firstName }."); // name ${ firstName }.
2. console.log('name: ${ firstName }.'); // name ${ firstName }.
3. console.log(`name: ${ firstName }.`); // name holee.

3번째 방식이 interpolation(보간) 방식이다. 리터럴 문자열 문법을 없애므로 필요할 때만 사용하자.

Primitive types

Javascript에서 기본으로 사용되는 자료형을 말한다. 그 종류로는 Boolean, Null, Undefined, Number, String, Symbol 이 있다.

Null 이란 어떤 값이 의도적으로 비어있다는 것을 의미한다. 변수 값이 null로 정의는 되었으나, 그 값이 존재하지 않는다고 생각하면 된다.
반면, Undefined는 변수로 정의되었으나, 어떠한 값을 할당받지 않은 상태임을 의미한다.

let sample;
console.log(sample); // undefined
sample = null;
console.log(sample); // null

Arrays And Objects

primitive 외에도 JS의 다른 value 유형으로 object가 있다.
Object는 다양한 값의 정렬되지 않은 키 컬렉션이다.

Arrays are a special type of object that’s comprised of an ordered and numerically indexed list of data

또한, 배열은 순서가 지정되고 숫자로 색인이 지정된 데이터 목록으로 구성된 특수한 유형의 객체이다.

Value Type Determination

typeof 연산자는 기본 유형인 경우 primitive 유형을, 그렇지 않은 경우 "객체"를 알려준다.

typeof 42;                 // "number"
typeof "abc";              // "string"
typeof true;               // "boolean"
typeof undefined;          // "undefined"
typeof null;               // "object" << ??? bug??
typeof { "a": 1 };         // "object"
typeof [1,2,3];            // "object"
typeof function hello(){}; // "function"

정보: 찾아보니 typeof null; 이 "object"인 이유는 하위 호환을 위해 어쩔 수 없이 "object"로 했다고 한다.

한 값 유형에서 다른 값 유형으로 변환하는것을 'coercion' 이라고 한다.
또한, 기본 값과 오브젝트 값은 할당되거나 전달 될 때 다르게 작동한다.

The history of “typeof null”
자바스크립트 엔진의 typeof의 c 코드이다.

    JS_PUBLIC_API(JSType)
    JS_TypeOfValue(JSContext *cx, jsval v)
    {
        JSType type = JSTYPE_VOID;
        JSObject *obj;
        JSObjectOps *ops;
        JSClass *clasp;

        CHECK_REQUEST(cx);
        if (JSVAL_IS_VOID(v)) {  // (1)
            type = JSTYPE_VOID;
        } else if (JSVAL_IS_OBJECT(v)) {  // (2)
            obj = JSVAL_TO_OBJECT(v);
            if (obj &&
                (ops = obj->map->ops,
                 ops == &js_ObjectOps
                 ? (clasp = OBJ_GET_CLASS(cx, obj),
                    clasp->call || clasp == &js_FunctionClass) // (3,4)
                 : ops->call != 0)) {  // (3)
                type = JSTYPE_FUNCTION;
            } else {
                type = JSTYPE_OBJECT;
            }
        } else if (JSVAL_IS_NUMBER(v)) {
            type = JSTYPE_NUMBER;
        } else if (JSVAL_IS_STRING(v)) {
            type = JSTYPE_STRING;
        } else if (JSVAL_IS_BOOLEAN(v)) {
            type = JSTYPE_BOOLEAN;
        }
        return type;
    }

ㅋㅋㅋㅋ NULL 검사가 없다. 자바스크립트는 역사적으로 굉장히 빠른 시간에 급하게 만들어졌으므로 처음 만들때 빼먹었나보다. 나중에는 호환성때문에 고치지도 못하는것같다.. 앞 단원에서 그렇게 보수적이었으니 그럴만도 하다.

Declaring and Using Variables

var에 비해 let 은 “block scoping”을 갖고 있다. 다만, 흔히 우리는 var을 배척을 해야한다는 생각을 갖으려하는데 이 책에서는 무조건적으로 var을 배척하기보다는 쓰는 상황에 맞게 잘 쓰는 것이 중요하다고 말한다.

const는 나중에 다른 값을 다시 할당 할 수 없다. 주의할점은 const로 선언한 변수는 변경할 수 없는게아니고 재할당 할 수 없다는 점이다. 따라서, object와 함께 const를 사용하는 것은 좋지 못하다. 변수를 재할당 할 수 없는데도 변경 할 수 있기 때문이다.

const actors = [
    "Morgan Freeman", "Jennifer Aniston"
];

actors[2] = "Tom Cruise";   // OK :(
actors = [];                // Error!

따라서, primitive value에만 const를 사용을 지향하자.

var / let / const말고는 function이 있다.

function hello(myName) { 
    console.log(`Hello, ${ myName }.`);
}

hello("Kyle");
// Hello, Kyle.

hello 및 myName은 일반적으로 var-declared와 같이 동작한다.

variable을 선언하는 또 다른 문법은 catch다.
err은 let으로 선언 된 것처럼 catch 절 내부에만 존재하는 블록 범위 변수이다.

try { 
    Error();
}
catch (err) {
    console.log(err); 
}

Functions

다음은 함수 선언문(function declaration)이며 컴파일 단계에서 정의된다.

function myfunction(props) { 
// ..
    return functionStuff; 
}

다음은 함수 표현식(function expresstion)이며 런타임일 때 해당 statement가 있을 때까지 식별자와 관련되어지지 않는다.

var myfunction = function(props) { 
// ..
    return functionStuff; 
}

함수는 value이므로 object와 array안에 들어 갈 수 있다.

var whatToSay = { greeting() {
    console.log("Hello!"); },
question() {
    console.log("What's your name?");
}, answer() {
    console.log("My name is Kyle."); }
}; 

whatToSay.greeting();
// Hello!

Comparisons

===는 강제 변환을 허용하지 않는다. 사실 ===에도 NaN과 -0에 대해 거짓된 진실이 있다.

Nan === Nan     // false
0 === -0;       // true

NaN의 경우 Number.isNaN()를 사용하자. -0에 대해서는 Object.is()를 사용하자.
Object.is()는 "quadruple-equals", ==== 정말 엄격한 검사이다.

만약 비교 범위가 primitive value의 범위를 넘어가면 굉장히 복잡해진다.

[ 1, 2, 3 ]===[ 1, 2, 3 ];      //false 
{ a: 42 } === { a: 42 } // false 
(x => x * 2)===(x => x * 2)     //false

object의 content-aware comparison는 "structural equality"이다.
자바스크립트에서 ===를 "structural equality"로 정의하지 않고, "identity equality"로 정의한다.

자바스크립트에서 모든 객체 값은 참조로 유지된다. 비교 또한 "reference (identity) equality"로 비교된다.

var x = [ 1, 2, 3 ];
// assignment is by reference-copy, so 
// y references the *same* array as x, 
// not another copy of it.

var y = x;
y === x;     // true 
y===[1,2,3]; //false 
x===[1,2,3]; //false

Coercive Comparisons

==는 비교 전에 숫자가 아닌 값이 숫자로 먼저 변경된다음에 비교된다. 비교하는 두 값이 모두 문자열이 아닌 이상 일반적으로 숫자 비교를 한다.

How We Organize in JS

Classes

“object-oriented”, “class-oriented”, “classes”...

Class Inheritance

class Publication { 
  constructor(title,author,pubDate) {
    this.title = title; 
    this.author = author; 
    this.pubDate = pubDate;
  }
  
  print() {
    console.log(`
       Title: ${ this.title } 
       By: ${ this.author } 
       ${ this.pubDate }
    `); 
  }
}

class Book extends Publication { 
  constructor(bookDetails) {
    super(
      bookDetails.title, 
      bookDetails.author, 
      bookDetails.publishedOn
    );
    this.publisher = bookDetails.publisher; 
    this.ISBN = bookDetails.ISBN;
  }
  
  print() { 
    super.print();
    console.log(`
      Publisher: ${ this.publisher }
      ISBN: ${ this.ISBN } 
    `);
  }
}

class BlogPost extends Publication { 
  constructor(title,author,pubDate,URL) {
    super(title,author,pubDate);
    this.URL = URL; 
  }
  print() { 
    super.print();
    console.log(this.URL); 
  }
}

상속 된 메서드와 재정의 된 메서드가 같은 이름을 가질 수 있고 공존 할 수 있는 것을 다형성이라고 한다.

Modules

Classic Modules

1. Class form은 this로 객체 인스턴스에 접근하여 메서드와 데이터를 저장하는 반면에 Modules는 식별자 변수로 접근한다.
2. 클래스를 사용하면 인스턴스의 "API"가 클래스 정의에 내포되어 있으며 모든 데이터와 메서드가 공개되는 반면에 모든 데이터 또는 기타 참조되지 않은 메서드는 팩토리 함수 내에서 비공개로 유지 할 수 있다.
3. Factory function form 에는 AMD (Asynchronous Module Definition), UMD (Universal Module Definition), and CommonJS (classic Node.js-style modules)가 있다.