DEV Community: MOYED

14. Factories and Classes

MOYED — Tue, 08 Feb 2022 13:11:35 +0000

Articles

https://exploringjs.com/impatient-js/ch_proto-chains-classes.html 90% explanation about prototype chaining
https://www.javascriptjanuary.com/blog/es6-classes 100% new keyword protection
How To Use Classes in JavaScript — Tania Rascia 100% mage & hero instance of subclasses proto
Javascript Classes — Under The Hood — Majid 100% class = mix of constructor function and prototypes, problems of constructor function & prototypes
Class vs Factory function: exploring the way forward — Cristi Salcescu
How ES6 classes really work and how to build your own — Robert Grosse 50%
An Easy Guide To Understanding Classes In JavaScript 100% Developer & Person
https://javascript.plainenglish.io/factories-are-still-better-than-classes-in-javascript-47f15071904e factory vs class

In Javascript, there are two ways for creating objects; factories and classes.

Factories

Factory function is a function that returns object.

const RocketShipFactory = (c) => {
  const color = c;

  return {
    fly: () => console.log(`The ${color} rocketship has launched.`),
    land: () => console.log(`The ${color} rocketship has landed.`)
  } 
}

const spaceX = RocketShipFactory('black');
spaceX.fly();

Above snippet is an simple factory function for making spaceX object.

Closure

What thing that gets my interest is that factory pattern usually uses closure for data encapsulation. In above snippet, color variable is unaccessible in global scope but we can access it indirectly through fly or land method.

console.log(spaceX.color); // undefined

Classes are just 'syntactic sugar' of prototypal inheritance. Purpose of class is to set up the prototype chain between class.prototype and instances. Let's look at prototype first.

Prototype

In javascript, every objects are linked each other through something called 'prototype chain'.

Class is just template of prototype

One thing that is very important is that instances created by class links to class.prototye, not class itself.

class Person {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return 'Person named '+this.name;
  }
}

const Jane = new Person('jane');
console.log(jane.describe());

In above snippet, object Jane is instance of class Person. So, Jane is linked to Person.prototype with prototype chain, not class Person itself.

._proto_ vs .prototype

Above chart has properties called __proto__ and prototype. What are they?

__proto__ property is pseudo-property for accessing the prototype of an object. So, Jane's __proto__ proerty points to the Person.prototype object.

prototype property points to the prototype of all instances of class. It means that Person class's prototype property points to the Person.prototype.

Additionally, object Person.prototype's constructor property points to the class itself.

All methods (except static) of class are stored in prototype.

Another truth that is important is that all methods except static methods declared inside class are stored in prototype.

Back to pevious example, we can see that describe method is actually stored inside the Person.prototype object. This is why we call that class is just template/syntatctic sugar of prototypal programming.
But, static methods are stored in class itself.

Classes

normal & static methods

Normal methods are inherited from classes to instances, but static methods are not inehrited and should use with class itself.

constructor function

Constructor function helps us to intialize with number of parameters which would be assigned as properties of this, which is class itself.

Getters/Setters

Getter function uses get keyword to get property value and Setter uses set keyword to set the property value. It can used for data encapsulation or for using method like property.

class Person {
  constructor(name){
    this._name = name;
  }
  get name() {
    return this._name;
  }
}

const Jane = new Person('jane');
console.log(Jane.name); // 'jane'
Jane.name = "alex";
console.log(Jane.name); // 'jane'

We can hide _name property and it would not be modified. Also, we can call name method like a property.

Subclasses

With subclasses, we can make class which is simiar or extended from the original classes.

class Person {
  constructor(name) {
    this.name = name;
  }

sayName() {
    console.log("My name is " + this.name);
  }
}

class Developer extends Person {
  constructor(name) {
    super(name);
    this.name = name;
  }

getBio() {
    super.sayName();
    console.log("I am a developer");
  }
}

let ReactGuy = new Developer("Lawrence Eagles");
ReactGuy.getBio(); // "My name is Lawrence Eagles"
               // "I am a developer"

extend keyword

extend keyword makes subclasses.

super keyword

super keyword is used to access and call functions from the object's parent ( original class). In above snippet, super.sayName() calls sayName method of class Person. One thing to check is that this in sayName method refers to ReactGuy instance, not class itself.

If the super keyword is called inside the constructor, it calls the constructor function of parent class. For example, super(name) is called inside Developer constructor function. So, parameter variable name will be passed to the constructor function of Person class.

Prototype relation

When subcalss is created from original class, original class becomes the subcalss' prototype. For example, class Person is the Developer's prototype.

class Person {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return `Person named ${this.name}`;
  }
  static logNames(persons) {
    for (const person of persons) {
      console.log(person.name);
    }
  }
}

class Employee extends Person {
  constructor(name, title) {
    super(name);
    this.title = title;
  }
  describe() {
    return super.describe() +
      ` (${this.title})`;
  }
}

const jane = new Employee('Jane', 'CTO');
assert.equal(
  jane.describe(),
  'Person named Jane (CTO)');

In above snippet, Employee is subclass of Person and Jane is instance of subclass Employee. Prototype chain looks as following chart.

Factory vs Classes

Both has some different advantages and disadvantages.

Data Encapsulation

First, sector is data encapsulation. In factory, we can control if we want data to be private or public by using closure. However, in classes, it's not that simple.

