JavaScript - Narau0

JavaScript is a high-level, just-in-time compiled programming language. Technically, It is still initially interpreted for a quick startup, but it is compiled for long-term speed. Three core pillars of JavaScript are types, scope, and objects.

Types

Take a look at this example:

var n = '5'
console.log(`type of ${n++} is ${typeof(n)}`) // type of 5 is number

The pre-increment operator converts the string into number first, and then returns that number before incrementing.
The typeof operator returns a string indicating the data type of its operand.
That type conversion happened above is called type coercion.

let result = '5' - 2; // 3 (implicit type coercion to number)
result = '5' + 2 // 52 (weird?)

If you want to know more about implicit type coercion, see

JavaScript Specification

ECMAScript Language Specification

In JavaScript, everything is an object is false actually. All JavaScript values, except primitives, are objects.
1. Primitive types include undefined, string, number, boolean, object, symbol.
2. Undeclared types include null, function, array, and bigint.
3. functions are objects that are callable, combining function invocation with object capabilities.
  1. typeof(Function) is function even tho its not a primitive type and basically treated as object.
4. typeof(null) is also object btw (historical bug in language?), just for backward compatibility reasons.
5. typeof([1,2,3]) is object not array.
  1. To check if a value is an array, use Array.isArray([1,2,3]) , which returns a boolean value.
6. bigint is also there btw, typeof(42n) is bignint.
States of ‘emptiness’ in JS can be undefined, undeclared, and uninitialized (in theory only ig?)
Temporal Dead Zone (TDZ) is a state where block-scoped variables are uninitialized and cannot be accessed.
NaN stands for ‘Not a Number’ but actually represents invalid number.
1. NaN === NaN is false but undefined === undefined is true.
2. Number.isNaN() does not perform type coercion, and returns true only if the value is strictly NaN.
isNaN('2a') // true Number.isNaN('2a') // false Number.isNaN(NaN) // true
1. typeof(NaN) is number btw.
-0 exists in JS btw, but for what? can represent a state where an object has stopped (at 0) but is still facing a specific direction (up or down).
-0 === 0 // true Object.is(0, -0) // false Object.is(-0, -0) // true

Fundamental Objects

The JavaScript standard library includes several fundamental built-in objects used to represent core language constructs and manage data.

new Object(), Array(), Function(), Date(), RegExp(), Error()

// Dont use new with String(), Number(), Boolean()

Type Coercion

+"29" // 29 

// + invokes Number('29'), can be used to avoid "14" + 1 = '141'

Boxing

Boxing is the automatic process of wrapping a primitive value (e.g., a string, number, or boolean) into a temporary object of its corresponding wrapper type so that you can access methods and properties on it.

let name = "John Doe"; // 'name' is a primitive string
console.log(name.length); // 8

/* JavaScript temporarily boxes "John Doe" into a String object to 
access the 'length' property, then discards the object. */

Equality

== allows coercion (types different) & prefers numeric comparison

=== disallows coercion (types same)

42 == [42] // true, coz String([]) is '' and 42 == '42' is true.

LooseEquality.js

[] == ![] // true?

[] == ![]    // ![] evaluates to false
[] == false  // Boolean false converts to Number 0
[] == 0      // Array converts to primitive string
"" == 0      // Empty string converts to Number 0
 0 == 0      // Comparison results in true

You dont really need TypeScript if you know JavaScript in depth.
Using === everywhere means you not sure about the types (trust issues?)
Making types known and obvious leads to better code. If types are known, == is best.

Scope

Scope basically means where to look for things. JavaScript organizes scopes with functions and blocks.

Lexical scope means that the scope of variables and functions is determined by their physical location.
- It does not depend on where the function is called at runtime.

LexicalScope.js

let a = 1;

function foo() {
  console.log(a);
}

function bar() {
  let a = 2;
  foo();
}

bar(); // 1

Strict mode enforces stricter parsing and error handling, helping catch common bugs and prevent unsafe behavior.

StrictMode.js

"use strict";

x = 10;      // ReferenceError

function show() {
  console.log(this);
}

show(); // undefined

Nested scope means inner scopes can access variables from outer scopes, but outer scopes cannot access inner variables.

NestedScope.js

function outer() {
  let a = 10;

  function inner() {
    var b = 20
    console.log(a); // accessible
  }

  console.log(b)  // ReferenceError: b is not defined

  inner();
}

outer();

Function declarations load before any code is executed (hoisted, can be used before definition).

#function-declaration.js
function sum(a, b) {
  return a + b;
}

