Skip to content

0x344 JavaScript

1. Foundation

1.1. Lexical Structure

Several rules about lexical structures in javascript

  • javascript is case-sensitive
  • identifier must start with letter, underscore or dollar sign
  • unicode can be used in javascript
  • Semicolon is used to separate statement, but can be omitted with a line break. The general rule is Javascript - treats a line break as semicolon if the next nonspace char cannot be a continuation of the current statement.

It might be useful to write in the defensive style by adding semicolon before symbols (, [, /

let x = 0                         // Semicolon omitted here
;[x,x+1,x+2].forEach(console.log) // Defensive ; keeps this statement separate

The exception of the general rule is return, throw, yield break and continue. These will add semicolon whenever there is a line break

2. Type, Value and Variables

Data Type - primitive: immutable data type: Boolean, Number, String, Null, Undefined, Symbol - object: mutable types: others

function

function fn1() {}

const fn2 = function() {};

const fn3 = () => {};

2.1. Variable Declarations

Variables - let: re-assignable variable (ES 2015), re-declaration not allowed in the same scope - const: const variable (ES 2015) - var: old variable

2.1.1. var

var variables have the function scope, - Variables declared with var are scoped to the body of the containing function - if outside of a function, they are declared as a global variable, which is a property of globalThis

Unlike variables declared with let, it is legal to declare same variables multiple times with var

var has an feature known as hoisting, where the declaration is moved to the top of the enclosing function. Therefore variables declared with var can be legally used anywhere in the enclosing function.

//The first one is processed as the second one
function f() {
    console.log(a+" World");
    var a="Hello";
}

function f() {
    var a;
    console.log(a+" World");
    a="World"
}

2.1.2. let, const

let and const variables have the block scope

// if no init value provided, its value is undefined
let i

They canot be decalred twice in the same block scope.

2.2. Primitive Types

JavaScript types can be divided into two categories: primitive types and object types. Primitive types are immutable, they are compared by value

2.2.1. Number

2.2.2. String

2.2.3. Boolean

2.3. Object Types

Object types are mutable, they are compared by reference

let a = {x: 1}, b = {x:1}
a === b // false

let c = a // assign same reference
a === c // true

{} === {} // false, different object
[] === [] // false, different object

2.3.1. Object

2.3.1.1. Global Object

Global object is a regular JavaScript object, its properties are globally defined identifier that are available to a JavaScript program. (e.g: undefined, parseInt, Date())

  • In node it is global
  • In browsers, it is window
  • globalThis can refer to the global object in any context

2.3.2. Array

3. Concurrent Model

event loop

3.1. Callback

At its most fundamental level, async programming in Javascript is done with callbacks

setTimeout(() => console.log("hello"), 3000);

Client-side JS programs are almost universally event driven: waiting for the user to do something and then respond to the user's action. Event-driven JavaScript register callback functions (event handler) with addEventListener


3.2. Promise

3.3. async/await

future

4. Standard Library

5. Runtime

runtime

Event Loop

The runtime starts handling the messages on the queue, starting with the oldest one. To do so, the message is removed from the queue and its corresponding function is called with the message as an input parameter. calling a function creates a new stack frame for that function's use.

run-to-completion Each message is processed completely until next message is processed

  • pros: no preemption
  • cons: interaction become worse if a message takes long time (solution is to break tasks into small pieces, e.g. use settimeout)

To add a event to the eventloop, we have many approaches (e.g: eventListener, settimeout)

6. Reference

[1] Flanagan, David, and Will Sell Like. "JavaScript: The Definitive Guide, 7th." (2020). [2] A good online tutorial [3] A good Youtube video explaining the event loop, async in JavaScript (V8)