Classes; data encapsulation / getter & setter

As I mentioned, getter & setter is used for data encapsulation in classes. However, it's not systemically encapsulated. What it means by that is it's actually modifiable.

class Person {
  constructor(name){
    this._name = name;
  }
  get name() {
    return this._name;
  }
}

const Jane = new Person('jane');
console.log(Jane.name);
Jane._name = "alex";
console.log(Jane.name);

If we reassign the property _name, the value returned from name method changes. Although, in javascript, we conventionally promise not to modify variable with _ prefix. But it's possible.

Classes; data encapsulation / # prefix

# prefix is introduced recently for private class field.

class CoffeeMachine {
  #waterLimit = 200;

  #checkWater(value) {
    if (value < 0) throw new Error(".");
    if (value > this.#waterLimit) throw new Error(".");
  }

}

let coffeeMachine = new CoffeeMachine();

coffeeMachine.#checkWater(); // Error
coffeeMachine.#waterLimit = 1000; // Error

It looks nice, but one problem is that private methods in classes are also not accessible in subclasses.

this keyword

In class, this keyword goes through some scope confusion in certain situations. These situations are when this is used in nested function or in callback function.

The solution to this problem is arrow function.

class Car {
  constructor(maxSpeed){
    this.maxSpeed = maxSpeed;
  }
  drive = () => {
    console.log(`driving ${this.maxSpeed} mph!`)
  }
}

This works find for any circumstances.

Memory cost

Memory cost is problem to factory function. Unlike to class which only stores methods once in prototype, factory fuctions create copy of each methods on every instances they create. This could be problematic if the number of instances increase.

13. DOM and Layout Trees

MOYED — Sat, 05 Feb 2022 05:16:42 +0000

Articles

How To Understand and Modify the DOM in JavaScript — Tania Rascia 100%
What’s the Document Object Model, and why you should know how to use it — Leonardo Maldonado 100%
DOM Tree 100%
How to traverse the DOM in Javascript — Vojislav Grujić 100%
Render Tree Construction — Ilya Grigorik 100%
What exactly is the DOM? explain differences with similar concepts * 100%

Window Object

Window object is the global ojbect when we run Javascript in web browser. Every objects are stored under window object. There are DOM, BOM, and Javascript under window object.

Document Object Model (DOM)

Represents all page content as objects, so that we can access and modify with Javascript. document object is the main entry point of page.

Browser Object Model (BOM)

Represents additional objects provide by browser.

Process of Render Tree

Combine DOM & CSSOM.
Exclude invisible nodes.
(<script>, <meta>, nodes with display: none;)
Layout; Comput exact position and size of each objects.
Paint; Renders pixels to the screen.

DOM

Everything in HTML source code in included in DOM and represented as an node(object).

element node : HTML tags
text node
comment node

Manipulating DOM

Methods

Methods connects between nodes and events.

querySelector()
Returns first element that has specific CSS selector passed.
querySelectorAll()
Returns all elements that has specific CSS selector passed.
creatElement()
Creates new element.
setAttribute()
Set new attributes for element.

Events

Allows us to interact with page.
addEventListner()

Trasversing DOM

We can walk through nodes of DOM using specific methods.

General methods

childNodes
Returns nodelist of child nodes of given elements. Nodelist are live list of nodes, so if we add or remove elements, it automatically updates.
firstChild
Returns first child of given element
nodeName
Returns name of element ex) "div"
nodeVale
Specific for text & comment nodes, returns value of given node.

Element specified methods

Following methods only considers element nodes, which can be useful in certain circumstances.

children Returns nodelist of child element nodes of given element
parentNode
Returns parent element node of given element. It is read-only property, which cannot be assigned.
firstElementChild
Element node version of firstChild
closest
Returns closest ancestor element node which has given CSS selector

DOM VS ?

DOM vs HTML source code

1. DOM is modified by client-side Javascript

document.body.style.background = "green";

If we write above snippet in console, the background color changes to green. It means that DOM has changed. But if we check the HTML source code, it hasn't changed. If we refresh the page, change disappears.

2. Browser automatically fixes error in source code

<html>
  Hello.world!
</html>

Above snippet is wrong, because it doesn't have head & body tag. However, DOM automatically fixes it like this.

DOM vs Render Tree

As I mentioned above, render tree is combination of DOM & CSSOM. Also, it excludes element visually hidden, while DOM includes it.

DOM vs What in DevTools

These two are quite similar, but minor difference is that DevTools include additional information plus DOM like CSS pseudo-elements.

CSS Grid: The ultimate layout tool

MOYED — Wed, 02 Feb 2022 06:26:11 +0000

Ultimate layout tool

Grid enables us to created grids.
We can work on 2-dimension, vertical & horizontal axis at the same time.
Opens up new layout possibilities which we didn’t had.

Setting up a grid

display: grid;

Margins no longer collapse

Template rows and columns

grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// shorthand
grid-template: 50px 200px / 200px 200px 350px;

Placing items on the grid

// Used on grid container
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// Used on grid item
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

// shorthand
grid-row: 1 / 3;
grid-column: 2 / 3;

// end line is -1
grid-column: 1 / -1; // start to the end

Overlaying items are easy.

Spanning

grid-column: span 2; // from line 1 to 3
grid-column: 2 / span 2; //from line 2 to 4