Function expressions load only when the interpreter reaches that line of code (only the variable is hoisted).
1. It can be named or anonymous, but named function expressions are generally preferred for better debugging, self-documenting code and reliable function self-reference (e.g., recursion).

#function-expression.js
const sum = function(a, b) { // anonymous
  return a + b;
}

const sum = function sum(a, b) { // named
  return a + b;
}

Arrow functions should be used only when necessary for the same reasons as above.

#arrow-function.js
const greet = (name) => {
  return `Hello, ${name}!`;
};

#order-of-precedence.js
Function Declaration 
        ^
Named Function Expression
        ^
Anonymous Function Expression

The this keyword is determined by how a function is called, rather than where it is defined, giving it behavior similar to dynamic scoping.

#this.js
function show() {
  console.log(this.name);
}

const user1 = { name: "Alice", show };
const user2 = { name: "Bob", show };

user1.show(); // Alice
user2.show(); // Bob

const f = user1.show;
f(); // undefined

In JavaScript, the call(), apply(), and bind() methods are all used to explicitly set the value of the this keyword inside a function.

call() invokes the function immediately with a specified this value and arguments provided individually.

#call.js
const person = {
  name: "Adam"
};

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

greet.call(person, "Hello", "!"); // Hello, Adam!

apply() is similar to call(), but it takes arguments as an array instead of individually.

#apply.js
greet.apply(person, ["Hello", "!"]); // Hello, Adam!

bind() returns a new function with a fixed this value, but does not invoke it immediately.

#bind.js
const hello = greet.bind(person);

hello("Hello", "!"); // Hello, Adam!

#bind-arguments.js
const hello = greet.bind(person, "Hello", "!");

hello(); // Hello, Adam!

Function scoping ensures variables declared inside a function are local to it, preventing external access and name conflicts
1. IIFE is a function that is defined and executed immediately, creating a new scope to avoid polluting the global namespace.

#IIFE.js
(function greet() {
  var text = "Hi!"
  console.log(text); // Hi!
})();

(() => {
    var text = "Hello!"
    console.log(text); // Hello!
})()

Block Scoping means that variables declared with let and const are only accessible within the block they are defined in.
- var is function-scoped and can lead to unintended consequences if used inside blocks.

#block-scope.js
{
    let a = 1;
    var b = 2;
}

console.log(a) // ReferenceError: a is not defined
console.log(b) // 2

var is not always bad or replaced by let totally.

#var.js
function example() {
  if (true) {
    var x = 10;
  }

  // x is still accessible here
  console.log(x); // 10
}

example();

const should be used for variables that are not meant to be reassigned, but it can be misleading when used with objects and arrays.
- It only prevents reassignment of the variable itself, not the mutation of the object or array it references.

const teachers = ["Kyle", "Suzy"];

teachers[1] = "Brian"; teachers.push('Adam');

[!WARNING] Arrow Functions and this An arrow function is this bound (aka .bind()) to its parent function.

#arrow-function-this.js
const object = {
  a: 2,
  print: () => {
    console.log(this.a);
  }
}

object.print(); // undefined

#arrow-function-this.js
const object = {
  a: 2,
  print(){
    (() => console.log(this.a))() // get this from print's scope
  }
}

object.print(); // 2

#timeout-this.js
const object = {
  a: 2,
  print(){
    setTimeout(() => {
      console.log(this.a);
    }, 1000); // 2

    setTimeout(function() {
      console.log(this.a);
    }, 1000); // undefined
  }
}

object.print();

Closures

A closure is the combination of a function and the lexical environment within which that function was declared.

It allows an inner function to access variables from its outer scope, even after the outer function has finished executing.
Essentially, every function in JavaScript is a closure, as it automatically preserves the scope where it was created.
Closure can prevent garbage collection of an entire scope, variables and data might be retained in memory even if they are not directly used by the closure.

