Forem: Mohammed Ali

Objects in JavaScript

Mohammed Ali — Thu, 19 Sep 2024 14:10:26 +0000

has key-value pairs, separated by colon. The key is also known as property
Similarity: index of arrays are replaced by keys in objects.
Object literal syntax is directly writing properties inside {}
Order during retrieval does not matter in case of objects whereas order matters in arrays.

Arrays: used for structured data
Objects: used for unstructured data

Property lookup methods in objects:

using dot notation
using brackets notation: key is defined as string in [] inside quotes, the key name can be an expression also. Ex. obj['firstName']; Ex. obj[2+3]; Putting an expression won't work with dot notation. We need to use the final property name, and not the computed property name.

Hence, when we have a computed property name its recommended to use brackets notation.

undefined will be returned if a property doesn't exist and we try to access it.

obj['insta-id'] = '@juju';

Refer operator precedence table on MDN for more info.

Object Methods

Fns are a type of value. Hence, we can create key-value pair in which the value is a fn. Means, we can add fns to objects.
Fn expression becomes methods inside objects i.e a fn attached to an object as a value for a key.
Fn declaration inside an object won't work.
method is also a property on the object which holds a fn value.
We can have values in the form of : array, string, boolean, fn etc.
obj.propName(); // will get the fn value and execute it using the ()

'this' : refers to the object on which its called

const person = {
  fName: 'Raja',
  lName: 'Rajeshwar',
  bYear: 1970,
  job: 'King',
  friends: ["Billu","Penchu","Ramesh"],

  calcAge: function(){
    // this will be the object which has called this method.
    // Its used to reference the object, and not hardcode it.
    console.log(this);
    // a new property is created on the person object named 'age'
    this.age = 2024 - this.bYear
    return this.age;
  }
}

person.calcAge(1970);
// age property will only exist if this fn was called atleast once else it won't exist.
person.age;

Arrays, Fns are all under the hood objects in JS. Hence, they have their own methods.

Intro to DSA & Big O Notation

Mohammed Ali — Thu, 19 Sep 2024 10:59:42 +0000

Notes to master DSA:

Master DSA to be "eligible" for high paying salaries offered to S/w Ers.
DSA is the major chunk of Software Engineering.
Before writing code, make sure you understand the bigger picture and then drill down into details.
Its all about understanding the concepts visually, and then translating those concepts into code via any l/g as DSA is language agnostic.
Every upcoming concept is somehow linked to previous concepts. Hence, don't hop topics or move forward unless you have mastered the concept thoroughly by practicing it.
When we learn concepts visually, we get deeper understanding of the material which inturn helps us to retain the knowledge for longer duration.
If you follow these advices, you'll have nothing to lose.

Linear DS:
Arrays
LinkedList(LL) & Doubly LL (DLL)
Stack
Queue & Circular Queue

Non-linear DS:
Trees
Graphs

Big O Notation

It is essential to understand this notation for perf comparison of algos.
Its a mathematical way for comparing efficiency of algos.

Time Complexity

The faster the code runs, the lower it will be
V. impt for most of the interviews.

Space Complexity

Considered rarely as compared to time complexity due to low storage cost.
Need to be understood, as an interviewer may ask you from this also.

Three Greek Letters:

Omega
Theta
Omicron i.e Big-O [seen most often]

Cases for algo

Best case [represented using Omega]
Avg case [represented using Theta]
Worst case [represented using Omicron]

Technically there is no best case of avg case Big-O. They are denoted using omega & theta respectively.
We are always measuring worst case.

## O(n): Efficient Code
Proportional
Its simplified by dropping the constant values.
An operation happens 'n' times, where n is passed as an argument as shown below.
Always going to be a straight line having slope 1, as no of operations is proportional to n.
X axis - value of n.
Y axis - no of operations 

// O(n)
function printItems(n){
  for(let i=1; i<=n; i++){
    console.log(i);
  }
}
printItems(9);

// O(n) + O(n) i.e O(2n) operations. As we drop constants, it eventually becomes O(n)
function printItems(n){
  for(let i=0; i<n; i++){
    console.log(i);
  }
  for(let j=0; j<n; j++){
    console.log(j);
  }
}
printItems(10);

## O(n^2):
Nested loops.
No of items which are output in this case are n*n for a 'n' input.
function printItems(n){
  for(let i=0; i<n; i++){
    console.log('\n');
    for(let j=0; j<n; j++){
      console.log(i, j);
    }
  }
}
printItems(4);

## O(n^3):
No of items which are output in this case are n*n*n for a 'n' input.
// O(n*n*n)
function printItems(n){
  for(let i=0; i<n; i++){
    console.log(`Outer Iteration ${i}`);
    for(let j=0; j<n; j++){
      console.log(`  Mid Iteration ${j}`);
      for(let k=0; k<n; k++){
        //console.log("Inner");
        console.log(`    Inner Iteration ${i} ${j} ${k}`);
      }
    }
  }
}
printItems(3);


## Comparison of Time Complexity:
O(n) > O(n*n)


## Drop non-dominants:
function xxx(){
  // O(n*n)
  Nested for loop

  // O(n)
  Single for loop
}
Complexity for the below code will O(n*n) + O(n) 
By dropping non-dominants, it will become O(n*n) 
As O(n) will be negligible as the n value grows. O(n*n) is dominant term, O(n) is non-dominnat term here.

## O(1):
Referred as Constant time i.e No of operations do not change as 'n' changes.
Single operation irrespective of no of operands.
MOST EFFICIENT. Nothing is more efficient than this. 
Its a flat line overlapping x-axis on graph.


// O(1)
function printItems(n){
  return n+n+n+n;
}
printItems(3);


## Comparison of Time Complexity:
O(1) > O(n) > O(n*n)

## O(log n)
Divide and conquer technique.
Partitioning into halves until goal is achieved.

log(base2) of 8 = 3 i.e we are basically saying 2 to what power is 8. That power denotes the no of operations to get to the result.

Also, to put it in another way we can say how many times we need to divide 8 into halves(this makes base 2 for logarithmic operation) to get to the single resulting target item which is 3.

Ex. Amazing application is say for a 1,000,000,000 array size, how many times we need to cut to get to the target item.
log(base 2) 1,000,000,000 = 31 times
i.e 2^31 will make us reach the target item.

Hence, if we do the search in linear fashion then we need to scan for billion items in the array.
But if we use divide & conquer approach, we can find it in just 31 steps.
This is the immense power of O(log n)

## Comparison of Time Complexity:
O(1) > O(log n) > O(n) > O(n*n)
Best is O(1) or O(log n)
Acceptable is O(n)

O(n log n) : 
Used in some sorting Algos.
Most efficient sorting algo we can make unless we are sorting only nums.

Tricky Interview Ques: Different Terms for Inputs.
function printItems(a,b){
  // O(a)
  for(let i=0; i<a; i++){
    console.log(i);
  }
  // O(b)
  for(let j=0; j<b; j++){
    console.log(j);
  }
}
printItems(3,5);

O(a) + O(b) we can't have both variables equal to 'n'. Suppose a is 1 and b is 1bn.
Then both will be very different. Hence, it will eventually be O(a + b) is what can call it.
Similarly if these were nested for loops, then it will become O(a * b)

## Arrays
No reindexing is required in arrays for push-pop operations. Hence both are O(1).
Adding-Removing from end in array is O(1)

Reindexing is required in arrays for shift-unshift operations. Hence, both are O(n) operations, where n is no of items in the array.
Adding-Removing from front in array is O(n)

Inserting anywhere in array except start and end positions:
myArr.splice(indexForOperation, itemsToBeRemoved, ContentTobeInsterted)
Remaining array after the items has to be reindexed.
Hence, it will be O(n) and not O(0.5 n) as Big-O always meassures worst case, and not avg case. 0.5 is constant, hence its droppped.
Same is applicable for removing an item from an array also as the items after it has to be reindexed.


Finding an item in an array:
if its by value: O(n)
if its by index: O(1)

Select a DS based on the use-case.
For index based, array will be a great choice.
If a lot of insertion-deletion is perform in the begin, then use some other DS as reindexing will make it slow.