Similarities to flexbox

auto

When defining our rows, we mostly don’t want to set an exact height, we want it to match the content.
```
grid-template-row: 50px auto;
```
Height is fixed to the largest item’s height. Every items are stetched as default.

If we don’t declare grid-template-row , it becomes auto.
align-items & justify-items
- justify-items: align each items horizontally
- align-items: align items vertically
```
justify-items: end;
align-items: start;
```
align-self & justify-self

Similar to 2, but it applies to individual grid item.

Making gap between columns & rows

For margin, we can make empty column & row. Also we can use gap .

column-gap: Explicitly declare gap between columns
row-gap: Explicitly declare gap between rows

column-gap: 2em;
row-gap: 1em;

// shorthand
gap: 1em /2em;

Gaps at the outer top, bottom, left, right is not added, so we have to use the empty column & row approach.
Also used for flexbox.

grid-areas

Give names to different parts of grid.

.grid {
    grid-template-areas:
        "sidebar header header"
        "sidebar content content"
        "sidebar footer footer";
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

blank grid

// for blank grid
grid-template-areas: 
    "header header header"
    ". content ."
    ". sidebar ."
    "footer footer footer";

grid-area + media query

.grid {
    grid-template-columns: 5em auto 5em;
    grid-template-areas: 
    "header header header"
    ". content ."
    ". sidebar ."
    "footer footer footer"; 
}

@media (min-width: 600px) {
    .grid {
        grid-template-columns: 1em auto 150px 1em;
        grid-template-areas: 
            ". header header ."
            ". content sidebar ."
            ". footer footer ."
    }
}

minmax()

Setting a min-width and max-width to our template columns and rows.

grid-template-columns: 1em minmax(100px, 200px) auto 1em;

fr unit

fr unit is used to distribute a fraction of available space. It makes the item behave like a flex item with flex: 1 1 auto .

Easiest way to create equal columns.

We cannot use fr for minimum value

Instead we can use auto or 0px .

grid-template-columns: 1fr minmax(250px, 1fr) 1fr;

grid-template-columns: 1fr 1fr minmax(auto, 500px);

12. Binary Expression, Bitwise Operator

MOYED — Tue, 01 Feb 2022 12:41:23 +0000

Articles

Programming with JS: Bitwise Operations — Alexander Kondov 100%
Using JavaScript’s Bitwise Operators in Real Life — ian m
JavaScript Bitwise Operators — w3resource 100%
A Comprehensive Primer on Binary Computation and Bitwise Operators in Javascript — Paul Brown concept of using bitwise operator in real cases 100%

Bits

Bits are binary digits consists of 0 & 1, which is the basic unit of data in computer.

Bitwise Operators

& (AND)

Return 1 if both compared bits are 1s.

| (OR)

Returns 1 if either of compared bits is 1.

^ (XOR)

Returns if compare bits have only single 1.

~ (NOT)

Flips the bits.

a<<b (left shift)

Shifts a in binary representation for b bits to left, add 0 for missing ones.

a>>b (right shift)

Shifts a in binary representation for b bits to right.

Two's complement

two's complement is a way to express negative numbers in binary expression. The leftmost bit represents the sign, if it is 1, it means that number is negative.

For example,

10111 = -16 + 4 + 2 + 1 = 9
10011 = -16 + 2 + 1 = -13, while
01001 = 8 + 1 = 9
01101 = 8 + 4 + 1 = 13

The interesting part is that negative version of certain number is obtained by flipping each bit and then adding one.

For example, in the case for 13...
13 = 01101(2)
~13 = 10010(2)
~13 +1 = 10011(2) = -16 + 2 + 1 = -13

-X = ~X +1, while, X is base 2

How to express number in base 2

using parseInt

parseInt(1111,2) // 15

using binary literals (ES6)

let a= 0b111;
console.log(a); // 7

(0o prefix is for octal literals)

Real world implementation of binary expression

Case1. Data of which student returned his homework

Let's say I'm the math teacher of class consists of 5 students. I want to store data which student returned his homework or not.

Using Array

One way is using array. We can use true for who returned his homework, and false for not returned yet. So, initial state for array would be like this.

const Data = [ false, false, false, false, false];

Let's say student of index 0, 2 returned his homework.
Then you should iterate the array and modify the false to true of responding index.

for(i=0;i<Data.length;i++){
   if((i == 0) || (i == 2)){
      Data[i] = true;
   }
}

console.log(Data); // [ true, false, true, false, false]

It has time complexity of O(n).

Using binary expression & bitwise operator

Instead of using array, lets use binary expression. Instead of true, we use 1 and false for 0. So, initial state would be like this.

let Data = 0b00000;

It is a single number, compare to array, it save lots of memory if we think the number of students become larger.

For same case of updating, we can use | bitwise operator. To update the state of student of index 0, 2...

Data = Data | 101000 ;
console.log(Data); // 101000

Let's say we want the list of students who didn't returned homework yet.

const yetRetured = ~Data;
console.log(yetReturned); // 010111

If new student was added to class,

Data = Data << 1 ;
console.log(Data); // 1010000

It's way more simple!

Case2. Checking flags

Let' say we operate website and want to check whether the state of user satisfies multiple flags. For example,

flag A = 'Is user authenticated?'
flag B = 'Is user in unprohibited region?'
flag C = 'Is user human(not bot)?'
flag D = 'Is user's payment is accepted?'

Similar to Case 1, we can use array and multiple if statements. But it's way more easier and simpler to use binary expression. Let's match one-to-one with flags and binary digits.

flag A = 0001(2) = 1
flag B = 0010(2) = 2
flag C = 0100(2) = 4
flag D = 1000(2) = 8

Then we can check user's state as an integer with following function.

function raiseflag(binary){
  const flagA = 0b0001;
  const flagB = 0b0010;
  const flagC = 0b0100;
  const flagD = 0b1000;
  const flags = [];

  if(binary & flagA) {
    flags.push('flagA');
  }
    if(binary & flagB) {
    flags.push('flagB');
  }
    if(binary & flagC) {
    flags.push('flagC');
  }
    if(binary & flagD) {
    flags.push('flagD');
  }
  return flags;
}

console.log(raiseflag(10)); // ["flagB", "flagD"]

11. JavaScript Engines

MOYED — Mon, 31 Jan 2022 06:33:47 +0000

Articles

JS Engine

JS engine is a program that converts JS code into lower level or machine code that microprocessors can understand. The goal of JS engine is to generate the most optimzied code in shortest time possible.

Uniqueness of JS engine

One interesting feature of Javascript is that JS is dynamic typing. It means that we don't have to specify the type of variable when we declare it.

let number = 17;

We didn't declared the variable number as an integer or number type. But JS engine dynamically converts it as a number as a machine code. So how does JS engine work?

How it works

First, JS engine parses the source code, and generates the Abstract Syntax Tree(AST).
Then, based on AST, interpreter generates the bytecode and executes it.
While it executes the bytecode, if the function is 'hot', which means that it is used multiple times, it sends the profiling data to the optimizing compiler.
Based on the data from previous executions, optimizing compiler generates the optimized code which is executed faster than bytecode.
If the assumption is changed, it de-optimizes and goes back to interpreter.

JIT(Just in time) Compilation

Often we call the JS engine does JIT compilation. It means that JS engine generates machine code during the run time, not ahead of time(AOT). So because of this, JS engine understands even we don't specify the type of variablesor objects. As I mentioned, JS engine compiles and executes together with the help of interpreter & optimizing compiler.

On the other hand, in C++, C++ engine compiles and then executes. Which means that we should specify the type of varible, like this.

int number = 17;

V8

In V8, interpreter is called 'ignition' and optimizing compiler is called 'turbofan'. This is an example of how V8 engine works in given source code.

let result = 0;
for (let i = 0; i < 4242424242; ++i) {
    result += i;
}
console.log(result);

V8 starts to run the soruce code with ignition and starts to generate and execute the bytecode. When the engine notice its 'hot'(because the same function is repeated over time), turbofan frontend starts to generate profiling data of given function and sends it to the turbofan. Turbofan starts to generate optimized code.

Different types of JS engines

There are lots of different types of JS engines according to browsers.

It's good to have numerous JS engines because these engines would compete and eventually become better as time goes.

Why do they differ?

But why are engines different each other? Because there isn't a sole best solution. As I said earlier, the ultimate goal of JS engine is to generate the most optimized code as fast it can. In fact, there is trade-off between generating code quickly, and executing code quickly.

So some engines with more optimzing tiers, tend to focus on executing fast, while it takes long time to generate it. And engines with less optimizing tiers focuses on generating code quickly, while it takes more time to execute because it is less optimized

There's another trade-off that JS engines consider.

More optimization takes more memory. So, trade-off between optimization and memory usage should be also considered.

Object Optimization

Objects are just dictionaries which key is string type. String kyes are mapped to something called "property attributes".

Property attributes

Value: the value retuned by accessing property ex) object.x
Writable: whether it can be reassigned
Ennumerable: whether it can be used in loops
Configurable: whether it is deleteable