#closure.js
function createCounter() {
  let count = 0; // Private variable
  return {
    increment() {
      console.log(++count);
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();

counter.increment(); // 1

console.log(counter.count); // undefined (inaccessible from outside)

#function.js
function ask(question) {
    setTimeout(function waitASec() {
        console.log(question)
    }, 100)
}

ask("What is closure?"); // What is closure?

Closures basically preserve a scope, not values.

#var.js
for(var i = 1; i <= 3; i++){
    setTimeout(function() {
        console.log(`i: ${i}`);
    }, i * 1000);

} // 4, 4, 4

#let.js
for(let i = 1; i <= 3; i++){
    setTimeout(function() {
        console.log(`i: ${i}`);
    }, i * 1000);

} // 1, 2, 3

Module Pattern

In JavaScript, it is a design pattern used to encapsulate code, create private and public members (variables and methods), and avoid polluting the global scope.

It can be achieved in the following ways:
1. IIFE to create a private scope and return an object with public members.

#using-closure.js
const counterModule = (function () {
  let count = 0; // private

  function increment() {
    count++;
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    getCount, // public API
  };
})();

ES6 Modules using export and import statements to define and use modules.

#counter.mjs
let count = 0;

export function increment() {
  count++;
}

export function getCount() {
  return count;
}

#main.js
import { increment, getCount } from "./counter.js";

import * as counter from "./counter.js";

CommonJS Modules using module.exports and require() for server-side JavaScript (Node.js).

#counter.cjs
let count = 0;

function increment() {
  count++;
}

function getCount() {
  return count;
}

module.exports = {
  increment,
  getCount,
};

#main.js
const { increment, getCount } = require("./counter");

const counter = require("./counter");

Hoisting

JavaScript does not actually 'hoist' code at runtime, hoisting is a conceptual model.

During the compilation (parsing) phase, the engine registers declarations in memory before executing the code, which creates the appearance of hoisting.

Event Loop

Due to shortage of time, I’ll just explain later.

Asynchronous Programming

JavaScript is single-threaded, meaning it can only execute one operation at a time.

Asynchronous programming allows handling time-consuming operations without blocking the main thread.

Callbacks

Before promises, callbacks were the primary way to handle asynchronous operations, but they often led to callback hell or pyramid of doom.

#callback-hell.js
getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      getMoreData(c, function(d) {
        console.log(d);
      });
    });
  });
});

Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

It is a placeholder for a future value that will eventually be available.

#promise-basics.js
const promise = new Promise((resolve, reject) => {
  const success = true;
  
  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Operation failed!");
  }
});

A promise can be in one of three states: pending, fulfilled, and rejected.
- Once a promise is settled (fulfilled or rejected), its state cannot change.

#promise-states.js
const p1 = Promise.resolve(42); // fulfilled immediately

const p2 = new Promise(resolve => {
  setTimeout(() => resolve(100), 1000);
}); // pending for 1 second

console.log(p1); // Promise { 42 }
console.log(p2); // Promise { <pending> }

Then, Catch, Finally

The .then() method is used to handle the resolved value of a promise, while .catch() handles rejections.

#then-catch.js
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

.then() accepts two optional arguments: a callback for success and one for failure.

#then-two-callbacks.js
promise.then(
  value => console.log('fulfilled:', value),
  error => console.log('rejected:', error)
);

.finally() runs regardless of whether the promise was fulfilled or rejected.

#finally.js
fetch('/api/data')
  .then(response => response.json())
  .catch(error => console.error(error))
  .finally(() => console.log('Request completed'));

Promise Chaining

Each .then() returns a new promise, enabling method chaining and avoiding callback hell.

If you return a value in .then(), it wraps it in a resolved promise.

#promise-chaining.js
Promise.resolve(5)
  .then(value => value * 2) // 10
  .then(value => value + 3) // 13
  .then(value => {
    console.log(value); // 13
    return value;
  });

Promise Combinators

JavaScript provides several static methods to work with multiple promises.

Promise.all() waits for all promises to resolve, or rejects if any promise rejects.

#promise-all.js
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then(values => console.log(values)); // [1, 2, 3]

// If any promise rejects, the entire Promise.all rejects
Promise.all([p1, Promise.reject('error'), p3])
  .catch(error => console.log(error)); // 'error'

Promise.allSettled() waits for all promises to settle (fulfilled or rejected) and returns their results.

#promise-allsettled.js
const promises = [
  Promise.resolve(1),
  Promise.reject('error'),
  Promise.resolve(3)
];

Promise.allSettled(promises)
  .then(results => console.log(results));

/* [
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: 'error' },
  { status: 'fulfilled', value: 3 }
] */

Promise.race() returns the result of the first promise to settle, fulfilled or rejected.

#promise-race.js
let slow = new Promise(res => setTimeout(() => res('slow'), 20));
let fast = new Promise(res => setTimeout(() => res('fast'), 10));

Promise.race([slow, fast])
  .then(value => console.log(value)); // 'fast'

Promise.any() returns the first promise that fulfills, or rejects if all promises reject.

#promise-any.js
const p1 = Promise.reject('error1');
const p2 = Promise.resolve('success');
const p3 = Promise.reject('error2');