Comparison of Time Complexity for n=100:

O(1) = 1
O(log 100) = 7
O(100) = 100
O(n^2) = 10,000

Comparison of Time Complexity for n=1000:

O(1) = 1
O(log 1000) = ~10
O(1000) = 1000
O(1000*1000) = 1,000,000

Mainly we will focus on these 4:
Big O(n*n): Nested Loops
Big O(n): Proportional
Big O(log n): Divide & conquer
Big O(1): Constant

O(n!) usually happens when we deliberately write bad code.
O(n*n) is horrible Algo
O(n log n) is acceptable and used by certain sorting algos
O(n) : Acceptable
O(log n), O(1) : Best

Space complexity is almost same for all DS i.e O(n).
Space complexity will vary from O(n) to O(log n) or O(1) with sorting algos

Time complexity is what varies based on algo

Best time complexity for sorting other than numbers like string is O(n log n) which is in Quick, Merge, Time, heap sorts.

Best way to apply your learning is to code as much as you can.

Selecting which DS to choose in which problem statement based on Pros-Cons of each DS.

For more info, refer to: bigocheatsheet.com

Execution Context & Call Stack

Mohammed Ali — Wed, 18 Sep 2024 14:29:24 +0000

Creation of global execution context for the top level code i.e code which not inside any fn. Hence, code outside the fn is executed first.
Code inside fn body of fn-decln/exprsn is only executed when its called.

Execution Context(EC)

Environment in which piece of JS is executed.
Stores all the necessary information for some code to be executed like local variables, args passed to a fn.
JS code always runs inside an EC.
Exactly one global EC irrespective of the size of JS project.
Default context, created for code not inside any fn.
Then the code is executed inside the global EC
After the top level code is executed, execution of fns & waiting for C/bs
For each fn call, a new EC is created to exectute that fn. Same goes for methods, as they are also fns attached to objects.
All these ECs together make up the Call Stack.
When all fns are executed, engine waits for CBs to arrive & execute them. Ex. click event callback, provided by the event loop.

What is inside EC

Variable Environment consisting of
let, const, var declarations
Functions
arguments object : stores all the args passed to the fn in its EC.
Each fn gets its own EC as its called. And variables declared end up in variable environment
Scope Chain:
Fns can access variables outside of fns using scope chain.
Contains references to the variables located outside of the current fn and to keep track of the scope chain, it is stored in each EC.
Each EC also get the 'this' keyword.

All these three above are generated during "Creation Phase", right before execution. These the things necessary to run the code in top level.

For arrow fns EC:

We won't be having: arguments object, this keyword. Arrow fns use from their closest regular fn, the above two.

arguments: array like object, containing all the arguments passed into the regular fn, not arrow fn.

Call Stack + Memory Heap = JS Engine

Call Stack

Place where ECs get stacked on top of each other, to keep track of where we are in the execution. The topmost EC is the one we are running. As the execution is over, its removed from the top of stack and the control is trasferred to the underlying EC.
If there is a nested fn call, the outer fn call will be paused so as to return the result of the execution of inner fn on call stack as JS has only one thread of execution. Now the prev EC will become the active EC
Then the top-most EC is popped out of Call Stack as its returned.
Lowest in Call Stack will be global EC, on top it will be fn calls as they occur in order.
Ensures order of execution never gets lost.
In the end, program will be finished and global EC will also be popped out the Call Stack.

JS code runs inside an EC, which are placed on Call Stack.

Hence, we can say that each EC has:
1. Variable environment
2. Scope chain
3. 'this' keyword

Scoping

How our program variables are organized and accessed by JS Engine.
Where do variables live
Where can we access a certain variables and where not.

Lexical Scoping:

JS has leical scoping which means scoping is controlled by placement of fns and blocks in the code.
Ex. A nested fn has access to variables of its parent fn.

Scope:

Space or env in which a certain variable is declared(variable environment in case of fns). Its the variable env which is stored in fns EC.
For fns, Var env & scope both are same.

Three scopes in JS are:
1. Global scope
2. Fn scope
3. Block scope [ES6]

Scope is a place where variables are declared. Hence, true for Fns also as fns are just values stored in variables.

Scope of a Variable

Region of our code where a certain variable can be accessed.

Scope is different from scope of a variable with subtle differences.

## Global Scope:
For top level code
For variables declared outside of any fn or block which are accessible from everywhere
Variables in this scope are at the top of scope chain. Hence, can be used by every nested scope.

## Fn Scope:
Each fn has creates its own scope
Variables are accessible ONLY inside fn, NOT outside. Else Reference Error
Also called local scope
Fn decln, exprsn, arrow all three create their own scopes.
Only way to create scope using ES5 which had only fn & global scope.

## Block Scope:
Introduced in ES6, not only fn but {} also create a scope known as block scope which work only for ES6 variables i.e let-const types. DOesn't work for variables declared with 'var' as its fn scoped.
Variables accessible only inside block i.e {} 
This only applies to variables declared with let-const only.
Fns are also block scoped in ES6 (only in strict mode, should be used)
variables declared using 'var' will be accessible outside the block
Scoped to the current fn or the global scope.
var variables only care about fn, they ignore blocks. They end up in nearest fn scope.

Every nested scope has access to variables from its outer scope & the global scope. Same is applicable to fn arguments also.

If a fn doesn't find the variable in its scope, it looks up the scope chain to find out the varibles in its outer scopes. This process is called variable lookup in scope chain. This doesn't work the other way around i.e we cannot access nested fn variables or scopes from outside the fn or outer scopes.
Sibling scopes cannot access each other's variables
Only the innermost scope can access its outer scopes, not the reverse.

One EC for each fn in the exact order a fn is called is placed on Call Stack with its variables inside the EC. Global EC is at the bottom of the Call Stack

Scope chain:
Its all about the order in which fns are written in the code.
Has nothing to do with order in which fns were called.
Scope chain gets the variable environment from the EC.
Order of fn calls is not relevant to the scope chain at all.

const a = 'Alice';
first();

function first(){
  const b = "Hello";
  second();

  function second(){
    const c = "Hi";
    third();
  }
}

function third(){
  const d = "Hey";
  console.log(d + c + b + a); // Reference Error
}

## Call Stack order:
third() EC - top
second() EC
first() EC
global EC - bottom


Scope Chain:
second() --nested inside--> first() --nested inside--> global scope.
third() is independently defined inside gloabal scope.

Reference Error occurred because both 'c' as well as 'b' cannot be accessed using the scope chain.

Summary:
E-C, Var Env, Cl-Sk, Scope, Scope-chain are all different but related concepts.
Scoping asks the questions where do variables live, where can we access the variables and where not.
Lexical Scoping in JS: Rules of where we can access variables are based exactly where in the code fns and blocks are written.
Every scope has access to all the variables from all its outer scopes. This is scope chain which is a one-way street. An outer scope can never access variables of inner scope.
Scope chain of a certain scope is equal to adding together all the Var Envs of all the parent scopes.
Scope chain has nothing to do with the order in which fns are called. It does not affect the scope chain at all.
When a variable is not found in current scope, engine looks up the scope chain until it finds the variable its looking for. This is called variable look-up.

Math Namespace & BigInt

Mohammed Ali — Fri, 13 Sep 2024 13:09:19 +0000

Math.sqrt i.e sqrt is a part of Math namespace.

// 2 ways to get square root.
Math.sqrt(100); // 10, Method 1
100*(1/2); // 10, Method 2
8*(1/3); // 2, works for cubic root also

Math.max() & Math.min():

Math.max(23,54,12,6,32,98,87,34,11); // 98
// Does type coercion also
Math.min(23,54,12,'6',32,98,87,34,11); // 6
// Does not do parsing
Math.min(23,54,12,'6px',32,98,87,34,11); // NaN

Inbuilt constants on Math object:

Math.PI * (Number.parseFloat('10px')**(2)); // Getting area

Generate a no b/w 1-6:

Math.trunc(Math.random() * 6) + 1;

Generatate a random no b/w an upper-lower limit:

const randomInt = (min, max) => Math.floor(Math.random() * (max-min)) + 1 + min;
randomInt(10,20);