We can get Property attributes by Object.getownPropertydescript API.

Problem

The problem of storing object this way is that if there are lots of objects, we should allocate memories for each objects, which is wasteful. So, JS engine uses unique mechanism for handling objects.

Shapes

If objects has same properties, we call that objects have same 'shapes'.(shapes is synonym to hidden clases, map, structure.)

let object1 = {
  x: 1,
  y: 2
}

let object2 = {
  x: 5,
  y: 6
}

Object1 and object2 has same shape.

JS engine uses this concept called shape internally, to handle objects in more optimized way.

Object <-> Shape

In object, only the values are stored and other property attributes are stored in shape. In shape, instead of the value, offset property is mapped to property of object. offset is the index where we can find the value according to the property. For example, for property x, we can find the value is the 0th place in object.

Same shape objects

In above exmaple, a and b has same shape. Instead of storing each property attributes to each objects, we store property attributes except value into shape. Using this mechanism, for 1000 objects for same shape, we need only one shape.which can save memory space.

Adding property to object

What happens when we start with certain shape and add properties?

let object = {};
object.x = 5;
object.y = 6;

Something called transition chain occurs.

transition chain

New shapes are introduced when we add new properties. If we want to find the value of propert x, we walk through the chain until we find the shape that has property x. Then we look for the offset, which is 0. 0th value of Object o is 5. So, o.x = 5.

Still slow...

However, transition chain is still slow if there are multiple shapes included in chain. Time to find the value of property is O(n). So, to make it faster, we introduce ShapeTable. Shapetable is a dictionary which property maps to the corresponding shape.