Promise.any([p1, p2, p3])
  .then(value => console.log(value)); // 'success'

// If all reject, throws AggregateError
Promise.any([Promise.reject('error1'), Promise.reject('error2')])
  .catch(error => console.log(error)); // AggregateError

Async/Await

async/await is syntactic sugar over promises, making asynchronous code look synchronous.

An async function always returns a promise.
await pauses execution until the promise resolves.

#async-await.js
async function fetchUser() {
  const response = await fetch('/api/user');
  const user = await response.json();
  return user;
}

fetchUser().then(user => console.log(user));

await can only be used inside async functions.
Error handling with async/await uses try/catch.

#async-error-handling.js
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

Promises with Array Methods

Working with promises in array methods requires careful handling to avoid common pitfalls.

Array.forEach() does not wait for promises and cannot be awaited.

#foreach-promise.js
const urls = ['/api/user/1', '/api/user/2', '/api/user/3'];

// This doesn't wait for promises to resolve
urls.forEach(async (url) => {
  const response = await fetch(url);
  console.log(await response.json()); // doesn't wait!
});

console.log('Done'); // Logs before fetches complete

Array.map() with promises returns an array of promises that can be used with Promise.all().

#map-promise.js
const urls = ['/api/user/1', '/api/user/2', '/api/user/3'];

// Correct way: map returns array of promises
const promises = urls.map(async (url) => {
  const response = await fetch(url);
  return response.json();
});

Promise.all(promises)
  .then(users => console.log(users));

// Or with async/await
async function fetchAllUsers() {
  const promises = urls.map(url => fetch(url).then(r => r.json()));
  const users = await Promise.all(promises);
  console.log(users);
}

Sequential processing with for...of loop ensures promises execute one after another.

#sequential-promises.js
const urls = ['/api/user/1', '/api/user/2', '/api/user/3'];

async function fetchSequentially() {
  const results = [];
  
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  }
  
  return results;
}

fetchSequentially().then(users => console.log(users));

Array.reduce() can be used for sequential promise chaining.

#reduce-promise-chain.js
const urls = ['/api/user/1', '/api/user/2', '/api/user/3'];

urls.reduce((promiseChain, url) => {
  return promiseChain.then(results => {
    return fetch(url)
      .then(response => response.json())
      .then(data => [...results, data]);
  });
}, Promise.resolve([]))
  .then(users => console.log(users));

Common Pitfalls

Forgetting to return a promise in a .then() breaks the chain.

#forgot-return.js
fetch('/api/user')
  .then(response => {
    response.json(); // Forgot to return!
  })
  .then(data => console.log(data)); // undefined!

Mixing async/await with .then() unnecessarily.

#mixing-async-then.js
// Unnecessary mixing
async function getUser() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => data);
}

async function getUser() {
  const response = await fetch('/api/user');
  return response.json();
}

Not handling promise rejections.

#unhandled-rejection.js
Promise.reject('error'); // UnhandledPromiseRejectionWarning

// Always handle rejections
Promise.reject('error').catch(err => console.error(err));

// Or with async/await
async function safeFunction() {
  try {
    await Promise.reject('error');
  } catch (error) {
    console.error(error);
  }
}

Using await in a loop unnecessarily makes operations sequential instead of parallel.

#sequential-vs-parallel.js
// Slow: Sequential execution
async function fetchSequential(urls) {
  const results = [];
  for (const url of urls) {
    results.push(await fetch(url)); // Waits for each request
  }
  return results;
}

// Fast: Parallel execution
async function fetchParallel(urls) {
  const promises = urls.map(url => fetch(url));
  return Promise.all(promises);
}

Creating promises inside promises (nested promises) defeats the purpose of promise chaining.

#nested-promises.js
// Promise nesting (callback hell 2.0)
fetch('/api/user')
  .then(response => {
    response.json().then(user => {
      fetch(`/api/posts/${user.id}`).then(response => {
        response.json().then(posts => {
          console.log(posts); // nested
        });
      });
    });
  });

// Flat promise chain
fetch('/api/user')
  .then(response => response.json())
  .then(user => fetch(`/api/posts/${user.id}`))
  .then(response => response.json())
  .then(posts => console.log(posts));

Generators

A generator is a special function that can pause its execution and resume later, allowing you to produce a sequence of values over time.

Uses the yield keyword to pause execution and return a value.
It returns an iterator object with next(), return(), and throw() methods.

#generator-basics.js
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

Generator Methods