// All of these Math.method() do type coercion.
Math.trunc(25.4); // 25
Math.round(25.4); // 25
Math.floor(25.4); // 25
Math.ceil(25.4); // 26

Math.floor is a better choice for negative numbers.

Math.trunc(-25.4); // -25
Math.floor(-25.4); // -26

// Rounding decimals: .toFixed returns a string, not a number
(2.5).toFixed(0); // '3'
(2.5).toFixed(3); // '2.500'
(2.345).toFixed(2); // '2.35'

// Add a unary + sign to convert it to a no.
+(2.345).toFixed(2); // 2.35

// Number is a primitive, hence they don't have methods. SO behind the scene, JS will do boxing, i.e transform primitive into a no object, perform the operation and then when operation is finished, transform it back to primitive.

Modular or Remainder Operator:

5 % 2; // 1

8 % 3; // 2
8 / 3; // 2.6666666666666665

// Odd or Even
const isEven = n => n%2 === 0;
isEven(20);
isEven(21);
isEven(22);

Usecase: Used to work with all odd rows, even rows, nth time etc.

Numeric Separators: [ES2021]

Used for representing really large numbers
These are underscores which can be placed between numbers. The engine ignores these underscores, its reduces the confusion for devs.
Ex. const diameter = 287_460_000_000;
diameter; // 287460000000

const price = 342_25;
price; // 34225

const fee1 = 1_500;
const fee2 = 15_00;
fee1 === fee2; // true

Underscore can be placed ONLY between numbers.
It cannot be placed adjacent to a dot of decimal.
It also cannot be placed at the begining or the end of the no.

const PI = 3.14_15;
PI; // 3.1415

All are invalid example of numeric separators

const PI = 3.1415; // Cannot be placed in the begining.
const PI = 3.1415; // Cannot be placed in the end.
const PI = 3_.1415; // Cannot be placed adjacent to a decimal dot.
const PI = 3.1415; // Cannot be placed adjacent to a decimal dot.
const PI = 3._1415; // Two in a row cannot be placed.

Converting Strings to Numbers:

Number('2500'); // 2500
Number('25_00'); // NaN , Hence we can only use when directly numbers are assigned to a variable. Hence, if a no is stored in the string or getting a no from an API, then to avoid error don't use '_' numeric separator.
Similar goes for parseInt i.e anything after _ is discarded as shown below:
parseInt('25_00'); // 25

BigInt

Special type of integers, introduced in ES2020
Numbers are represented internally as 64 bits i.e 64 1s or 0s to represent any number. Only 53 are used to store the digits, remaining are used to store the position of decimal point and the sign. Hence, there is a limit on the size of the number i.e ((2*53) - 1). This is the biggest no which JS can safely represent. The base is 2, because we are working in binary form while storing.
2*53 - 1; // 9007199254740991
Number.MAX_SAFE_INTEGER; // 9007199254740991

Anything larger than this is not safe i.e it cannot be represented accurately. Precision will be lost for numbers larger than this as shown in last digit. Sometimes it might work, whereas sometimes it won't.
Number.MAX_SAFE_INTEGER + 1; // 9007199254740992
Number.MAX_SAFE_INTEGER + 2; // 9007199254740992
Number.MAX_SAFE_INTEGER + 3; // 9007199254740994
Number.MAX_SAFE_INTEGER + 4; // 9007199254740996

Incase we get a larger no from an API larger than this, then JS won't be able to deal with it. So to resolve the above issue, BigInt a new primitive data type was introduces in ES2020. This can store integers as large as we want.

An 'n' is added at the end of the no to make it a BigInt. Ex.
const num = 283891738917391283734234324223122313243249821n;
num; // 283891738917391283734234324223122313243249821n

BigInt is JS way of displaying such huge numbers.
Another way using Constructor Fn for creating BigInt number.
const x = BigInt(283891738917391283734234324223122313243249821);
x; // 283891738917391288062871194223849945790676992n

Operations: All arithmetic operators work the same with BigInt;
const x = 100n + 100n;
x; // 200n

const x = 10n * 10n;
x; // 100n

Avoid mixing BigInt numbers with regular numbers

const x = 100n;
const y = 10;
z = x*y; // Error

To make it work, use BigInt constructor Fn:
z = x * BigInt(y);
z; // 1000n

Exception to it are comparsion operators & unary + operator.

20n > 19; // true
20n === 20; // false, === prevents JS from doing type coercion. Both the LHS & RHS have different primitive types, hence results in 'false'.

typeof 20n; // 'bigint'
typeof 20; // 'number'

20n == 20; // true, as JS does type coercion to compare only the values and not the types by converting BigInt to a regular number.
Same goes for this also: 20n == '20'; // true

Exception:

BigInt number is not converted to string on using + operator.
const num = 248923874328974239473829n
"num is huge i.e. " + num; // 'num is huge i.e. 248923874328974239473829'

Note:
Math.sqrt doesn't work with BigInt.
During division of BigInts, it discards the decimal part.
10 / 3; // 3.3333333333333335
10n / 3n; // 3n
12n / 3n; // 4n

This new primitive type adds some new capabilities to JS language to make it work with huge no.

Ultimate Guide for DOM API

Mohammed Ali — Fri, 06 Sep 2024 10:32:02 +0000

// Selecting Elements: document is not the real DOM element.
document.documentElement; // Select the entire page
document.head; // Select the head
document.body; // Select the body

document.querySelector('.header');    // return first match
const allSections = document.querySelectorAll('.section'); // return all-matches in a static NodeList

document.getElementById('id-name');        // 
document.getElementsByClassName('');        // return all-matches in an live HTMLCollection
const allBtns = document.getElementsByTagName('button');   // return all-matches in an live HTMLCollection

// Creating & Inserting Elements: insertAdjacentHTML
const msg = document.createElement('div'); // create a DOM element, stores it into msg
msg.classList.add('cookie-msg');
// msg.textContent = 'We use cookies for improved functionality & analytics';
msg.innerHTML = 'We use cookies for improved functionality & analytics <button class="btn">Got it</button>';
header.append(msg);

// prepend: Adds the element as the first child.
// append: Adds the element as the last child.
// DOM element is unique, it can exist at only one place at a time.

// To insert multiple copies of the same element, true refers all childNodes will also be copied.
header.append(msg.cloneNode(true));

header.before(msg); // insert before header element as a sibling.
header.after(msg); // insert after header element as a sibling.

// Delete Elements: document.querySelector will also work, but below is another way.
// remove() is a recent method, earlier we could only remove child elements by selecting the parent element first, then removing the child. Ex msg.parentElement.removeChild(msg);
document.querySelector('btn-close').addEventListener('click', function(){
  msg.remove();
});


// Styles: will be applied as inline styles.
msg.style.backgroundColor = '#37383d';
msg.style.width = '120%';

msg.style.height; // won't show anything. This works only for properties which we have explicitly set like the above properties.

getComputedStyle(msg).color; // will show a huge object containing all styles.
getComputedStyle(msg).height;

// Increase height by 10px
msg.style.height = Number.parseFloat(getCOmputedStyle(msg).height,10) + 40 + 'px';

document.documentElement.style.setProperty('--color-primary','orangered');

// Attributes
const logo = document.querySelector('.nav__logo');
logo.alt;
logo.className;

// Setting an attribute using JS.
logo.alt = 'Beautiful minimalist logo'

// won't work as its not a standard attribute for that element.
logo.designer; 

// Now it will work.
logo.getAttribute('designer'); 
logo.setAttribute('company', 'Google');

logo.src; // absolute path
logo.getAttribute('src'); // relative path

// Both will be same as they are absolute in both cases.
link.href;
link.getAttribute('href');

// Data-attributes written in 
// HTML as data-version-number
// JS as logo.dataset.versionNumber;
// such special attributes are always stored in dataset object.


// Classes
logo.classList.add()     // Can take multiple classes as args
logo.classList.remove()  // Can take multiple classes as args
logo.classList.toggle()
logo.classList.contains()

// Overwrite all existing classes, replace with the bottom class mentioned.
logo.className = 'xyz'