So, we are back to dictionaries. So why use shape if it's just more abstract?

IC, Inline Caches

Here comes the IC. Ic is ingredient to make JS run fast and the main motivation for having shapes.

How ICs work?

JS engine use ICs to memorize information on where to find properties on objects which can reduce the number of lookups.

As we run the above code, interpreter generates the bytecode. Inline Caches are stored in get_by_id and has two slots which are uninitialized.

As we execute the code with the given object, get_by_id looks up the property x and finds the offset 0 and looks for the value.

After we execute, IC stores and maps the shape and offset which the property was found.

For same shape objects, with ICs, JS engine just first compares the shape, and load the value from memorized offset.

Takeaways

Always initialize your object same shape as possible as you can. It boosts the optimization
JS engine generates machine code in runtime.

Taking flexbox to next level

MOYED — Wed, 26 Jan 2022 14:43:36 +0000

flex-flow

Mix of flex-direction and flex-wrap

.container {
    display: flex;
    flex-flow: row wrap;
}

justify-content & align-items

justify-content

default: flex-start
align-items

default: stretch

align-items work if a) parent element has height, b) some of items are bigger
```
.container {
    align-items: baseline;
/* align the first line of text */
}
```

align-contents

Works with multiple rows. Which align-items work for items inside individual rows.

default: stretch

flex-grow & flex-shrink

flex-grow

default: flex-grow: 0

Flex item grows relative to the given unit of flex-grow. For flex-grow: 0, it doesn’t grow as it fits the minimum size of the content.
flex-shrink

default: flex-shrink: 1

Flex item shrinks relative to the given unit of flex-shrink. For flex-shrink: 0, it doesn’t shrink.

flex-basis

Setting width means giving its ideal width.

If we set min-width or min-height, it can interrupt flex-basis

default: flex-basis: auto

Find the given width
If there’s no explicit width, fit to given content size.
flex-basis vs width

flex-basis works for main axis. Which means that if the flex-direction is column, flex-basis becomes height

flex-basis: 0

Ideal width is 0. So, it shrinks as much as possible.

Using flex-basis on image element has bug

.img {
    flex-basis: 600px;
  min-width: 0;
  min-height: 0;
}

flex

Mix of flex-grow, flex-shrink, flex-basis

default: flex: 0 1 auto

flex: 1

flex-grow: 1, flex-basis: 0
flex: auto

flex-grow: 1, flex-shrink: 1, flex-basis: auto

align-self

Can align item individually for sub-main axis

margin: auto in flexbox

In flexbox, margin: auto works for all 4 directions. Also, we can use margin-top: auto to push the element to the bottom.

.container {
    display: flex;
    flex-direction column;
}

.item {
    margin-top: auto;
}

Putting it on center of page

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

10. setTimeout, setInterval, and requestAnimationFrame

MOYED — Mon, 24 Jan 2022 13:22:16 +0000

setTimeout, setInterval, and requestAnimationFrame are 3 most common APIs for scheduling call.

SetTimeout & setInterval

Definition

setTimeout : allows us to run function once after given time.

- `setInterval` : allows us to run function repeatedly starting after given time, repeating continuously at the interval.

setTimeout

syntax

setTimeout(callback, delay, arg1, arg2,...)

Parameter from arg1, arg2,.. is optional.

Call to setTimeout returns "timer identifier" timerId.

We can use clearTimeout to cancel execution. The callback given as a parameter stays in memory untill we call clearTimeout.

setInterval

Most parts of syntax is similar to setTimeout. Instead of clearTimeout, we use clearInterval.

using setInterval & setTimeout for repeating function for given time period


 jsx
let timerId = setInterval(()=>alert('tick'), 2000);

setTimeout(()=>{clearInterval(timerId); alert('stop');}, 5000);

In above snippet, we planned to print 'tick' for every 2sec, and it stops after 5sec.

Nested setTimeout

For scheduling repeated function, there is a alternative for setInterval. It is using nested setTimeout. The advantage is that we can set delay between executions more precisely. It's more flexible.


 jsx
let delay = 2000;
let timerId = setTimeout(function tick() {
  delay = 2000;
  console.log('tick');
  timerId = setTimeout(tick, 2000); // (*)
  const random = Math.random(0,1000);
  console.log(random)
  if(random%2 == 0) {
    delay = 1000;
  }
}, delay);

setInterval vs Nested setTimeout

Note that both of methods do not guarantee exact delay of given time.

setInterval

setInterval calls function in given interval. It only guarantees that function will be passed to STACK in exeact interval. For example, if the given interval is 1sec, it means that function is called every 1sec.

One big disadvantage of this mechanism is that It doesn't guarantees the interval of execution. If the previous function ofsetInterval's execution takes lots of time, the callback of setInterval can be executed unexepectedly.

Nested setTimeout

On the other hand, Nested setTimeout guarantees untill our method gets fully executed it will never be sent for another execution.

Other

Another alternative for handling repeating callback is using aync setInterval.


 jsx
const setIntervalAsync = (fn, ms) => {
  fn().then(() => {
    setTimeout(() => setIntervalAsync(fn, ms), ms);
  });
};

setIntervalAsync(() => fetch(/* blah */), 3000);

Zero delay setTimeout