The iterator returned by a generator has three methods for controlling execution.

next() resumes execution until the next yield.
return() terminates the generator and returns the provided value.

#generator-return.js
function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();

console.log(gen.next()); // { value: 1, done: false }

console.log(gen.return('done')); // { value: 'done', done: true }

console.log(gen.next()); // { value: undefined, done: true }

throw() throws an error inside the generator that can be caught with try/catch.

#generator-throw.js
function* errorHandler() {
  try {
    yield 1;
    yield 2;
  } catch (error) {
    console.log('Caught:', error);
  }
}

const gen = errorHandler();
console.log(gen.next());
console.log(gen.throw('Error!'));

/* Caught: Error!
{ value: undefined, done: true } */

Passing Values to Generators

The next() method can accept an argument that becomes the value of the yield expression.

#generator-input.js
function* calculator() {
  const a = yield 'Enter first';
  const b = yield 'Enter second';
  yield a + b;
}

const gen = calculator();
console.log(gen.next());   // { value: 'Enter first', done: false }
console.log(gen.next(1));  // { value: 'Enter second', done: false }
console.log(gen.next(5));  // { value: 6, done: false }

Generators with Loops

Generators can be iterated with for...of loops, which automatically calls next() until done is true.

#generator-loop.js
function* numbers() {
  yield 1
  yield 2
  yield 3
}

for (const num of numbers()) {
    console.log(num)
}

Async Generators

Async generators combine generators with async/await.

#async-generator.js
async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value); // 1, 2, 3
  }
})();

Classes

JavaScript classes are syntactic sugar over prototypes, introduced in ES6. They provide a cleaner syntax for creating objects and implementing inheritance.

Classes are not hoisted like function declarations.
Code inside classes runs in strict mode by default.

#class-basics.js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

const john = new Person('John', 30);

console.log(john.greet()); // Hi, I'm John

The instanceof operator tests whether an object is an instance of a class.

#instanceof.js
class Animal {}
class Dog extends Animal {}

const dog = new Dog();

console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true

Constructor

The constructor method is a special method called when creating a new instance with the new keyword.

#constructor.js
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  get area() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 50

Class Methods

Constructor vs `prototype`

Methods defined inside constructor are re-created for every new instance of the object.
Methods defined on the prototype are created only once and shared among all instances, providing better performance.
Prototype is like a blue-print for objects.

#class-methods.js
class Calculator {
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
console.log(calc.add(5, 3)); // 8

#constructor-methods.js
class Animal {
  constructor(name) {
    this.name = name;

    this.speak = function(){
      return `${this.name} makes a sound`;
    }
  }
}

const animal = new Animal('Generic Animal');
console.log(animal.speak()); // Generic Animal makes a sound

Static Methods

Static methods belong to the class itself, not to instances. They’re called on the class directly.

#static-methods.js
class MathUtils {
  static PI = 3.14159;
  
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(5)); // 25

Getters and Setters

Getters and setters allow you to define methods that are accessed like properties.

#getters-setters.js
class Circle {
  constructor(radius) {
    this._radius = radius;
  }
  
  get radius() {
    return this._radius;
  }
  
  set radius(value) {
    if (value <= 0) {
      throw new Error('Radius must be positive');
    }
    this._radius = value;
  }
}

const circle = new Circle(5);
console.log(circle.radius); // 5
circle.radius = 10;

Private Fields

Private fields start with # and are only accessible within the class.

#private-fields.js
class BankAccount {
  #balance = 0;
  
  constructor(initialBalance) {
    this.#balance = initialBalance;
  }
  
  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }
  
  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500

// console.log(account.#balance); // SyntaxError: Private field

Private Methods

Private methods are also prefixed with # and can only be called from within the class.

#private-methods.js
class DataProcessor {
  #processData(data) {
    return data.map(x => x * 2);
  }
  
  process(data) {
    return this.#processData(data);
  }
}

const processor = new DataProcessor();
console.log(processor.process([1, 2, 3])); // [2, 4, 6]

Inheritance

Classes can extend other classes using the extends keyword, inheriting properties and methods.

#inheritance.js
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call parent constructor
    this.breed = breed;
  }
  
  speak() {
    return `${this.name} barks`;
  }
}

const dog = new Dog('Rex', 'Labrador');
console.log(dog.speak()); // Rex barks

Super Keyword

The super keyword is used to access the parent class.

super() calls the parent constructor.
super.method() calls a parent method.