Notes:
Click on anchor link will make the page jump to top. This is prevented by using e.preventDefault()
NodeList is not an array, but it has forEach method.
Ex btnOpenModal.forEach(btn => btn.addEventListener('click', openModal));

Array

Mohammed Ali — Thu, 05 Sep 2024 12:40:29 +0000

Methods are fns which can be called on objects
Arrays are objects, hence they also have methods in JS.

slice(begin): extract part of array in a new array, without mutating the original array.

let arr = ['a','b','c','d','e'];

// Usecase: Extract till index passed as argument
arr.slice(2); // [ 'c', 'd', 'e' ]

// Usecase: Extract from [first index] to [second index-1] value.
arr.slice(2,4); // [ 'c', 'd' ] i.e Length of array will be end-begin or 4-2 = 2 

// Usecase: Extract last 2 elements
arr.slice(-2); // [ 'd', 'e' ]

// Usecase: Extract the last element.
arr.slice(-1);  // [ 'e' ]  

// Usecase: Extract from index passed to leaving the last two elements.
arr.slice(1,-2);  // [ 'e' ]  

// Usecase: Create a shallow copy of an array
arr.slice(); // 1st way
[...arr]; // 2nd way

splice: mutates the original array

// splice: remove the elements begining from the index passed. Mutates the orig. array.
// returns: part of the removed array
let arr = ['a','b','c','d','e'];
// arr.splice(2); // [ 'c', 'd', 'e' ]
// arr; // [ 'a', 'b' ]

// Usecase: Remove last element of the array
// arr.splice(-1); // [ 'e' ]
// arr; // [ 'a', 'b', 'c', 'd' ]

// Usecase: Delete no of elements. splice(index, deleteCount)
arr.splice(1, 3); // [ 'b', 'c', 'd' ]
arr; // [ 'a', 'e' ]

reverse: mutates the original array.

returns: reversed array

let arr = ['a','b','c','d','e'];
let arr2 = arr.reverse();
arr;
arr2;

concat: joins two arrays.

returns: joined array

let arr1 = ['a','b','c','d','e'];
let arr2 = ['f','g','h','i','j'];

[...arr1, ...arr2];       // 1st way
arr2 = arr1.concat(arr2); // 2nd way

join: joins two arrays.

returns: joined array

let arr1 = ['a','b','c','d','e'];
let arr2 = ['f','g','h','i','j'];
const x = arr1.concat(arr2);
x.join('-'); // 'a-b-c-d-e-f-g-h-i-j'

"As time progresses, you'll remember them based on their usage."

at: starts counting from the end, begining with index as -1

Suports method chaining. Works on arrays, strings

let arr = ['a','b','c','d','e'];

arr[0];    // 1st way
arr.at(0); // 2nd way

// Get the last element of the array
arr[arr.length - 1];  // 1st way
arr.slice(-1)[0];     // 2nd way
arr.at(-1);           // 3rd way

arr.at(0); // 'a'
arr.at(-1); // 'e'

forEach:

// Looping over array using forEach method.
let account = [2000,-300,+400, -200, -500, +1000, -300];

// Loop over an array using for-of
for(let money of account){
  if(money > 0){
    console.log(`Deposited ${money}`);
  } else {
    console.log(`Withdrawn ${Math.abs(money)}`);
  }
}

// .entries(): returns an array of arrays.
// return the output as index-value pair.
// first element must be index, second element must be element-value
for(let [i,money] of account.entries()){
  if(money > 0){
    console.log(`Transaction ${i+1}, Deposited ${money}`);
  } else {
    console.log(`Transaction ${i+1}, Withdrawn ${Math.abs(money)}`);
  }
}

// Loop over an array using forEach which requires a callback fn.
// forEach will call the callback fn, and not we.
// forEach will pass each element as argument in every iteration.
account.forEach(function(money){
  if(money > 0){
    console.log(`Deposited ${money}`);
  } else {
    console.log(`Withdrawn ${Math.abs(money)}`);
  }
});
// Iteration 1: pass arg1 to CB-fn(arg1)
// Iteration 2: pass arg2 to CB-fn(arg2)
// Iteration 3: pass arg3 to CB-fn(arg3)
// .....
// .....


// forEach will pass each element, index, array as argument in every iteration. Order of arguments matter, not the no of these arguments i.e first element should be the current-Element, second element should be index, third element should be entire array which is being looped-over.
// first element must be element-value, second element should be index, third element must be entire array. This is how its different from array.entries()
account.forEach(function(money, i, arr){
  if(money > 0){
    console.log(`Transaction ${i+1}, Deposited ${money} into ${arr}`);
  } else {
    console.log(`Transaction ${i+1}, Withdrawn ${Math.abs(money)} from ${arr}`);
  }
});

When to use for-of & forEach:

forEach: Cannot break-out of it. continue-break don't work inside it. Will always loop over the entire array, and nothing can be done to stop it.
for-of: Used when we need to loop out of the array.

"As you practice more & more, you'll get better in your skills."

forEach

works on arrays as well as maps & sets also.
creates side-effect as compared to map().
elements are logged one by one.

// Map
const currencies = new Map([
  // key, value pairs inside map are listed below
  ['USD', 'United States Dollar'],
  ['EUR', 'Euro'],
  ['GBP', 'British Pound']
]);

// called with currentValue in the iteration i.e val, with its key & the entire map
currencies.forEach(function(val, key, map){
  console.log(`${key}: ${val}`);
})


// Set: Need to pass an iterable as arg to 'new Set()'
const currenciesUnique = new Set(['USD','GBP','USD','GBP','EUR', 'INR', 'CAD']);
console.log(currenciesUnique);

// A set neither has keys nor indexes. Hence, to make forEach common for all, the callback fn signature was left like that.
// _ in arg denotes a complete unnecessary variable as we cannot have redundant args name. 
currenciesUnique.forEach(function(val, _ , map){
  console.log(`${val}: ${val}`);
});

map()

maps values from an existing array to a new array based on C/b.
similar to forEach, but it creates a brand new array.
takes an array, loops over it, apply Callback fn on each element.
map() will call the callback fn on each of the elements, not us.
Each time map() calls a callback, it passes element, index, whole array.
Side-effect is not created in each iteration of map() i.e elements are not logged one after another. All operations are completed, then the final result is logged.

const movements = [400, -200, 300, 500, -700, 100, -900];

// A new array is returned by map() without mutating the original array.
const eurToUsd = 1.1;
const movementsUSD = movements.map(mov => (mov*eurToUsd).toFixed(2));

movements;
movementsUSD;

// Manually creating a new array.
const movementsUSDfor = [];
for(const mov of movements){
  movementsUSDfor.push((mov * eurToUsd).toFixed(2));
}
movementsUSDfor;

const movementsDescriptions = movements.map((mov, i, arr) => {
  console.log(`Transaction ${i+1}: ${(mov>0)? 'Deposited' : 'Withdrawn'} ${Math.abs(mov)}`);  
});
movementsDescriptions;

filter()

filter out the elements in a new array which satisfy the C/b condn.

const movements = [400, -200, 300, 500, -700, 100, -900];
// Fnal approach. Fns can be chained here.
const deposits = movements.filter(mov => {
  return mov>0;
});
deposits;

// Same result in both cases.
const depositFor = []
for(let mov of movements){
  if(mov>0){
    depositFor.push(mov);
  }
}
depositFor;

const withdrawls = movements.filter(mov => {
  return mov<0;
});
withdrawls;

reduce()

reduces all elements down to a single value.
Ex. adding all elements together. Define an accumulator, keep adding the current element to the accumulator to get the resultant sum in the end.
this value is return from the method.

const movements = [400, -200, 300, -500, -700, 100, 900];

// Fnal approrach using .reduce()
// loops over array, calls the callback on each iteration.
// acc is current sum of all the prev values.
const balance = movements.reduce(function(acc, cur, i, arr){
  console.log(`Iteration ${i+1}: ${acc}`)
  return acc + cur;
}, 1000); // 1000 is the initial value of acc in the first iteration
balance;

// for-of approach
let balance2 = 1000;
for(let mov of movements){
  balance2 += mov;
}
balance2;