If we set interval of setTimeout to 0, it is not executed right away. The reason is because setTimeout is handled by Web API and task queue and then pushed to stack. So, it is scheduled 'right after' the current script. If current script is over, which means that stack is empty, then it is executed.

requestAnimationFrame

requestAnimationFram is used when we have to handle repeated animation changes in javascript.

Why use requestAnimationFrame?

Problems with setTimeout & setInterval

As mentioned above, the interval between animation is inconsistent.
Layout thrashing happens. Layout thrashing is when browser is froced to perform unnecessary reflows of the page before the user's screen is able to display the changes.

Benefits of requestAnimationFrame

It allows me to execute code on the enxt available screen repaint, which syncs with browser & hardware. It makes smoother animation.
If the page is in inactive tabls, animation stops automatically, whcih saves system resources.
Battery-friendly.

syntax

requestAnimationFrame(callback)

Runs callback when screen is ready to accept the next screen repaint.
The callback function automatically passes timestamp which indicates the precise time requestAnimationFrame is called.
requestAnimationFrame returns non 0 integer that can be passed to cancelAnimationFrame for cancelling it.

To repeatedly call callback function, we should use it recursively.


 jsx
function repeat(){
  // animation
   requestAnimationFrame(repeat);
}

requestAnimationFrame(repeat);

9. Message Queue and Event Loop

MOYED — Sun, 23 Jan 2022 14:15:50 +0000

Articles

Question

How is Javascript asynchronous and single-threaded in same time?

The answer is Javascript is single=threaded, but not quite asynchronous. Asynchronous tasks are handled by the environment around Javascript like browser for example. Browser contains Web APIs, Task queue, Microtask queue, and Event loop which handles asychronous tasks.

Event loop

Event loop is a running process that watches call stack & queues. If the call stack is empty, it takes first event in Task queue and pushes it to the call stack.

Tick represents an iteration that event loop executes.

Mictrotask Queue (Job Queue)

Most asynchronous callbacks like setTimeout or setInterval goes to Task queue when it is fired. However, in ES6, Mictrotask queue was introduced as a queue that stores callback from the Promise object, MutationObserver, and etc.

Main difference between Task queue vs Microtask Queue

Most importantly, Mictrotask queue has priority to Task queue.
Additonaly, Mictrotask queue continues to push its callback into call stack untill the Mictrotask queue is empty.

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end'); 
// script start - promise1 - promise2 - setTimeout - script end

Although setTImeout function's callback is added to Task queue faster than Promise object's callback, as event loop visits to microtask queue first, Promise object's callback is pushed to call stack and executed first.

Another point is that promise1 and promise2 logged at one stream. In case of Task queue, event loop only pushes callback to call stack one at a time. However, as it's previously mentioned, mictrotask queue moves stored callbacks to call stack untill it's empty.

8. IIFE, Modules, and Namespaces

MOYED — Fri, 21 Jan 2022 14:30:54 +0000

Function Expression

Named function expression's name can be used inside the function, as recursion.

IIFE

IIFE is a function that dies immediately after it came to life.

Using ! in front of function can enforce function expression, but can only use when we don't need return value.

!function sum(num1,num2){
  console.log(num1+num2)
}(1,2);

The classical form is enclosing function with ().

(function sum(num1,num2){
  console.log(num1+num2)
})(1,2);

Private & Public

Any variables that declared in side IIFE are not visible to outside world. It helps not polluting global scope.

However, IIFE can expose public function by returning it. So, we can access to pirvate variables through this public funciton. We call this function a Closures.

Classical modue pattern using IIFE & Closures

const Userlogin = (function login() {
  const password = "password123";

  return function check(input) {
    if(input == password) {
      console.log("authenticated");
    } else {
      console.log("wrong");
    }
  }
})();

Userlogin("password123"); // authenticated

check fucntion is public, so it is accessible in global scope, but password variable is private, which is not accessible.

Namespaces

Namespace is container of identifiers. We use namespaces to avoid collisons with outher identifiers in global namespace. **Namespacing **is an act of wrapping a set of entities, variables, functions, objects, under a single umbrella term.

Modules

IN ES6, built-in modules were finally introduced. Before ES6, developers used external libraries like CommonJS for modules. In ES6, Everything inside modules are private by default and it runs in a strict mode.

Benefits of using modules

Code can be splitted into smaller files of similar functionality.
Modules can be shared across number of applications.

As IIFE & Closures and Modules have same goal for using it, IIFE & Closure pattern could be replaced by ES6 modules.

Exporting & Importing

Single Export

// utils.js

function sum(num1, num2) {
  return num1+num2;
}
function substract(num1, num2) {
  return num1-num2;
}

export {sum,substract};

// main.js

import {sum,substract} from './utils.js';

console.log(sum(1,2));

// or

import * as utils from './utils.js';
console.log(utils.sum(1,2));

Named Export

// utils.js

export function sum(num1, num2) {
  return num1+num2;
}
export function substract(num1, num2) {
  return num1-num2;
}

Default Export

// utils.js

var utils = {
  sum: function(num1, num2) {
    return num1+num2;
  },
  substract: function(num1, num2) {
    return num1-num2;
  }
}

export default utils;

// main.js

import utils from './utils.js';

console.log(utils.sum(1,2));

import and export statements are hoisted, which acts like it's executed at the top of the program.