#super-keyword.js
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  
  area() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  constructor(side) {
    super(side, side); // Call parent constructor
  }
  
  area() {
    return super.area(); // Call parent method
  }
}

Static Inheritance

Static methods are also inherited by child classes.

#static-inheritance.js
class Animal {
  static kingdom = 'Animalia';
  
  static describe() {
    return `This is an animal from ${this.kingdom}`;
  }
}

class Dog extends Animal {
  static species = 'Canis familiaris';
}

console.log(Dog.kingdom); // Animalia
console.log(Dog.describe()); // This is an animal from Animalia
console.log(Dog.species); // Canis familiaris

[!warning] Method Overriding

Child classes can override parent methods while still accessing the original via super.

[!warning] Class Expressions Classes can be defined as expressions, named or anonymous, and assigned to variables

Prototype Chain

Classes in JavaScript still use the prototype chain under the hood.

#prototype-chain.js
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  bark() {
    return `${this.name} barks`;
  }
}

const dog = new Dog('Rex');

console.log(dog.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(Dog.prototype === Animal.prototype); // false

console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true

Prototypes

In JavaScript, every object has a hidden internal property called [[Prototype]] that references another object. This forms the prototype chain, which is the foundation of inheritance.

The prototype chain is checked when accessing properties or methods on an object.
If a property isn’t found on the object, JavaScript looks up the prototype chain.
All JavaScript objects ultimately inherit from Object.prototype.

proto vs prototype

__proto__ and prototype are different but related concepts.

prototype is a property of constructor functions.
__proto__ is the actual object used in the lookup chain, deprecated tho, use Object.getPrototypeOf() instead.

#proto-vs-prototype.js
function Animal(name) {
  this.name = name;
}

const dog = new Animal('Rex');

// dog.__proto__ points to Animal.prototype
console.log(dog.__proto__ === Animal.prototype); // true

// Animal.prototype has a constructor property pointing back
console.log(Animal.prototype.constructor === Animal); // true

Dynamic Prototype Modification

You can add methods to a prototype at any time, and all instances, even existing ones, will have access to the new method.

#dynamic-prototype.js
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {}

const dog = new Dog('Rex');
const dog2 = new Dog('Buddy');

dog.__proto__.printName = function() {
  console.log(`The dog's name is ${this.name}`);
};

Animal.prototype.printName = function() {
  console.log(`The dog's name is ${this.name}`);
}; // This also works btw

dog.printName(); // The dog's name is Rex
dog2.printName(); // The dog's name is Buddy

Object.create( )

Object.create() creates a new object with a specified prototype, allowing explicit control over inheritance without using classes or constructor functions.

#object-create.js
const counter = {
  count: 0,
  increment() {
    this.count++;
  }
}

const obj = Object.create(counter);
counter.increment();
console.log(obj.count); // 1, from counter prototype

obj.increment(); // count is incremented on obj, not counter

console.log(counter.count); // 1
console.log(obj.count); // 2 (shadowing counter's count)

/* from now on obj.count is independent of counter.count, 
they are separate properties */

​Types

JavaScript Specification

​Fundamental Objects

​Type Coercion

​Boxing

​Equality

​Scope

​Closures

​Module Pattern

​Hoisting

​Event Loop

Event Loop

​Asynchronous Programming

​Callbacks

​Promises

​Then, Catch, Finally

​Promise Chaining

​Promise Combinators

​Async/Await

​Promises with Array Methods

​Common Pitfalls

​Generators

​Generator Methods

​Passing Values to Generators

​Generators with Loops

​Async Generators

​Classes

​Constructor

​Class Methods

Constructor vs prototype

​Static Methods

​Getters and Setters

​Private Fields

​Private Methods

​Inheritance

​Super Keyword

​Static Inheritance

​Prototype Chain

​Prototypes

​__proto__ vs prototype

​Dynamic Prototype Modification

​Object.create( )

Types

Fundamental Objects

Type Coercion

Boxing

Equality

Scope

Closures

Module Pattern

Hoisting

Event Loop

Asynchronous Programming

Callbacks

Promises

Then, Catch, Finally

Promise Chaining

Promise Combinators

Async/Await

Promises with Array Methods

Common Pitfalls

Generators

Generator Methods

Passing Values to Generators

Generators with Loops

Async Generators

Classes

Constructor

Class Methods

Constructor vs `prototype`

Static Methods

Getters and Setters

Private Fields

Private Methods

Inheritance

Super Keyword

Static Inheritance

Prototype Chain

Prototypes

proto vs prototype

Dynamic Prototype Modification

Object.create( )