// Maximum Value
const balance = movements.reduce(function(acc, mov){
  if(acc > mov){
    return mov;
  } else{
    return mov;
  }
}, movements[0]); // 1000 is the initial value of acc in the first iteration
balance;

Functions

Mohammed Ali — Thu, 05 Sep 2024 10:30:38 +0000

Intro to Fns:

Fundamental building blocks of the language.
Most essential concepts.
Fn - piece of code which can be used again and again.
{Invoking, Running, Calling} a Fn all mean the same.
Fn - can take data as arguments, return data as result after computation.
Fn call is replaced by the result returned from it after execution.
Fns are perfect for implementing DRY principle
Arguments are passed, parameters are placeholder which receives values passed to fn.

Fn declaration vs expression:

Fn declaration begins with fn keyword.
Fn expression are anonymous fn, stored inside a variable. Then that variable which stores the fn act as a fn.
The anonymous fn defn is an expression, and the expression produces a value. Fn are just values.
Fn are not a String, Number type. Its a value, hence can be stored in a variable.
Fn declaration can be called even before they are defined in the code i.e they are hoised. This doesn't work with Fn expression.
Fn expression forces the user to define fns first, then use them later. Everything is stored inside variables.
Both have their place in JS, hence needs to be mastered properly.
Fn expression = essentially a fn value stored in a variable

Arrow Fn came with ES6

Implicit return for one-liner, for multiple lines explicit return is needed.
Arrow fns don't get 'this' keyword of their own
Learning is not an a linear process, knowledge builds up in an incremental way gradually. You cannot learn everything about a thing in one go.

## Default parameters
const bookings = [];

const createBooking = function(flightNum, numPassengers=1, price= 100 * numPassengers){
  // It will work for parameters defined before in the list like numPassengers is defined before its used in expression of next argument else it won't work.
  // Arguments cannot be skipped also with this method. If you want to skip an argument, then manually pass undefined value for it which is equivalent to skipping an argument
  /* Setting default values pre-ES6 days.
  numPassengers = numPassengers || 1;
  price = price || 199;*/

// Using enhanced object literal, where if same property name & value is there, just write them once as shown below.
  const booking = {
    flightNum,
    numPassengers,
    price,
  };

  console.log(booking);
  bookings.push(booking);
}

createBooking('AI123');
/*
{
  flightNum: 'AI123',
  numPassengers: 1,
  price: 100
}
*/ 

createBooking('IN523',7);
/*
{
  flightNum: 'IN523',
  numPassengers: 7,
  price: 700
}
*/ 

createBooking('SJ523',5);
/*
{
  flightNum: 'SJ523',
  numPassengers: 5,
  price: 500
} 
*/ 

createBooking('AA523',undefined, 100000);
/*
{
  flightNum: 'AA523',
  numPassengers: 1,
  price: 100000
}
*/

Calling one fn from inside another fn:

Very common technique to suport DRY principle.
Supports maintainability
return immediately exits the fn
return = to output a value from the fn, terminate the execution
Three ways of writing fn, but all work in a similar way i.e Input, Computation, Output
Parameters = placeholders to receive i/p values, Like local variables of a fn.

How passing arguments works i.e Value vs Reference Types

Primitives are passed by value to fn. Original value remains intact.
Objects are passed by reference to fn. Original value is changed.
JS doesn not have pass value by reference.

Interaction of different fns with same object can create trouble sometimes

Fns are first-class in JS, hence we can write HO fns.

Fns are treated as values, just another 'type' of object.
Since objects are values, fns are values too. Hence, can also be stored in variables, attached as object properties etc.
Also, fns can be passed to other fns also. Ex. event listeners-handlers.
Return from fns.
Fns are objects, and objects have their own methods-properties in JS. Hence, fn can have methods as well as properties which can be called on them. Ex call, apply, bind etc.

Higher Order Fn : Fn that receives another fn as an argument, that returns a new fn or both. Only possible because fns are first class in JS
Fn that is passed in callback fn, which will be called by HOF.

Fns that return another fn, i.e in Closures.

First class fns and HOF are different concepts.

Callback Fns Adv:
Allow us to create abstractions. Makes easier to look at larger problem.
Modularize the code into more smaller chunks to be resused.

// Example for CB & HOF:
// CB1
const oneWord = function(str){
  return str.replace(/ /g,'').toLowerCase();
};

// CB2
const upperFirstWord = function(str){
    const [first, ...others] = str.split(' ');
    return [first.toUpperCase(), ...others].join(' ');
};

// HOF
const transformer = function(str, fn){
  console.log(`Original string: ${str}`);
  console.log(`Transformed string: ${fn(str)}`);
  console.log(`Transformed by: ${fn.name}`);
};
transformer('JS is best', upperFirstWord);
transformer('JS is best', oneWord);

// JS uses callbacks all the time.
const hi5 = function(){
  console.log("Hi");
};
document.body.addEventListener('click', hi5);

// forEach will be exectued for each value in the array.
['Alpha','Beta','Gamma','Delta','Eeta'].forEach(hi5);

Fns returning another fn.

// A fn returning another fn.
const greet = function(greeting){
  return function(name){
    console.log(`${greeting} ${name}`);
  }
}

const userGreet = greet('Hey');
userGreet("Alice");
userGreet("Lola");

// Another way to call
greet('Hello')("Lynda");

// Closures are widely used in Fnal programming paradigm.

// Same work using Arrow Fns. Below is one arrow fn returning another arrow fn.
const greetArr = greeting => name => console.log(`${greeting} ${name}`);

greetArr('Hola')('Roger');

"You will only progress once you understand a certain topic thoroughly"

call(), apply(), bind():

Used to set 'this' keyword by explicitly setting its value.
call - takes a list of arguments after the value of 'this' keyword.
apply - takes an array of arguments after the value of 'this' keyword. It will take elements from that array, and pass it into functions.

bind(): This method creates a new function with the this keyword bound to the specified object. The new function retains the this context set by .bind() no matter how the function is invoked.

call() and apply(): These methods call a function with a specified this value and arguments. The difference between them is that .call() takes arguments as a list, while .apply() takes arguments as an array.

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name){
    console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    this.bookings.push({flight: `${this.iataCode} ${flightNum}`, name});
  },
};

lufthansa.book(4324,'James Bond');
lufthansa.book(5342,'Julie Bond');
lufthansa;


const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

// Now for the second flight eurowings, we want to use book method, but we shouldn't repeat the code written inside lufthansa object.

// "this" depends on how fn is actually called.
// In a regular fn call, this keyword points to undefined.
// book stores the copy of book method defuned inside the lufthansa object.
const book = lufthansa.book;

// Doesn't work
// book(23, 'Sara Williams');

// first argument is whatever we want 'this' object to point to.
// We invoked the .call() which inturn invoked the book method with 'this' set to eurowings 
// after the first argument, all following arguments are for fn.
book.call(eurowings, 23, 'Sara Williams');
eurowings;

book.call(lufthansa, 735, 'Peter Parker');
lufthansa;

const swiss = {
  airline: 'Swiss Airlines',
  iataCode: 'LX',
  bookings: []
}

// call()
book.call(swiss, 252, 'Joney James');

// apply()
const flightData = [652, 'Mona Lisa'];
book.apply(swiss, flightData);

// Below call() syntax is equivalent to above .apply() syntax. It spreads out the arguments from the array.
book.call(swiss, ...flightData);

Modules 2/2

Mohammed Ali — Wed, 04 Sep 2024 11:58:18 +0000

Module Pattern was used before ES6 Modules.
Goal: Encapsulate functionality, suport private data, expose public API and all this is achieved by using IIFEs.

IIFE: Ex. (function(){})();

// IIFE Goal: Create a new scope, return the data just once. All of data inside IIFE will be private as it would inside the fn scope. 
// Using this way, we don't need to call it separately. And it ensures its called only once.
// IIFE is created only once, goal is 'NOT TO REUSE' by executing it multiple times.

