You-Dont-Know-JS - 2

1. Get Started

 1) What Is JavaScript?

  -Name

This language was originally designed to appeal to an audience of mostly Java programmers, and because the word "script" was popular at the time to refer to lightweight programs.

So  the official name of the language specified by TC39( the technical steering committee that manages JS ) and formalized by the ECMA standards body is ECMAScript.  The JavaScript/JS that runs in your browser or in Node.js, is an implementation of the ES2019 standard.

 

-Language spec

The official standard as maintained by TC39 and ECMA.

 

  -Web and JS

How it should be : How JS is implemented for web browsers is, in all practicality, the only reality that matters.

Reality: Sometimes the JS engines will refuse to conform to a specification-dictated change because it would break that web content.

Solution: Appendix B details out any known mismatches between the official JS specification and the reality of JS on the web. 

 

-Not all web JS

Web API: alert(..) console.log(..) 

Node.js: fetch(..), getCurrentLocation(..), and getUserMedia(..)

 

-Not always JS

console/REPL in your browser's Developer Tools as a "JS-friendly" environment. It doesnt' represent exact to-the-letter JS semantics

 

-multi-paradigm language

Typical paradigm-level code categories include procedural, object-oriented (OO/classes), and functional (FP)

 

JavaScript is most definitely a multi-paradigm language. You can write procedural, class-oriented, or FP-style code

 

  -backwards compatibility ( 이전 버전과 호환성유지)

하위호환: 웹페이지는 브라우저의 자바스크립트 엔진으로 구동되기 때문에 아주 옛날의 웹페이지도 돌아가게 만들어야 했습니다. 

상위호환: 예전의 브라우저들은 상위 버전의 자바스크립트에서 만든 웹페이지들을 구동시킬수 없습니다. 즉 상위 호환이 차단됩니다.

 

  -Gaps : jumping and filling

 상위호환을 지원하지 않는 JS에서 이와 비슷한 (하위 버젼에서 돌려야 하는) 상황이 온다면 어떻게 해결해야 할까요? 이런 상황을 겪은 많은 개발자들이 다양한 해결책을 내놓았는데, 대표적으로는 Transpiling과 Polyfill이 있습니다. Transpiling은 작성한 코드를 변환해, Polyfill은 스펙을 비슷하게 구현해 코드에 추가해 구 버젼에서 신 스펙을 사용할 수 있습니다.

 

  -interpretation 

scripted or interpreted languages : 'top-down', 'line-by-line'

compiled languages : Parsing + Compilation + Execution 

  >> 바이너리 파일로 만드는 과정 중 코드를 파싱(Parsing)해 추상 문법 트리 (Abstract Syntax Tree)로 변환하는 과정을 거칩니다. 아까 5번째 줄에 에러가 존재하는 상황이 컴파일 언어에 발생된다면, 파싱 과정에서 에러가 발생합니다.

JS: compiled lang because JS source code is parsed(compiled) before it is executed. 

 

  -Web assembly

JS's performance is remarkable,  it can be parsed/compiled quickly and compiled code can be executed fast.
An initial motivation for WASM was clearly the potential performance improvements. While that continues to be a focus, WASM is additionally motivated by the desire to bring more parity for non-JS languages to the web platform.

 

  -Strict mode

Strict mode: a guide to the best way to do things so that the JS engine has the best chance of optimizing and efficiently running the code.

---

 2) Surveying JS

  -Each file is a program

In JS, each standalone file is its own separate program.

! Many projects use build process tools that end up combining separate files from the project into a single file to be delivered to a web page. When this happens, JS treats this single combined file as the entire program.

 

  -Values

a program is a value. Values are data. They're how the program maintains state. Values come in two forms in JS: primitive and object.

6 primitives are:  literals, booleans, numbers(include bigint), null, undefined, symbol

interpolation :``

 other primitive values in JS programs are null and undefined. However, it's safest and best to use only undefined as the single empty value, even though null seems attractive

 

  -Arrays and Objects

arrays are a special type of object

Functions, like arrays, are a special kind (aka, sub-type) of object. 

Objects are more general: an unordered, keyed collection of any various values. 

 

  -Value type determination

coercion: Converting from one value type to another, such as from string to number

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

 

  -Declaring and Using Variables

var / let / const

let allows a more limited access to the variable than var. This is called "block scoping" as opposed to regular or function scoping.

const. It's like let but has an additional limitation that it must be given a value at the moment it's declared, and cannot be re-assigned a different value later.

It's ill-advised to use const with object values, because those values can still be changed even though the variable can't be re-assigned. 

 

 

  -Functions

 A procedure is a collection of statements that can be invoked one or more times, may be provided some inputs, and may give back one or more outputs.
JS functions are a special type of the object value type. It can be assigned and passed around.

 

  -Comparisions

=== > checking both the value and the type
JS does not provide a mechanism for structural equality comparison of object values, only reference identity comparison. 

 

  -Coercive Comparisons

== allows type conversions first: instead of  loose equality it is called coercive comparisions

 

  -Organization: Classes, Modules

A class in a program is a definition of a "type" of custom data structure that includes both data and behaviors that operate on that data. Classes define how such a data structure works, but classes are not themselves concrete values. To get a concrete value that you can use in the program, a class must be instantiated

 

The module pattern has essentially the same goal as the class pattern, which is to group data and behavior together into logical units. Also like classes, modules can "include" or "access" the data and behaviors of other modules

 

 I'd recommend sticking with classic modules instead of class.

---

 

3) Digging to the Roots of JS

  - Iteration

 

  - Closure

  - this keyword

  - Prototypes

  - Object Linkage

---

 4) The Bigger Picture

  -Scope and Closure

  -Prototypes

  - 3 pillars