CommonJS vs ES6 modules

The biggest difference is 'how it works'. ES6 modules first parses, looks for imports, load and then exectues. On the other hand, CommonJS loads dependency on demand while executing.

// index.html
<script type="module" src="./a.js"></script>
// a.js
console.log('executing a.js')
import { helloWorld } from './b.js'
helloWorld()
// b.js
console.log('executing b.js')
export function helloWorld () {
  console.log('hello world')
}

Above snippet works different in ES6 modules and CommonJS.

ES6 modules

executing b.js
executing a.js
hello world

CommonJS

executing a.js
executing b.js
hello world

Dynamic input()

So basically, in ES6, import keyword is static. However, there is a way to use import dynamically.

let modulePath = prompt("Which module to load?");

import(modulePath)
  .then(obj => <module object>)
  .catch(err => <loading error, e.g. if no such module>)

Dynamic import returns promise object of request module which is creted after fetching and evaluating module's dependency and itself. It can enhance the performance of the program.

7. Expression vs Statement

MOYED — Thu, 20 Jan 2022 13:05:27 +0000

Articles

Expressions vs Statement

Function declarations are hoisted, but function expressions aren't. Precisely, variable assigned to function expressions are hoisted, but it's uninitialized, so we can't use it before we assgin it.

Expressions

After function expression has stored in a variable, variable can be used as a function, which means that it is invoked by variable's name

let sum = function(num1, num2){
  return num1 + num2;
};

console.log(sum(1,2));

When to use function expressions

Closure

function checkValid(input) {
  const password = "password123";
  return function() {
    if(input === password) {
      console.log("verified!");
    } else {
      console.log("wrong!");
    }
  }
}

checkValid("password123")(); // verified!
checkValid("password1234")(); // wrong!
console.log(password); // ReferenceError: password is not defined

In this snippet, function expression is used for closure that is closing over variable password. Although, we cannot access to this variable in global scope, we can use the inner function inside checkValid function which can still access to password. By using closure, we can hide the password, but can still check if the input is valid.

Passing as arguments

function checkSum(num1, num2, callback) {
  if(callback(num1, num2) == num1 + num2) {
    return "It's sum function!";
  } else {
    return "Error";
  }
}

const sum = function(num1, num2) {
  return num1 + num2;
}

console.log(checkSum(2,3,sum)); // It's a sum function!

Function checkSum checks if the given function is a sum function. By using function expression, we made function sum and it's given as a parameter to checkSum function.

IIFE IIFE helps preventing functions and variables from affecting the global scope.

const checkValid = ((input) => {
  const password = "password123";
  return function(input) {
    if(input === password) {
      console.log("verified!");
    } else {
      console.log("wrong!");
    }
  }
})();


checkValid("password123"); // verified!
checkValid("password1234"); // wrong!

6. Function Scope, Block Scope and Lexical Scope

MOYED — Wed, 19 Jan 2022 13:04:49 +0000

Articles

JavaScript Functions — Understanding The Basics — Brandon Morelli done
The battle between Function Scope and Block Scope — Marius Herring done var problem
JavaScript Scope and Closures — Zell Liew done
When to use a function declaration vs. a function expression ― Amber Wilkie done
Functions / Function scope ― MDN main for closure

Functions

Functions are executed when they are called/invoked.
Functions always returns value. If value isn't given, it returns undefined.
Functions are objects. ### Defining functions #### Function Declaration
Named functions are declared.
Hoisted

add(1,2) // 3

function add(value1, value2) {
    console.log(value1 + value2);
    return 1;
  }

Created in global scope #### Function Expression
Named or anonymous function are possible.
Not hoisted

addNumber(2,3); // "ReferenceError: Cannot access 'addNumber' before initialization

const addNumber = function (value1, value2) {
    console.log(value1 + value2);
    return 1;
  }

Arrow function

Shorter syntax
Not create own this value

const addNumber = (value1, value2) => {
    console.log(this);
    return this;
  }

addNumber(2,3); // [object Window]

IIFE(Immediately invoked function expressions)

((value1, value2) => {
    console.log(value1 + value2);
    return 1;
  })(2,3);

Scope

Scope defines what variable we can access to.

Global scope

Variables declared outside function, block are all contained in global scope.

POLE; Principle of least exposure

We should minimize the exposure of variables registered in each scope. It means that we should try our best to avoid delcaring variables in global scope. Why?

Naming Collision

If we declare same name variable twice, it makes some problems. First, with var, the variable would shadow the previous value assigned. Second, with let and const , it would give error.

Unexpected behavior

Let' say that I declared data array in global scope. Then other developer can easily alter the value.

Unintended dependency

Let's say that I declared data array for specific function's argument. If other developer uses data array, unintended dependency has occured. If I plan to change this array into object, many parts using this array should be changed.

Local scope

Function scope

var is function scope. Precisely, Javascript had only function scope before ES6. It exists within the scope of function it's declared.

const password = "3";

function checkIf(input) {
  if(input == password) {
    console.log(true);
  }
  else {
    console.log(false);
  }
}
console.log(password); // 3
checkIf(3); // true

Here, input parameter is declared in function checkIf scope. password variable is declared in global scope which is very vulnerable. So, How can we hide the password, still accessing to checkIf function?