// Result of running an IIFE is stored, or else it will disappear simply.
const ShoppingCart2 = (function(){
  const cart = [];
  const shippingCost = 10;
  const totalPrice = 237;
  const totalQuantity = 10;

  const addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
  };

  const orderStock = function(product, quantity){
    console.log(`${quantity} ${product} ordered from supplier`);
  };
  // Need to return something, in order to return a public API. For that, an object is returned containing stuff which needs to be made public.
  return {
    addToCart,
    cart, 
    totalPrice,
    totalQuantity
  };
})();
// Everything inside the above module is private to the module.
// The above fn returns the object mentioned inside return statement and assign it to the ShoppingCart2 variable mentioned at the start of fn. This IIFE is returned then long ago.
// All this is possible because of closures. Hence, addToCart can acccess the cart variable.

ShoppingCart2.addToCart('apple', 4);
ShoppingCart2.addToCart('pizza', 5);
ShoppingCart2;
ShoppingCart2.shippingCost; // inaccessible.

The Module pattern has been working even before ES6 modules.

Disadv:

Now if we want one module per file, like we have with ES6 modules then multiple scripts need to be created and linked inside the HTML file.
The order of the script loading will also matter.
All those variables will be living in global scope.

Beside native ES6 modules & module pattern, JS also supported other module systems which were not native to JS. Ex. AMD, CommmonJS
Ex. CommonJS modules are used in Node.js for all of its existance. Recently ES6 modules have been implemented in Node.js
All modules on npm repository still use the commonJS module system as npm was originally intended for node. Only later, npm became the repository for the whole JS world. Hence, we are basically stuck with CommonJS. So, CommonJS still needs to be paid attention to as its impt in Node.js
Just like ES6 module, 1 file is 1 module in CommonJS.
The commonJS code won't work in browser, but it will work in node.js
ES Modules will replace all module system eventually but as of now we need to use commonjs also.

export keyword is an object, which is not defined in our code as well as in browser.

// EXPORT
export.addToCart = function(product, quantity){
    cart.push({product, quantity});
    console.log(`${quantity} ${product} added to cart. Shipping cost is ${shippingCost}`);
};

// IMPORT: is similar to ES Modules but would use a require fn.
// require is not defined in browser env but its defined in node env as its a part of commonjs
const addToCart = require('./shoppingCart.js')

OOP in JS - 2/2

Mohammed Ali — Tue, 03 Sep 2024 12:25:40 +0000

JS classes are like syntactic sugar, not the same as classes of other strongly typed languages.
Only adds syntax-wrapping to make it familiar for devs coming from other languages.
classes are a special type of functions behind the scenes, hence can be written as class expression as well as class declaration.

## class expression:
const Person = class {
}

## class declaration:
class Person {
  constructor(fName, bYear){
   this.fName = fName;
   this.bYear = bYear;
  }
  calcAge(){
   console.log(2024 - this.bYear);
  }
}

- constructor is a method of this class. Pass values for properties to have in objects created using this fn.
- then set the properties of the object using this.xxx = xxx;
- On using 'new' operator, this constructor will be called automatically and return a new object which will be stored in LHS variable as shown below.
Ex. const ronald = new Person('ronald',1975); // Person { fName: 'ronald', bYear: 1975 }
- Methods are written outside the constructor fn and will be added to the prototype property of the object which can be verified using devConsole.
Ex. ronald.calcAge(); // 49

ronald.__proto__ === Person.prototype; // true

- No commas need to be added while adding multiple methods below the constructor fn inside the class.

## Hence, the above syntax works same as constructor fn syntax but with a familiar syntax of strongly typed class based languages.

## Adding a fn explicitly to the prototype:
Person.prototype.greet = function(){
console.log(`Hey ${this.fName}`);
}
ronald.greet(); // 'Hey ronald'

Impt Points:

Fn declarations are hoisted while Class declarations are NOT hoisted.
Also first class citizen just like Fns i.e can be passed-to & returned-from fns.
Body of class is always executed in strict mode whether we activate the strict mode or not.
Classes make the code look cleaner, with reduced character noise provided you know how its implemented under the hood. ** To become an expert in JS, you need to understand the intricate language implementation details like with classes.

Accessor Properties: Getters & Setters i.e fns that get & set the value. But on the outside, they still look like regular properties.

Normal Properties are called Data Properties.

Getters & Settters are common to all objects in JS i.e every object can have getter and setter property. These getter-setter are called as accessor properties, while normal properties are called as data properties.

- Getter & setter are fns that get and set a value, from outside look like normal properties.

const account = {
  owner: 'jonas',
  movements: [200,300,100,500],
  get latest(){
    // will return an array with last value. Hence, use pop to get the value.
    return this.movements.slice(-1).pop();
  },
  set latest(mov){
    this.movements.push(mov);
  }
}

account.latest; // 500
account.latest = 50; 
account.latest; // 50

Just like above, classes also support the getter-setter methods but acccessed like using a property syntax.

These are very useful for data validation.

Static Methods

Ex. Array.from() = Converts array-like structure to array.
Array.from(document.querySelector('h1'));
Array.from(document.querySelectorAll('h1'));

Ex. .from is attached to the Array construcutor, not to the prototype property of the constructor. Hence all arrays don't inherit this fn.
[1,2,3].from(); // .from is not a function

Ex. Number.parseFloat(12) is a static method on Number constructor, not available on number variables.

Creating a static method.

// Static methods are not inherited. They are not added to prototype.
className.fnName = function(){
  console.log(this); // Entire constructor() which is calling the method
  console.log("JS is awesome")
};
className.fnName();

// Rule =  whatever object is calling the method, 'this' points to that object inside the fn. Hence its simply the entire constructor() above.

//Inside class, we need to use static keyword for adding a static method.
static fnName = function(){
  console.log(this); // can point to the entire class defn
  console.log("JS is awesome")
};

// Static methods and instance methods will be different from each other.
// instance methods will be prototype, hence all instances can have access to them

Object.create():

Manually used to set prototype of our object to any object that we want.
Will be used to implement inheritance b/w classes.
Prototypal Inheritance Implemented using this fn.
Object.create returns an empty object.
Works in a different way in which constructor fns and classes work.
Still there is idea of prototypal inheritance, even without involvement of 'prototype', 'constructor()', 'new' operator.

const PersonProto = {
  // This method will be looked up using __proto__ link
  calcAge(){
    console.log(2024 - this.bYear);
  }
};

// baba will be created, with its prototype set to PersonProto object.
const baba = Object.create(PersonProto);
baba;

baba.name = 'Roger';
baba.bYear = '2000';
baba.calcAge();

Constructor Fn --(.prototype)--> Person.prototype
Object Instance --(proto)--> Person.prototype

Works just like it worked for fn constructors or in classes
No need of constructor() or .prototype property to achieve this goal.

const PersonProto = {
  // This method will be looked up using __proto__ link
  calcAge(){
    console.log(2024 - this.bYear);
  },
  // Noting special with init name, its a normal fn here.
  // This has nothing to with ES6 constructor()
  // Manual way of initialzing an object.
  init(fName, bYear){
    this.fName = fName;
    this.bYear = bYear;
  }
};

// baba will be created, with its prototype set to PersonProto object.
const baba = Object.create(PersonProto);
baba;

baba.name = 'Roger';
baba.bYear = '2000';
baba.calcAge();

baba.__proto__;    // { calcAge: [Function: calcAge] }
baba.__proto__ === PersonProto; //true


const alice = Object.create(PersonProto);
alice.init("alice", 2000);
alice;   // { fName: 'alice', bYear: 2000 }

Ways to create Prototypal Inhertitance:
Constructor Fn
ES6 Classes
Object.create

Inheritance between Classes using constructor():

All of these techniques allow object to lookup for methods on its prototype.
Real classes do not exist in JS.

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  // This is the duplicate code, any change in Person won't be reflected here.
  this.firstName = firstName;
  this.bYear = bYear;
  this.course = course;
};

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'

Removing redundant code from above example:

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  // Person(firstName, bYear); -> This doesn't work because we are calling it as a regular fn call. 'new' has to be used to call this fn constructor. This fn call is simply a regular fn call, in which 'this' is set 'undefined'. Hence, an error as it cannot set firstName on undefined.
  // We want to set the 'this' inside this fn to be same as inside Person above.
  Person.call(this, firstName, bYear);
  this.course = course;
};

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'

'new' makes a link automatically between object instance and its prototype via proto
Whole idea of inheritance is that child class can share behavior from parent classes up the prototype chain.
Prototype[Object.prototype] = null; // Sits on top of prototype chain.

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  Person.call(this, firstName, bYear);
  this.course = course;
};

// Student.prototype = Person.prototype; => This doesn't work because we won't get the prototype chain, rather we will get 
// Constructor fn[i.e Person()]    --------------> Person.prototype
// Constructor fn[i.e Student()]   --------------> Person.prototype
// Object [Matt] __proto__: Student.prototype ---> Person.prototype

// Student.prototype manually linked for lookup to Person.prototype.
// This has to be done here and not after else Object.create will overwrite any of the existing methods like introduce() on it.
Student.prototype = Object.create(Person.prototype);

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'
matt.calcAge();    // 24

matt.__proto__;                   // Person { introduce: [Function (anonymous)] }
matt.__proto__.__proto__;        // { calcAge: [Function (anonymous)] }
matt.__proto__.__proto__.__proto__;   // [Object: null prototype] {}

Student.prototype.constructor = Student;   // [Function: Student]

matt instanceof Student; // true
matt instanceof Person; // true
matt instanceof Object; // true

class syntax hides a lot of behind the scene details.
Its just a layer of abstraction over constructor fns.
Mainly extend, super are needed to implement the same functionality of inheritance using classes which was established above using constructor fns.

extends - inheritance between classes, automatically sets prototype chain for us.

public field - similar to property defined in the constructor, available on created object

private field - not accessible outside of class, perfect for implementation of data privacy & encapsulation

static public field - available only on class

constructor() - automatically called by new operator whenever a new object from the class is created. Mandatory in parent class, can be omitted in child class if we want to have exact same name & same no of arguments in child class.

super():
its the constructor fn of the parent class, just pass-in the required arguments.
Always need to happen first, as this call is responsible for creating 'this' keyword in child-class.
Without doing this, we won't be able to access the 'this.course = course'
call to parent(super) class (necessary with extend). Needs to happen before accessing 'this' keyword in the constructor.

instance property - available on each created object, set based on input data of the constructor. fields are common for all the object, while these properties are unique for each object.

getter method - get a value out of an object by simply writing a property instead of a method.

setter method - use '_' to set a property with name as method, and also add getter.

static method - available only on class, cannot access instance properties nor methods, only static ones. Ex. only static public fields will be accessible inside static methods.

NOTE: Classes are:

syyntactic sugar over constructor fns.
not hoisted
first class citizens just like fns.
class body is always executed in strict mode

Modules 1/2

Mohammed Ali — Mon, 02 Sep 2024 11:53:10 +0000

Now we don't write all JS in a single file and send to the client.
Today, we write code into modules which share data between them and are more maintainable.
Convention is to use camelCase names for Modules.
We can even include 3rd party modules into our own code via npm repos like jquery, react, webpack, babel etc.
A final bundle is built from small module files which is deployed to prod server, eventually being sent to clients.
Modules are not supported by older browsers
For perf reasons, its better to send small js files to browser.
Modules ar super-important part of JS, already used in other languages for decades by devs.
Modules: reusable piece of code, which encapsulates implementation details of a certain part of our project.
Its a standalone file, but it doesn't have to be.
Modules can also have imports & exports Native ES6 Modules: There were no modules before ES6. Had to be implemented ourselves or use external libararies. Modules are stored in files, exactly one module per file.
We can export values, functions out of modules etc. Whatever we export is called a public API which is exposed for other code to consume.
This public API is consumed by importing public code into module and are called dependencies.
Simple applns can be written without modules also, but for enterprise scale projects we need modules.
Adv:
-> Makes really easy to compose software as modules are small building blocks that we put together to build complex applications.
-> Isolating Components: Each feature can be developed in complete isolation and without worrying about the work of other devs or how the entire system works.
-> Code abstraction: Implement low level code in modules, import these abstractions into other modules, naturally leading to a more organized codebase.
-> Code reusability: Allow us to reuse code even across multiple projects.
Modern JS uses bundling & transpiling.

## Bundling = is a complex process which involves:
a. Eliminate unused Code
b. Combine all modules into single file.
c. Compress the code.
Ex. webpack build tool - requires manual config, hence complex.
Ex. parcel - zero build tool as we don't need to write any setup code.

## Transpiling/Polyfiling:
Convert modern JS to ES5 or older syntax such that older browser supports the application. 
Ex. done using tool called Babel

Entire process results in the final bundle file for production ready to be deployed on server.

### Scripts are also files but they are different from ES6 modules in the following ways:
Script[used earlier]:
- All top level variables are always global. This leads to global namespace pollution and name-coliision.
- Default mode: Sloppy mode
- Top level 'this' points to window object.
- Import/Export of values is not allowed.
- Linked to html using plain script tag.
- Downloaded by default in sync way, unless async or defer attribute is used.

### ES6 Modules:
- All top-level variables are scoped to module i.e they are private by default. Such a value can be access by outside varible only when its exported by the module else it will be inaccessible for outside world.
- Default mode: Strict mode. Hence with modules no more need to declare strict mode.
- Top level 'this' is 'undefined'
- Allows import/export of values using ES6 syntax of import/export.
- Link to html file using <script type="module"> tag.
- File download always happens in an async way, i.e for module loaded from html or an import one module to another.

## Understanding module import process:
Parsing -> [Asyn module download, Linking import-export, Execute individual module itself] -> Execution overall index.js
- import/export only need to happen at the top level of if-block or any function. Imports are hoisted. Importing values is always the first thing which happens in a module.
- Top-level static imports make imports known before execution. 
- Modules are loaded in async way from the server, importing happens in sync manner. 
- Parsing refers to reading the code without executing it in which imports are hoisted. Modules are imported even before execution. Hence, it enables bundling & code elimation even before fn exection. [V Impt as large projects have 100s of modules, and 3rd party modules also from which we want the small piece and not the entire module]
- Bundlers can then join multiple modules, and then eliminate code. hence, we can easily import/export from code.
- After a module arrives, its parsed and then the module exports are linked to imports in index.js i.e live connection is established between import inside index.js and export statement of the module file. They are not copied. Import is just a reference to the exported value. Hence, when the value changes in the exporting module, it also changes in the importing module too. This concept is unique to ES6 modules, other module system don't work like this.
- Code in the imported modules is executed.

Demystifying Closures in JS

Mohammed Ali — Sun, 01 Sep 2024 00:30:00 +0000

Needs to be mastered to understand the intricate details of the language.
Not created like we create an array or function.
A fn returning another fn which is stored inside the LHS variable.

const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();

secureBooking fn is executed in global scope.
A new execution context will be created on the global execution context.
Every execution context(EC) has its own variable environment with all of its variables. 'let passengerCount = 0' is defined inside this EC. It can access all varibles of its parent scope.
A new fn is returned, and will be stored in booker.
The Global EC will also contain the booker variable.
Now secureBooking() will be removed from EC and is gone. The secureBooking EC environment is no longer active. But still the passengerCount variable is being accessed which was defined at the time of fn creation.
Still, inner fn will be able to access the passengerCount varible defined inside outer fn. This happens due to closure.
Closure makes the fn remember the varibles defined surrounding the birthplace of the fn or its EC.
booker is not a fn, located in global scope.
Now executing booker(); for the first time will create an EC on the call stack, with its own variables.
A fn has access to the variable environment of the execution context in which the fn was created i. secureBooking. Hence, booker will have access to variables defined in variable environment of secureBooking fn. This connection of fn's birthplace i.e of definition to its surrounding variable environment is called Closure even after the EC of secureBooking fn containing the fn has popped out of Call Stack.
Closure: Variable Environment attached to the fn, exactly as it was at the time and place the fn was created.
Scope chain is preserved through the closure, even though EC is gone the variable enviroment keeps living somehow in the Engine. Hence, we say booker fn is closed over parent fn including parent fn arguments which we don't have here.
Using closure, a fn does not lose connection to the variables defined surrounding its birthplace.
If variable is not in current scope, JS looks into closure even before looking up the scope chain. Suppose if there is a global variable, even then the variable defined in its closure is looked up first.
Closure has priority over scope chain.
After running the booker() for the first time, value of passengerCount is incremented, logged in console and then booker is popped off call stack.
Execution moves to next line, a new EC is created but the closure variable is still there. The existing value is incremented and the EC is popped out.
Again the third time this process repeats.