function hidePassword() {
  const password = "3";

  return checkIf;
  function checkIf(input) {
    if(input == password) {
      console.log(true);
    }
    else {
      console.log(false);
    }
}
}

console.log(password); // ReferenceError: password is not defined
const testCase = hidePassword();
testCase(3); // true

We hide the password in hidePassword function. As checkIf function is inside the hidePassword function and returned, we can access to this function.


const testCase =(()=>{
  const password = "3";
  return checkIf;
  function checkIf(input) {
    if(input == password) {
      console.log(true);
    }
    else {
      console.log(false);
    }
  }
})();

testCase(3); // true

By using IIFE, we can write it more clearer, shorter.

Block scope

As let and const introduced in ES6, both keywords are block scope. {} becomes scope if it contains let or const.

function add(value1, value2) {
  {
    let value3 = 4;
  }
  console.log(value3);
}

add(1,2); // "ReferenceError: value3 is not defined"

We have mentioned about POLE. So, it's best to put let or const declared variable in block scope as possible.

What is Lexical scope?

JS program processes in two phases; Compilation & Execution.
In compilation, JS Engine parses through the code and checks which variables corresponds to which scope. This means that scope of variables are determined before execution, which we call it lexical scope.
For example,

let a = "3";
console.log(a); // SyntaxError: Unexpected token '.'
let b = ."4";

in this example, if there's no compilation phase, console.log(a) should work fine. However, as the error was found before execution phase, it return error.

Example

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  var name = 'nero';
  log();
}
wrapper(); // zero

function log scope was determined before execution. It is nested in global scope, not wrapper scope. So, as log is executed as wrapper is executed, first, engine looks at variable name in funciton log scope. As it is not declared in it, engine looks at outer scope, which is global scope. That's why it returns zero.

5. ==, ===, typeof, instaceof

MOYED — Sun, 16 Jan 2022 09:37:51 +0000

Articles

Checking Data type is not easy in Javascript.

== vs ===

==

Operates loose equality
Does type coercion ### ===
Operates strict equality
Both type and value have to be same to return true

typeof vs instanceof

typeof

typeof returns object for all values except primitve type. (null is one exception.)

typeof([1,2,3]); // 'object'
typeof({}); // 'object'
typeof(1); // 'number'

typeof(null); // 'object'

It is ueless to distinguish between different kinds of objects.

instanceof

It checks whether object is instance of certain type.

function Animal(){};

var a = new Animal();
console.log(a instanceof Animal); // true

console.log([1,2,3] instanceof Array); // true

We can use constructor method to check the type.

console.log(a.constructor == Animal); // true

console.log([1,2,3].constructor = Array); // true

problems of instanceof

Not walks up the prototype chain.
Error with primitve values.

console.log(3 instanceof Number); // false
console.log(true instanceof Boolean); // false

For alternative, we can use constructor method for number, string, boolean type values. This works because, Javascript autoboxes given primitive type values with object wrapper. Precisely, it makes primitive value to object type, so this is why it works.

console.log((3).constructor == Number); // true
console.log('abc'.constructor == String); // true

Spinoff

Absence of a value

Undefined vs null

undefined represents the value that doesn't exists in compiler. Following situations returns undefined. undefined is not a literal , it is a property of global object.

unassgined variable
undeclared object property
default return value of function which doesn't returns
value using void operator

null however, represents the intentional absence of vaule. There is a bug with null using typeof method.

console.log(typeof null); // object

Performance

strict equality is no slower than loose equality because they both check the operand types.
strict equality is faster than loose equality when types of operands differ.
of course, loose equality produces unexpected results.

DEV Community: MOYED

14. Factories and Classes

Articles

Factories

Closure

Prototype

Class is just template of prototype

._proto_ vs .prototype

All methods (except static) of class are stored in prototype.

Classes

normal & static methods

constructor function

Getters/Setters

Subclasses

extend keyword

super keyword

Prototype relation

Factory vs Classes

Data Encapsulation

Classes; data encapsulation / getter & setter

Classes; data encapsulation / # prefix

this keyword

Memory cost

13. DOM and Layout Trees

Articles

Window Object

Document Object Model (DOM)

Browser Object Model (BOM)

Process of Render Tree

DOM

Manipulating DOM

Methods

Events

Trasversing DOM

General methods

Element specified methods

DOM VS ?

DOM vs HTML source code

1. DOM is modified by client-side Javascript

2. Browser automatically fixes error in source code

DOM vs Render Tree

DOM vs What in DevTools

CSS Grid: The ultimate layout tool

Ultimate layout tool

Setting up a grid

Placing items on the grid

Spanning

Similarities to flexbox

Making gap between columns & rows

grid-areas

minmax()

fr unit

12. Binary Expression, Bitwise Operator

Articles

Bits

Bitwise Operators

& (AND)

| (OR)

^ (XOR)

~ (NOT)

a<<b (left shift)

a>>b (right shift)

Two's complement

How to express number in base 2

using parseInt

using binary literals (ES6)

Real world implementation of binary expression

Case1. Data of which student returned his homework

Using Array

Using binary expression & bitwise operator

Case2. Checking flags

11. JavaScript Engines

Articles

JS Engine

Uniqueness of JS engine

How it works

JIT(Just in time) Compilation

V8

Different types of JS engines

Why do they differ?

- `setInterval` : allows us to run function repeatedly starting after given time, repeating continuously at the interval.