SUMMARY

Defn: A closure is closed-over variable environment of the EC in which a fn was created, even after that EC has gone.
Also, a closure gives a fn access to all the variables of its parent fn, even after that parent fn has returned. The fn keeps a reference to its outer scope, which preserves the scope chain throughout time.
A closure ensures that the fn doesn't lose connection to variables that existed at the time of fn's birth. Its like a backpack that a fn carries around wherever it goes. This backpack has all the variables that were present in the environment where the fn was created.
We don't have to create closures manually. Also, we can't even access closed-over variables explicitly. A closure is not a tangible JS object i.e we cannot reach to a closure and take variables from it. Its an internal property of a fn. To take a look at backpack, "console.dir(booker);"
[[Scope]] will show you about the VE of this fn call.
[[]] means its an internal property, which we cannot access from our code.
We always don't need to return a fn from another fn to create a closure. In below example, variable 'f' wasn't even defined inside the fn also, as its in global scope. Its able to access the 'a' variable also even after g() has finished its EC. 'a' is inside the backpack of 'f' now.

let f;

const g = function(){
  const a = 23;
  f = function() {
    console.log(a*2); // 46
  };
};


const h = function(){
  const b = 777;
  f = function(){
    console.log(b*2); // 1554
  };
};

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);

setTimeout(callbackFnToBeCalled, Delay);
Closure variables have higher priority over scope chain.

// Boarding Passengers using Closures
const boardPassengers = function(n, wait){
  const perGroup = n / 3;

  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`)
  }, wait*1000);

  console.log(`Will start boarding in ${wait} seconds`);
}

boardPassengers(180, 3);

JavaScript Engine

Mohammed Ali — Sat, 31 Aug 2024 11:18:57 +0000

JS Engine:

Program that executes JS code. Ex. Google's V8.
V8 powers Chrome, Node.js
Other browsers have their own JS Engine.

JS Engine has 2 parts:

Call Stack: Where our code is executed using execution context.
Heap: Unstructured memory pool, used for storing objects.

Every c/r program needs to be converted to machine code. Done via two processes:

1. Compilation: Entire code is converted into machine code at once, written to a binary file that can be execued by a computer.

Source Code -(compiled)-> Binary Code[Portable File] -(executed)-> Pgm Run
Execution can happen way after compilation.

2. Interpretation: Interpreter runs through the source code, executes it line by line.

Source code -(execution line by line)-> Pgm Run

Here code still needs to be converted to machine code.
They are much slower as compared to compiled l/gs.

3. JIT i.e Just in Time Compilation:

Modern JS Engine is a mix of compilation & interpretation to make it fast.
Entire code is converted into machine code at once, then executed immediately. Source Code -(compiled)-> Machine code -(executed)-> Pgm Run
There is no intermediate portable file to execute.
Execution happens immediately after compilation.
Hence, JS now is much faster than interpreted l/gs due to this technique.

Compilation Process in JS:

Step 1. Parsing:

Our code is Parsed i.e read by JS engine into AST or Abstract Syntax Tree.
Works by splitting code into a tree based on keywords like const, let, function etc which are meaningful to the l/g.
Then saves the code into a tree in a structured way.
Also check for any syntax errors.
AST has nothing to do with the DOM tree. AST is just representation of our code inside the JS Engine.

Step 2, 3[combined]: Compilation + Execution

AST is compiled and immediately executed after it, using JIT.
Execution happens in Call stack.
Modern JS has clever optimisation strategies, i.e they quickly create an unoptimized version of machine code in begining so as to start execution asap.
In the background, this code is again recompiled during an already running pgm execution.
Done in mutiple iterations, and after each optimisation the unoptimized code is swapped with newly optimized code without ever stopping the code execution. This makes V8 so fast.
All this parsing, compilation, execution happens in some special thread inside JS Engine which we can't access using our code completely separate from the main thread which is running our code using call stack.
JS is no more just interpreted l/g. It has JIT compilation which makes it way faster than interpreted l/gs.

JS Runtime = JS Engine + Web APIs + C/B Queue

JS Runtime: Container including all the things that we need to use JS.
Heart of any JS runtime is JS Engine.
Without JS Engine, there is no runtime hence no JS at all.
JS Engine alone is not enough, we need access to Web APIs like DOM, Fetch, Timers etc.
Web APIs: Functionality provided to engine by runtime, but not part of JS engine. Ex. window object in browser, global object in node.
Callback Queue is a data structure containing all the functions ready to be executed. Ex. click, timer, data etc
DOM Event handler fns are also called as callback fns.
When Call stack is empty, callback fn is shifted from C/B queue to Call stack for execution.
The continuous checking & shifting is performed by Event Loop.
Event loop is something which enables JS to have a non-blocking concurrency model.
For node, we don't have Web APIs provided by browser. We have something called as C++ bindings & thread pool.

How JS Code executes on the Call Stack

JS has single thread of execution, hence can do only thing at a time. Hence, no multiasking in JS.
APIs are provided by environment, but not the part of language. Ex. Web APIs like Timers, Fetch, DOM, Geolocation etc.
Callback Queue: Ready to be executed callback fns that are attached to some event which has occurred.
Whenever call stack is empty, event loop transfers callback from calback to queue to call stack for execution.
Event loop is hence an essential piece which makes Async behavior in JS possible.
Concurrency Model: How a l/g handles multiple things happening at the same time.
Essential parts of JS Runtime:
Call Stack
Web APIs
Callback Queue
Event loop
Everything related to DOM is part of Web APIs, not JS.
Image loading happens in async way, had it been in sync way then it would have been blocking i.e not on main thread rather Web APIs environment.
All the event listeners, .then() etc work happens in WEb APIs environment and not on call stack.
Callback fns are placed in callback queue waiting for them to be executed onn call stack.
Callback queue is like a todo list which a call-stack has to complete.
Duration mentioned is the minimum delay before for execution, and not the time for execution.
Callback queue also contains callbacks coming from DOM events, clicks, keypress etc. DOM events are not async behavior, but they use callback queue for their execution.
Event loop keeps checking the callback queue until its empty. Each callback placed on call stack is called as event loop tick.
Event loop orchestrates the entire JS runtime.
JS has itself no sense of time as Async code doesn't execute in engine. Its the runtime which manages async behavior and the event loop who decides which callback to be executed.
Engine or Call stack simply executes the code given to it.
When an image is to be loaded, the event listener keeps on waiting in the Web APIs environment until load event is fired off. When its fired, then only it goes to callback queue as a callback fn waiting for its turn to be executed on call stack.

Microtask Queue:

Callbacks from Promises don't go to callback queue, they go to microtask queue.
This queue has higher priority over callback queue.
Event loop checks this queue first, executes all of its task first, then goes to callback queue for execution.
Callbacks on promises are called microtasks, hence its called microtask queue. There are other microtasks also, but not relevant here as of now. Event loop decides when each callback is executed. It gives microtask higher priority as compared to callback queue
Microtasks can cut inline before all other regular callback queues.
Promise.resolve() : creates a promise which is resolved immediately, and its success value is passed inside it as argument. then() callback is called with resolved value as argument.

console.log("Direct simple console BEGIN");
setTimeout(() => console.log("Text from Timer"),0);
Promise.resolve("Text from Promise").then(res => console.log(res));
console.log("Direct simple console END");

Order of Output:
Direct simple console BEGIN
Direct simple console END
Text from Promise
undefined
Text from Timer

A microtask queue can even starve the callback queue also if there are lot of microtasks in it or time-consuming microtasks.

console.log("Direct simple console BEGIN");
setTimeout(() => console.log("Text from Timer"),0);
Promise.resolve("Text from Promise1").then(res => console.log(res));
Promise.resolve("Text from Promise2").then(res => {
  for(let i=0; i<5000; i++)
  console.log(res);
});
console.log("Direct simple console END");