DEV Community: angDecoder

CHAPTER 1 : Reliable, Scalable, and Maintainable Applications

angDecoder — Sun, 29 Dec 2024 06:48:48 +0000

1. Fundamentals of Data-Intensive Applications
- 1.1. Reliability
- 1.2. Scalability
- 1.3. Maintainability
2. Reliability
- 2.1. Hardware Faults
- 2.2. Software Errors
- 2.3. Human Errors
3. Scalability
- 3.1. Describing Load
- 3.1.1. Case Study: Twitter's Operations and Scaling Challenges
- 3.2. Describing Performance
- 3.2.1. Using Percentiles for Response Times
4. Maintainability

1. Fundamentals of Data-Intensive Applications

Modern applications are often data-intensive, not compute-intensive. Key challenges include:

Amount of data: Handling large volumes.
Data complexity: Managing intricate structures.
Data change speed: Processing updates in real time.

Effective systems must focus on reliability, scalability, and maintainability.

1.1. Reliability

Systems must function correctly under:

Hardware failures: Disk crashes, network outages.
Software bugs: Unexpected behavior.
Human errors: Mistakes in configuration or operations.

1.2. Scalability

Systems should handle growth in:

Data volume: Large datasets.
Traffic volume: High user requests.
Complexity: Evolving use cases.

1.3. Maintainability

Systems must remain easy to work on over time:

Multiple contributors can modify and maintain it.
Adapts to new features and requirements.
Minimizes technical debt and operational issues.

2. Reliability

Reliability in software means:

The application performs the expected function.
It tolerates user mistakes or unexpected usage.
Performance meets the requirements under expected load and data volume.
It prevents unauthorized access and abuse.

a. Faults: When a component deviates from its specification.
b. Failures: When the system stops providing the required service.

Fault-tolerant or resilient systems anticipate and cope with faults.

Testing fault-tolerant systems can involve deliberately triggering faults. For example, Netflix's Chaos Monkey tests system resilience by introducing faults intentionally.

2.1. Hardware Faults

Modern systems favor software fault-tolerance techniques alongside or instead of hardware redundancy. These systems offer operational benefits, such as:

Tolerating machine loss: Enables continuous operation despite hardware failures.
Rolling upgrades: Allows patching or rebooting machines one node at a time without system downtime.

2.2. Software Errors

Bug causing all instances of an application server to crash with a bad input (e.g., leap second on June 30, 2012, affecting Linux kernel).
Service dependency that slows down, becomes unresponsive, or returns corrupted responses.
Cascading failures: A fault in one component triggers faults in others [10].
Runaway process consuming shared resources (CPU, memory, disk, network).

2.3. Human Errors

3. Scalability

Scalability refers to a system's ability to handle increased load.

3.1. Describing Load

Load parameters quantify load (e.g., requests per second, read/write ratio, active users, cache hit rate).
Parameters depend on the system's architecture. Average case performance or Extreme cases causing bottlenecks.

3.1.1. Case Study: Twitter's Operations and Scaling Challenges

Twitter handles two primary operations:

Post Tweet: A user publishes a message to their followers.
- Load:
  - Average: 4.6k requests/sec.
  - Peak: Over 12k requests/sec.
- Process: Add the tweet to a global collection.
Home Timeline: A user views tweets from followed accounts.
- Load: 300k requests/sec.
- Process:
  - Lookup followed users.
  - Fetch and merge their tweets, sorted by time.

How to get the Home Timeline posts ?

Option 1: On-Demand Generation

Process: Fetch and merge tweets from followed users when requested.
Simplifies write operations (posting a tweet is lightweight).

Option 2: Cached Home Timeline

Maintain a cache for each user (like a tweet mailbox).
Reads are cheap as results are pre-computed.
Write operations become heavier (more work to update multiple caches).

Twitter switched to Approach 2 (cached home timelines). This change proved more effective because the rate of home timeline reads is nearly two orders of magnitude higher than the rate of published tweets. By shifting more work to write time, the system reduced the burden on read time, enhancing scalability and overall performance.

3.2. Describing Performance

To analyze system performance under increasing load, consider two perspectives:

Fixed Resources:
- Increase a load parameter (e.g., requests/sec) while keeping system resources (CPU, memory, bandwidth) constant.
Scaling Resources:
- Increase a load parameter and determine how much system resources need to scale to maintain unchanged performance.

Latency vs. Response Time => **Response Time* is total time observed by the client, including: Service time (Time to process the request.) and Network delays and queueing delays. Whereas,
Latency is the time a request spends waiting to be handled (awaiting service)

3.2.1. Using Percentiles for Response Times

Percentiles: Provide a clearer picture of response time distribution than averages.
- Median (p50):
- Half of requests are completed faster than the median, and half are slower.
- Commonly used in SLOs (Service Level Objectives) and SLAs (Service Level Agreements) to define expected performance.
Head-of-Line Blocking:
- A few slow requests can delay the processing of subsequent requests, creating bottlenecks.

4. Maintainability

Cost of Maintenance:
- Most software costs arise not from initial development but from ongoing maintenance tasks such as: Fixing bugs, Operational upkeep, etc.
Goal: Minimize maintenance pain and avoid creating legacy systems by focusing on these key design principles:

a. Operability:

Ensure operations teams can manage the system efficiently and keep it running smoothly.
Can be achieved with proper documentation, updating with security-pathes, monitoring.

b. Simplicity:

Reduce system complexity to make it easier for new engineers to understand.
Can be achieved through abstraction.
Note: Simplicity here refers to system design, not the user interface.

c. Evolvability:

Enable future changes to the system for unanticipated use cases as requirements evolve.
Also referred to as extensibility, modifiability, or plasticity.

Closures In Javascript

angDecoder — Sun, 24 Mar 2024 06:47:40 +0000

1. What is Closure?

Closure --> Closure is the combination of function bundled along with its lexical environment is called "closure".

Let us understand closure using example :


function outer(){
   function inner(){
      console.log(a);
   }

   var a = 10;

   // returning reference of inner() function
   return inner;
}

// 'inn' variable has reference of 
// 'inner' function declared inside 'outer' function
const inn = outer();

inn(); // OUTPUT : 10

// how could inn() function can access variable 'a'
// in 'outer' function scope?

// This is because 'inner' function forms closure
// with the 'outer' function ,i.e., it remembers
// lexical environment at it's declaration

There are various advantages of closures, we will discuss them one by one -

Modular Design Pattern
Currying
Data Hiding and Encapsulation

2. Modular Design Pattern

It is a design pattern used in Javascript to encapsulate and organise code. It creates modular and reusable pieces of code.

It can be created using ES6 modules, CommonJS modules or closure. Here, we will see only the closure implementation of modules.

Modules help organize code into logical units, making it easier to manage dependencies, isolate functionality, and scale applications.


const myModule = (function(){
  var a = 10;
  function privateFun(){
    console.log(a);
  }

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

  // those value return from this IIFE
  // are treated as *public*
  // and rest are *private*
  return {
    publicFun,
    b : 20
  }
})();


console.log(myModule.b);
console.log(myModule.publicFun());

3. Currying in JavaScript

It is a technique to change the function with multiple arguments into sequence of functions with single arguments.

For example :- to add 3 numbers we would pass arguments like sum(a,b,c) but in currying we would create functions that would only take 1 or 0 arguments. So, our function would look like sum(a)(b)(c)().

For summing 4 numbers, normally we would need to create new function but with currying we can use the same function sum(a)(b)(c)(d)(). Now, let us create this currying function.

a. Currying with recursion

Here, we use recursion to create currying function. add() function has one parameter a and returns another function which in turns has a parameter b.

function add(a){
   return function(b) {
      if(b===undefined) 
         return a;
      else 
         return add(a+b);
  }

Let us try to visualise this currying with example, sum(a)(b)(). So, when we call sum(a) it returns a function. Now, we have passed b to the returned function like sum(a)(b), but this also returns a function. At last, we don't pass any arguments and the inner function only returns value( because b===undefined ) and not the function.

Try to visualise this on your own with the help of pen and paper for three variables.

b. Currying with .bind() method

.bind() method binds a function with a object. It has one parameter, which takes an object to be binded. The other parameter passed to the function are treated as default arguments for the binded function.


const sum = (
  function add(a,b){
    if( b===undefined ) 
      return a;

    return add.bind(null,a+b);

  }
).bind(null,0)

4. Data Hiding and Encapsulation

Data hiding is about hiding the internal state of an object from the outside world, typically by marking certain attributes or methods as private or protected.

Encapsulation is the bundling of data (attributes) and methods (functions) that operate on that data into a single unit (class), and providing controlled access to them through well-defined interfaces (public methods).

Both concepts aim to improve security, maintainability, and modularity by controlling access to data and implementation details in object-oriented programming.

Let us, create a counter function to see data hiding and encapsulation in action.


function counter(){
   let count = 0;
   return {
      reset     : ()=>count=0;
      increment : ()=>count++,
      decrement : ()=>count--,
      value     : ()=>val,
   }
}

Calling the counter function, it returns a object using which we can use counter. But, we can't directly manipulate the count variable inside the counter() functions.

5. Disadvantages of Closures

Although, closures are amazing over using this could lead to serious problems like :-

a. Over Consumption of memory
b. Memory Leak
c. Freeze Browser

JavaScript : Execution Context and Hoisting

angDecoder — Sun, 25 Feb 2024 10:40:51 +0000

Table Of Content

1. Intro
2. Execution Context

i. Variable Environment
ii. Thread of Execution.

3. Hoisting in JavaScript
4. Scope, Scope chain and Lexical Environment

1. Intro

JavaScript --> JavaScript is a single-threaded, synchronous language.

Synchronous : In a specific order
Single-threaded : One command at a time

JavaScript is a high-level, interpreted programming language primarily used for creating dynamic and interactive content on websites. It requires a runtime environment to run in browsers. Most famous runtime environment is V8 engine(google).

JavaScript can also be used in server-side(Node.js), which also uses V8 engine and some additional features to make it run outside the browsers.

2. Execution Context

Execution Context --> It refers to the environment inside which the javascript code is executed.

Execution context is created in two phases :-

Variable Environment (Memory Component)
Thread of Execution (Code Componeent)

i. Variable Environment

This is the first phase of javascript code execution. In this phase memory allocation takes place for variables and functions.

It goes through the code line by line and allocates memory :-

For variables, it stores undefined as placeholder
For functions, it stores the entire code.


var a = 2;
var b = "hi";
function printHello(){
   console.log("hello world");
}

/*
  For first phase it stores ----

  **** GLOBAL EXECUTION CONTEXT ****
  a : undefined
  b : undefined
  printHello() : the whole code is saved

*/

ii. Thread of Execution.

In this phase, code is executed line-by-line.

For variable, when initialisation is encountered it replaces the undefined with value.

When function call is encountered.

A new execution context is created inside the previous one.
When return is encountered then returns the control to the previous execution context.


var a = 2;
var b = "hi";
function printHello(){
   var c = 11;
   console.log("hello world");
}

// for below function call, a new exection context is created
// which also goes through the same two phases as we have discussed
printHello();

/*
For the second phase

*** GLOBAL EXECUTION CONTEXT ***
a : 2
b : "hi"
printHello() : code is executed

*/

Now, that we have understood how execution context is created and how function can create it's own execution context, you might be wondering how javascript handles all these execution context. The answer is call stack.

Call stack --> It is a simple stack of execution context with the top element being the function currently being executed.

For each function call javascript creates a seperate execution context and pushes it inside the call stack. The very first execution context which is pushed inside the call stack is global execution context.

In the first phase of execution context only memory allocation for variables and functions. No code execution during this phase

3. Hoisting in JavaScript

Hoisting --> It is a concept which allows us to extract values of variables and call function even before they are initialised.

Let us understand this concept with the help of example :


console.log(a);   // undefined
hello();          // hello

var a = 10;
function hello(){
   console.log("hello");
}

You might be wondering, how we can print variable a or how we could call function hello. We have already discussed the answer in the previous section.

During the first phase of memory allocation, the variable a was given value undefined and for function hello the whole code was saved. So, even before their declaration we can access them.

But there are some special case :-

For variables declared using let or const, we can't access the variables before their declaration. The time between their hoisting and declaration is called Temporal Dead Zone(TDZ). Accessing any variable in their TDZ, will give us Reference Error.


console.log(a);    // Reference Error
console.log(b);    // Reference Error

let a = 10;
const b = 20;

For functions expression, they are treated as variables before their declaration and only as function after their declaration.



console.log(fun1);
// OUTPUT - undefined
// What would would happen if we print fun2 and fun3 ?
// ans -> they are in their TDZ, so it would give Reference Error

fun1();
fun2();
fun3();
// for the above function calls it would give *Type Error*.

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

let fun2 = function(){
   console.log('fun2');
}

const fun3 = ()=>{
   console.log('fun3');
}

4. Scope, Scope chain and Lexical Environment

Block --> Multiple lines of code grouped together using curly braces {} is called a block.

Scope --> Region of code inside which the variables and function can be accessed.
Javascript mainly has types of scope : local scope and global scope.

Variables declared using var are function scoped and variables declared using let or const are block scoped. It means that var variables follow the scope of function only and not any other block. Whereas, let or const variables can't be accessed outside of block they are declared in( also includes function block ).

// the below block could be any block
// *for*, *while* etc.
{
   let a = 10;
   const b = 11;
   var c = 12;
}

console.log(a); // Reference Error
console.log(b); // Reference Error
console.log(c); // 12

// *c* can be accessed outside because it only follows
// function scope and here it is treated as if it was
// declared in globally

Lexical Environment --> The lexical environment is local memory along with lexical environment of it's parent. It consists of two components:

Environment Record: Stores the mapping of variable names to their corresponding values within the scope. For function scopes, it also includes a reference to the outer lexical environment.
Reference to the Outer Lexical Environment: A reference to the lexical environment in which the current lexical environment was created, forming a chain of lexical environments known as the scope chain.

Scope Chain --> The scope chain is a mechanism used to resolve references to variables within nested functions. When a variable is referenced within a function, JavaScript first looks for that variable within the local scope of the function. If it's not found there, it continues to look in the next outer scope, forming a chain until it reaches the global scope. This process is called scope chain traversal.


let a = "global a";

function outer(){
   let b = "outer b";
   let c = "outer c"

   function inner(){
      let b = "inner b"; 
      console.log(a);  // global a
      console.log(b);  // inner b
      console.log(c);  // outer c
  }
  inner();
}

outer();

// Lexical Chain
// NULL <- global <- outer <- inner

Demystifying Buffers in Node.js

angDecoder — Tue, 20 Feb 2024 08:20:31 +0000

1. What is Buffer?
2. What is Character Encoding?
3. Buffer in Node.js

3a. Buffer.alloc()
3b. Buffer.from()
3c. Buffer.allocUnsafe()
3d. Buffer.compare()
3e. Buffer.toString()

In this blog series, we'll unravel the mystery surrounding buffers, exploring their crucial role in optimising everything from streaming to web browsing.

1. What is Buffer?

Buffers --> These are temporary storage area in memory used to hold data while it's being transferred from one place to another.
In Node.js, Buffer objects are used to represent a fixed-length sequnce of bytes.

Let us say, we want to copy a file of size 10GB, from one device to another device. The device speed may vary, which would lead to various problems like :

Memory Overload --> Reading the entire file into memory at once could easily overwhelm the available memory resource.
Performance Degradation --> As the system would spend much of it's time in I/O operation.
Data corruption --> If error occurs during file transfer, there would be no way to maintain data integrity and some data might corrupted.

2. What is Character Encoding?

Character Encoding --> It is the process of representing characters from a written language, numbers, and symbols as binary data (bits and bytes) for storage or transmission in a digital system.

It is used to represent a sequence of bits into a character. For eg :-
'11001001' might represent character 'a' in some encoding while 'd' in another encoding.

Here are some basic definition :-

Character Set --> A character set is a collection of characters, such as letters, digits, punctuation marks, and special symbols, used in written communication.
Binary Representation --> Since computer can only understand 0's and 1's, each character in character set in give a unique binary code.
Code Pages And Standards --> Different character encoding use different encoding schemes for encoding. For eg -> ASCII uses 7-bits to represent 128 characters and UTF-8 uses 8-bits to represent characters.

Some examples of encoding are :- UTF-8, UTF-16, ASCII etc. In Node.js default encoding is UTF-8.

3. Buffer in Node.js

Buffer objects are used to represent a fixed-length sequence of bytes. The Buffer class is a subclass of JavaScript's Uint8Array class and extends it with methods that cover additional use cases.

a. Buffer.alloc(size,fill,encoding) --> It creates a new buffer with given size.

size : The desired length of the new Buffer.
fill : A value to pre-fill the new Buffer with. Default: 0.
encoding : Encoding to be used. Default 'UTF-8'.


const { Buffer } = require('node:buffer');
// Buffer is available globally but it is 
// recommended to import explicitly


const buff1 = Buffer.alloc(5);
console.log(buff1);
// Buffer allocated 5 size filled with zero
// output is represented as hexadecimal number
// OUTPUT : <Buffer 00 00 00 00 00>


const buff2 = Buffer.alloc(5,1);
console.log(buff2);
// buffer allocated 5 size filled with 1
// OUTPUT : <Buffer 01 01 01 01 01>

b. Buffer.from(array or string) --> It takes array or string as an argument and creates the buffer size and value accordingly.


const { Buffer } = require('node:buffer');

const buff3 = Buffer.from('hello','utf-8');
console.log(buff3);
// buffer size allocated for string 'hello'
// with character encoding 'utf-8'(default)
// OUTPUT : <Buffer 68 65 6c 6c 6f>

const buff4 = Buffer.from([0x7f,17,0]);
console.log(buff4);
// buffer size and value according to array
// array elements can be number(integer OR hexadecimal)
// OUTPUT : <Buffer 7f 11 00>

c. Buffer.allocUnsafe(size) --> It creates a buffer of given size but with random values.( NOT RECOMMENDED ). It is little faster than "Buffer.alloc()" method


const { Buffer } = require('node:buffer');

const buff5 = Buffer.allocUnsafe(5);
console.log(buff5);
// faster than '.alloc()' method
// OUTPUT : <Buffer 60 67 6c 6d 6e>

d. Buffer.compare(buff1,buff2) --> Mainly used when we want to sort array of Buffers. It's output could vary :-

0 is returned if buff2 is the same as buff1
1 is returned if buff2 should come before buff1 when sorted.
-1 is returned if buff2 should come after buff1 when sorted.


const { Buffer } = require('buffer');

const buff6 = Buffer.from('0123');
const buff7 = Buffer.from('1234');

console.log(Buffer.compare(buff6,buff7));
// OUTPUT : -1

e. Buffer.toString(encoding) --> This method converts a given buffer to string with given encoding. DEFAULT ENCODING : UTF-8


const { Buffer } = require('buffer');

const buff8 = Buffer.from('hello');
console.log(buff8.toString());
// OUTPUT : hello

🔥Mastering Event Emitters in Node.js

angDecoder — Mon, 19 Feb 2024 10:30:49 +0000

Table of content

1. Intro
2. What is event Emitter?
3. Why Event Emitters are required?
4. Some additional functionalities.
5. Error handling
6. Custom Event Emitter

1. Intro

In the world of Node.js, Event Emitters are the backbone of asynchronous communication, enabling seamless interaction between different components of an application. In this guide, we'll delve into the essence of Event Emitters, exploring how they empower developers to create scalable and responsive systems.

2. What is Event Emitter?

Events --> Events in programming generally refer to occurrences or happenings within a system or application that trigger specific actions or reactions.

Event Emitters --> These are objects which allows for the handling and propagation of events within a Node.js application.

In simple words event emitters are objects which keep track of events and all the functions attached to it. Whenever a event is emitted all the functions attached to that particular events are emitted synchronously. Let us see that in action :


const EventEmitter = require('node:events');

class MyEmitter extends EventEmitter {};

const myEmitter = new MyEmitter();

// registering an event
myEmitter.on('foo', () => {
  console.log('an event occurred!');
});

// emitting a event
myEmitter.emit('foo'); 

/*
OUTPUT :
an event occurred!
*/

EventEmitter object exposes two function .on() and .emit(). We can attach multiple functions to the same event and they are called synchronously one by one in the order they were registered.

const EventEmitter = require('node:events');

class MyEmitter extends EventEmitter {};

const myEmitter = new MyEmitter();

myEmitter.on('foo', () => {
  console.log('foo -- 1');
});

myEmitter.on('foo', () => {
  console.log('foo -- 2');
});

myEmitter.on('foo', () => {
  console.log('foo -- 3');
});

myEmitter.emit('foo'); 
/*
OUTPUT :
foo -- 1
foo -- 2
foo -- 3
*/

3. Why Event Emitters are required?

This particular question can be understood with a simple example. Let us say we want to perform some action whenever we press 'ENTER' on keyboard.

One solution could be that, we synchronously(constantly) check if the 'ENTER' is pressed or not. But the problem with this approach is that we would be dedicating one core of out CPU to entirely this task. This core would not be able to perform any other task other than checking for 'ENTER' key press on keyboard.

Another solution, which the Node.js follows, is event-driven architechture. In this approach, whenever the 'ENTER' key is pressed in keyboard, we emit an event which is read by CPU and performs the task accordingly. We don't need to synchronously check for the event, but whenever the event is emitted then only perform the action.

4. Some additional functionalities .

Passing arguments and 'this' to listeners

The .emit() method allows an arbitrary set of arguments to be passed to the listener functions.

const EventEmitter = require('node:events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('foo', function(a, b) {
  console.log(a, b, this === myEmitter); // this binded to myEmitter
  // OUTPUT : 1 2 true
});

myEmitter.on('foo',(a,b)=>{
  console.log(a,b,this===myEmitter); // this is binded not binded to myEmitter
});
myEmitter.emit('foo', 1, 2);

By default, for normal function the 'this' is binded to 'myEmitter'. But, in case of arrow function 'this' is not binded to 'myEmitter' object.

Handling events only once

When a listener is registered using the .on() method, that listener is invoked every time the named event is emitted.
But, when it is registered using the .once() method it is called only once and ignored in subsequent calls.


const EventEmitter = require('node:events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();

myEmitter.once('foo', () => {
  console.log("event occured");
});
myEmitter.emit('foo');
// Prints: 1
myEmitter.emit('foo');
// Ignored

Getting all the events

Using the .eventNames() method we can get all the registered listeners as an array of strings or symbols


const EventEmitter = require('node:events');

class MyEmitter extends EventEmitter{};
const ee1 = new MyEmitter();

ee1.on('foo',()=>{
  console.log('foo called');
});

ee1.on('bar',()=>{
  console.log('bar called');
});

console.log(ee1.eventNames());
// OUTPUT : [ 'foo' , 'bar' ]

There are some other functionalities which are listed below which I have not explained because they are self explanatory.

.newListener(eventName,listener) --> adds new listenter just like .on() method
.removeListener(eventName) --> removes listener just like .off() method
.listenerCount(eventName) --> returns number of listener for particular event
.prependListener(eventName,listener) --> add listener to the begining of the list
.prependOnceListener(eventName,listener) --> add once listener to the beginning of the list
.removeListener(eventName,listener) --> removes listener from eventName
.removeAllListener(eventName) --> removes all listeners for particualr event

5. Error handling

When an error occurs within the EventEmitter instance, the typical action is for an 'error' event to be emitted.

If an EventEmitter doesn't have listener function for the 'error' event then : the error is thrown, the error stack is printed and Node.js process exits.

  "use strict";
const EventEmitter = require('events');
class MyEmitter extends EventEmitter{};

const myEmitter = new MyEmitter();


myEmitter.on('foo',()=>{
  myEmitter.emit('error', new Error('whoops! error occured'));
});

myEmitter.on('error',(err)=>{
  console.log('error occured ---> ',err);
});

myEmitter.emit('foo');

Capture rejections of promises

Using async function with the event emitter can lead to unhandled rejection in case of thrown exception or rejected promise.


const EventEmitter = require('node:events');

class MyEmitter extends EventEmitter{};
const ee1 = new MyEmitter();

ee1.on('foo',async()=>{
  throw new Error('some error '); 
})

// does not capture thrown exception or rejected promise
// inside the 'foo' event
ee1.on('error',(err)=>{
  console.log('error here ---> ', err); 
});

ee1.emit('foo');

Passing the "captureRejection" as "true" solves this default behaviour and 'error' event can now capture any unhanled thrown exception or rejected promise.


const EventEmitter = require('node:events');

class MyEmitter extends EventEmitter{};
const ee2 = new MyEmitter({ captureRejections : true });

ee2.on('foo',async()=>{
  // could be a thrown exception as well 
  // like in above exmaple
  return Promise.reject("my rejection");
})

// it can capture thrown exception or rejected promise
// inside the 'foo' event
ee2.on('error',(err)=>{
  console.log('error here ---> ', err); 
});

ee2.emit('foo');

Setting events.captureRejections = true will change the default for all new instances of EventEmitter.


const events = require('node:events');
events.captureRejections = true;
// now the default behaviour is changed
// all the event emitter extending would now be
// able to capture rejections

6. Custom Event Emitter

Now, that we have understood about the event emitters, let us now design our own event emitter.
At first, we will create a simple Node.js file which will have all the logic to implement our own event emitter. The new file will look something like this :

// FILE NAME --> events.js
module.exports = class Events{
    #listeners = {} 
    // use above object to keep track of 
   // events and corresponding listeners

    addListener(eventname, fun){
        // write logic here
    }

    on(eventname,fun){
        // write logic here
    }

    once(eventname,fun){
        // write logic here
    }

    removeListener(eventname,fun){
        // write logic here
    }

    off(eventname,fun){
        // write logic here
    }

    emit(eventname,...args){
        // write logic here
    }

    listenerCount(eventname){
        // write logic here
    }
}

I will encourage you to write the logic yourself first and try that out.

Let us now add logic for adding new event listeners. For each listener we also need to keep the information whether it should be called once. To do that, we create a object with two properties :

once --> to check if it should be called only once
fun --> the listener function


module.exports = class Events{
    #listeners = {}

    addListener(eventname, fun, once = false){
        this.#listeners[eventname] = this.#listeners[eventname] || [];
        this.#listeners[eventname].push({once, fun });

        return this;
    }

    on(eventname,fun){
        return this.addListener(eventname,fun);
    }

    once(eventname,fun){
        return this.addListener(eventname,fun,true);
    }
}

Now, let us add the functionality to remove the listeners from event emitter. Here we simply use filter function to remove the listener function.

REMINDER : For functions only reference is checked while comparing so pass the correct listener function while removing the function


module.exports = class Events{
    #listeners = {}

    removeListener(eventname,fun){
        if( !this.#listeners[eventname] )
            return this;


        this.#listeners[eventname] = this.#listeners[eventname].filter(elem=>{
            if( elem.fun!=fun )
                return true;

            return false;
        })

        return this;
    }

    off(eventname,fun){
        return this.removeListener(eventname,fun);
    }

  // other methods
}

Finally, let us implement the '.emit()' and '.listenerCount()'. Inside '.emit()' method, if the listener is registered as 'once = true' then also remove that listener.

module.exports = class Events{
    #listeners = {}

    emit(eventname,...args){
        if( !this.#listeners[eventname] )
            return this;

        this.#listeners[eventname] = this.#listeners[eventname].filter(elem=>{
            elem.fun(...args);
            return !elem.once;
        })

        return this;
    }

    listenerCount(eventname){
        let fns = this.#listeners[eventname] || [];
        return fns.length;
    }

   // other methods

}

Here is the entire code.


module.exports = class Events{
    #listeners = {}

    addListener(eventname, fun, once = false){
        this.#listeners[eventname] = this.#listeners[eventname] || [];
        this.#listeners[eventname].push({once, fun });

        return this;
    }

    on(eventname,fun){
        return this.addListener(eventname,fun);
    }

    once(eventname,fun){
        return this.addListener(eventname,fun,true);
    }

    removeListener(eventname,fun){
        if( !this.#listeners[eventname] )
            return this;


        this.#listeners[eventname] = this.#listeners[eventname].filter(elem=>{
            if( elem.fun!=fun )
                return true;

            return false;
        })

        return this;
    }

    off(eventname,fun){
        return this.removeListener(eventname,fun);
    }

    emit(eventname,...args){
        if( !this.#listeners[eventname] )
            return this;

        this.#listeners[eventname] = this.#listeners[eventname].filter(elem=>{
            elem.fun(...args);
            return !elem.once;
        })

        return this;
    }

    listenerCount(eventname){
        let fns = this.#listeners[eventname] || [];
        return fns.length;
    }
}

✅ JavaScript Inheritance without classes

angDecoder — Sun, 09 Jul 2023 10:54:06 +0000

In previous tutorial I mentioned the [[Prototype]] chain several times, but haven’t said what exactly it is. We will now examine prototypes in detail.
Before starting with this tutorial please do not have any preconceived ideas about any topic as the keywords might be similar to other languages but their meaning might be completely different in JavaScript.

1. What is Prototype?
2. [[Prototype]] links
3. proto
4. '.constructor' Property
5. Getters and Setters
6. [[GET]] Operation
7. [[PUT]] Operation

1. What is Prototype?

Prototype is a mechanism by which JavaScript objects inherit features from one another.

But when it comes to inheritance JavaScript unlike other Object-oriented languages like C++ or Java doesn't have classes, it only has objects. So, unlike other languages JavaScript uses objects for inheritance.

At this point you might point out that ES6 introduced Class into JavaScript, but that is just a syntatic sugar provided for ease of use. JavaScript do not have any concept of Class just introducing a keyword doesn't change that. Under the hood it is all just objects and constructor functions.

2. [[Prototype]] links

Objects inherit features from another objects but how do they access these features ?
The answer is [[Prototype]] - it is a hidden private property of objects which references other objects. An object's prototype is the object which it descends from or inherits from.

There are generally two ways of creating [[Prototypes]] links

Object.create()
new Operator

2.1 Object.create()

Object.create() takes objects as argument and returns another object which is [[Protype]] linked to the former object.

var obj1 = {
    a : 5,
    name : 'obj1'
};

var obj2 = Object.create(obj1);
obj2.name = 'obj2';

console.log(obj2.a); // 5
console.log(obj2); // { name : 'obj2' } -> doesn't have 'a' property

In the above example, the obj2 was able to access property a even though it does not own the property. This is because obj2 is [[Prototype]] linked to obj1.

Let us now see what the last line prints in the console. If you look closely you will see it has a dropdown arrow besides it. Using it we will inspect the obj2 object.

In the above image you can see [[Prototype]] linkage of obj2. Also notice that the obj1 object is [[Prototype]] which points at the native Object() contructor. It contains all the default function provided to objects which can be accessed via the prototypal inheritance.
Can we create objects which are not linked to the native Object() contructor?
The answer is 'YES' by passing 'null' to Object.create(). This object is usually called dictionary. Below I have just written JavaScript directly in my browser console. Yes, you can do that!.

2.2 new Operator

Every function in JavaScript has data property called prototype. When function is called with new operator this prototype is set as the prototype of the newly created object. Let us demonstrate the working with an example :-

function fun(){
    this.a = 4;
}

var obj = new fun();

console.log(obj);
console.log(fun.prototype);

Here you can see the fun.prototype is same as [[Prototype]] of obj.

3. proto

It is commonly called dunder proto or double under proto. It is a property of Object.prototype which exposes the hidden [[Prototype]] property of an object. It can be used to modify object's [[Prototype]] link.

var obj1 = {
    name : 'obj1'
};

var obj2 = Object.create(obj1);
obj2.name = 'obj2';

console.log(obj2.__proto__===obj1); // true
console.log(obj2.__proto__===Object.prototype); // true

Since, we can manually change the [[Prototype]] links using the __proto__ property, care must be taken so that no cycles are formed.

The use __proto__ property has now depreciated and these properties are used instead :-

var obj1 = {
    name : 'obj1'
};
var obj2 = {
    name : 'obj2'
}

// earlier obj1.__proto__ = obj2
Object.setPrototypeOf(obj1,obj2); 

// earlier obj1.__proto__
console.log( Object.getPrototypeOf(obj1) ); // { name : 'obj2' }

4. '.constructor' Property

Just the name is enough to confuse people, because there are no constructors in JavaScript. In fact there are no classes in JavaScript, so need of the constructor. It can be pretty misleading for example consider the following code :

function fun(){
    this.a = 5;
};

var obj = new fun();

console.log( obj ) // { a : 5 }
console.log(obj.constructor);
// ƒ fun(){
//     this.a = 5;
// }

It seems that the obj was constructed with the help of function fun so it has a property constructor stating that it was constructed by fun.But if you look closely obj doesn't have constructor property.
So, where did it come from?
The answer is fun.prototype, if we inspect the function fun.prototype we would find that it has a property constructor. The object obj was only able to access it because it was [[Prototype]] linked to fun.prototype.

function fun(){
    this.a = 5;
};

var obj = new fun();

console.log(obj.hasOwnProperty('constructor')); // false
console.log(fun.prototype.hasOwnProperty('constructor')); //true

So, what is the problem can't we still find that obj was constructed using the fun function? Yes, that is only true for the mean time until anyone changes [[Prototype]] link, then everything falls apart.

function fun1(){}
function fun2(){}
var obj = new fun1();

console.log( obj.constructor ); // fun1

Object.setPrototypeOf(obj1,fun2.prototype);
console.log(obj.constructor); // fun2 -> it got changed

Therefore, obj.constructor does not point to the function that constructed it. Also remember that the constructor is not a property of object but of the function.

NOTE :- Even if obj.constructor = fun1, 
it is not safe to assume that obj was constructed by fun1

5. Getters and Setters

In JavaScript, accessor properties are methods that get or set the value of an object. For that, we use these two keywords:

get : to define a getter method to get the property value
set : to define a setter method to set the property value

The following are two ways of declaring the getters and setters :-

// FIRST METHOD -> OBJECT LITERAL METHOD
var obj1 = {
    name : "Peter Parker",
    get getName(){
        return this.name;
    },
    set changeName(n){
        this.name = n;
    }
};
console.log(obj1.getName()); 

// SECOND METHOD -> Object.defineProperty();
var obj2 = { name : 'Bruce Wayne' };
Object.defineProperties(obj2,'getName',{
    get : function(){
        return this.name;
    }
});

Object.defineProperty(obj2,'changeName',{
    set : function(n){
        this.name = n
    }
})
console.log(obj2.getName());

6. [[GET]] Operation

When we try to access properties on any object then [[GET]] operation is performed to retrieve the value. When we access the property on object, it firsts checks if the object contains the property or not. If it contains the property then it simply returns the value. If the requested property is not found in the object itself, JavaScript will traverse up the prototype chain until it finds the property or returns undefined if it doesn't exist.

So, where do you think this chain ends?
JavaScript traverses the [[Prototype]] chain until the [[Prototype]] of certain object in chain points at null. For the most cases the last object is Object.prototype but if object is created using Object.create(null) then it's [[Prototype]] points at null.

var obj1 = {
    a : 4
};

var obj2 = Object.create(obj1);
var obj3 = Object.create(obj2);

console.log(obj3.a); // 4 
// obj3 -> obj2 -> obj1 ( property found returns value )

console.log(obj3.b) // undefined
// obj3 -> obj2 -> obj1 -> Object.prototype -> null 
// ( property not found returns undefined )

7. [[PUT]] Operation

[[GET]] operation was easy right, well [[PUT]] operation is where things get really interesting. [[PUT]] operation is performed when we JavaScript encounters assignment to a object property. For eg:- obj.a = 5.

There arises various scenarios :-

1. The object already has the property.

2. The object doesn't have the property but 
 some object in [[Prototype]] chain has the property 
   a. The property is writable false 
   b. The property is writable true
   c. If the setter is present

3. Neither the object nor other object in 
 [[Prototype]] link has property.

Let us resolve all these scenarios one by one :-

1. If the object already has the property

In this case the property would be updated without any further consideration.

var obj1 = {
    name : 'obj1'
};

var obj2 = { name : 'obj2' };
Object.setPrototypeOf(obj1,obj2); // obj2 [[Prototype]] linked to obj1 

obj2.name = 'obj2 changed';

console.log(obj2.name,obj1.name);// 'obj2 changed', 'obj1'
// the name property of obj2 was successfully updated
// without ever changing the value of obj1

2. The object doesn't have the property but some object in [[Prototype]] chain has the property.

This is a tricky scenario because it there are further 3 possibility :-

a. The property is writable false

In this case neither the property would be updated nor new property is added to the object.

var obj1 = {};

Object.defineProperty(obj1,'name',{
    value : 'obj1',
    writable : false
});

var obj2 = Object.create(obj1);
obj2.name = 'obj2';

console.log(obj1.name,obj2.name); // 'obj1', 'obj1`
console.log( obj2.hasOwnProperty('name') ); // 'name' property not added to obj2

// NOTE :- 'name' property was not added to obj1 it 
// was only able to access this property via the [Prototype]] link
// The 'name' property in obj1 remained unchanged

b. The property is writable true

In this case, property would be added to the current object which would shadow the other object.
Shadowing of property :- When an object has property name same as another object higher up in it's [[Prototype]] chain.

var obj1 = {
    name : 'obj1' // by default writable true
};

var obj2 = Object.create(obj1);
obj2.name = 'obj2';

console.log(obj1.name,obj2.name); // 'obj1', 'obj2`
console.log( obj2.hasOwnProperty('name') ); // 'name' property added to obj2

// NOTE :- The obj1 object shadows obj2 
// the value of property in obj1 is not changed

c. Setter is present

In this case, simply the setter is called.

var obj1 = {
    name : 'obj1',
    set changename(n){
        console.log('setter called');
        this.name = n;
    }
};

var obj2 = Object.create(obj1);
obj2.changename = 'obj2'; // setter called

console.log(obj1.name,obj2.name); // obj1, obj2

// NOTE :- Setter is called during the assignment
// the properties in obj1 remains unchanged

d. Neither the object nor other object in [[Prototype]] link has property.

In this case, simply the property is added to current object.

var obj1 = {
    a : 4
};

var obj2 = Object.create(obj1);
obj1.b = 5;

console.log( obj1.hasOwnProperty('b') ); // true
console.log( obj1.b,obj2.b ); // undefined, 5

// NOTE :- Property added to obj2
// obj1.b gives undefined as obj1 doesn't have 'b' property

This post marks the end of this 3 part series where I have tried to explain how objects work in JavaScript. This was a very wonderful experience connecting with new people.

Also, you can connect with me on linkedin and Github

🔥Object in JavaScript : The Only guide that you need

angDecoder — Tue, 04 Jul 2023 17:59:55 +0000

JavaScript's Objects are fundamentally different in how they behave from any object in other Object Oriented language( C++, Java etc ). Some developers skip this part but it is a important part of language that we should be aware of.

1. What is Object in JS
2. Property v/s Method
3. Property Descriptors
4. Writable Descriptors
5. Enumerable Descriptor
6. Immutability
7. Implementing Iterator to traverse Oject

1. What is Object in JS?

The Object is one of JavaScript's data types. It is used to store data in key-value pairs. We can add properties to object using the '.' operator or '.defineProperty()' method. We can use 'delete' operator to remove any property from the objects.

var obj = {};
obj.a = 4;

console.log(obj.a); // 4
delete obj.a;
console.log(obj.a) // undefined :- as property not found

NOTE :- The 'delete' operator only remove the property from object, it doesn't free memory

How do we create a object ?
Objects can be created in one of the following ways :-

Literal Form
Constructed form ( Using the Object() constructor )

// literal form
var obj1 = {
    a : 2,
    b : 3
};

// constructed form
var obj2 = new Object();
obj2.a = 3;
obj2.b = 4;

Built-in Objects.

1. String                5. Function
2. Number                6. Array
3. Boolean               7. RegEx
4. Object                8. Error
5. Date

Above given are actually built-in function constructors which can be used to create objects using 'new' operator.
NOTE :- Functions and Arrays are also objects in JS and 'null' is not a object, rather it is a primitive type in Js.

let arr = [1,2,'text'];
arr.say = 'i am a array ojbect';

function fun(){
    console.log('hello world');
}
fun.say = 'i am a function object';

console.log(arr.say); // i am a array object
console.log(fun.say); // i am a function object

// The only way we could add properties to the function 
// and array was because they were objects

WARNING :- Although, properties can be added to functions and arrays this should be avoided.
Don't rely on 'typeof' operator as it can give wrong results.

let arr = [1,2,'text'];

function fun(){
    console.log('hello world');
}

var b = null;

console.log(typeof arr); // object
console.log(typeof fun); // function insted of object
console.log(typeof b);  // object instead of null

// These mistakes in JS are not fixed as they would 
// break the internet and websites which depend on 
// this functionality might stop working

// to check for null we can use '==='
console.log(b===null); // true

2. Property v/s Methods.

Methods are functions which can be only accessed by the objects. But functions in JS are not owned by any object, they only contain the reference of the function inside of them. So, functions inside objects are merely just another 'property' not 'method'. Generally they can be used interchangeably but always remember there is a slight difference.

var obj = {
    fun : function(){
        console.log('hello world')
    }
};

var newFun = obj.fun; // reference of fun is passed
newFun(); // hello world
// 'fun' function is called without the need of 'obj' object

3. Property Descriptors

As the name suggests, it give description of object's property. There are 4 basic properties :

value : value of the property
writable : if the value can be changed
enumerable : if the property is visible for iteration (loops).
configurable : if the description can be changed

writable,enumerable and configurable are boolean value.

NOTE :- (configurable : false) prevents delete operator from removing the property from object.

var obj = {};

// used to add property to a object
Object.defineProperty(obj,'a',{ // -> only string value of key is passed
    value : 2,
    enumerable : true,
    configurable : true,
    writable : true
});
console.log(obj.a); // 2 

// used to get the description of property
console.log(Object.getOwnPropertyDescriptor(obj,'a'));

4. Writable Descriptor

Writable descriptor is a boolean value which tells us if the value can be changed or not.
NOTE :- Even when writable is false Ojbect.defineProperty() can change the value of property but '.' operator can't.

var obj = { a : 2 };

Object.defineProperty(obj,'a',{
    writable : false,
});
obj.a = 8;
console.log(obj.a); 
// 2 -> value not changed by '.operator'

Object.defineProperty(obj,'a',{
    value : 5,
});

console.log(obj.a); 
// 5 -> value changed by Ojbect.defineProperty

5. Enumerable Descriptor

Enumerable Descriptor is a boolean value which tell if the property should be visible during iteration.

Setting the enumerable descriptor to false, prevents the property from being accessed during iteration but can be accessed using the '.' operator.

var obj = {
    a : 2,
    b : 3,
    c : 4
};

Object.defineProperty(obj,'a',{
    enumerable : false,
});

// This loop doesn't iterate over 'a'
for (const key in obj) {
    console.log(`key : ${key} value : ${ obj[key] }`);
}
// Object.keys() returns array of keys
// it also doesn't iterate over 'a'
console.log(obj); // [ 'b','c' ]

// although it can be accessed using '.' operator
console.log(obj.a);

6. Immutability

An immutable value is one whose content cannot be changed. This is very useful in JavaScript as this can be used to store state of application. Only when entirely new object is created we say that the state has changed.
We can only implement shallow component. This means that if the property is an object then its reference would be immutable not it's content.

There are 4 levels of immutability in JS :

1-> Object Constant

writable false + configurable false
The property value can't be changed, redifined or deleted

2-> Prevent Extension

New properties can't be added
Setting new property fails silently but in strict mode it throws an error

var obj = { a : 2 };
Object.preventExtension( obj );
obj.b = 4; // throws error in strict mode

3-> Seal

preventExtension() + configurable false
New properties can't be added
Existing properties can't be removed but value can be changed

var obj = {
    a : 2,
    b : 3,
    c : 4
};

Object.seal(obj);
obj.d = 100; // throws error in strict mode 
console.log(obj.d);

4-> Freeze

seal() + writable false
no properties can be added, deleted or removed
existing properties' value can't be changed

var obj = {
    a : 2,
    b : 3,
    c : 4
};
Object.freeze(obj);

7. Implementing iterator

Now, let us apply all that we have learnt by implementing a iterator.
What exactly is iterator?
Iterator is object which is used to traverse a sequence. The sequence could be the properties of object or index of array. It provides us with a function 'next' which when called returns object with two properties :-

value -> value of current index
done -> tells us if we have traversed the whole array Every time 'next' is called it increments the iterator to point at next element in the sequence.

let obj = {
    a : 2,
    b : 4,
    c : 5
}

Object.defineProperty(obj,'my_iterator',{
    writable : false,
    enumerable : false,
    configurable : false,
    value : function(){
        var self = this;
        var idx = 0;
        var ks = Object.keys(self);

        return {
            next : function(){
                return {
                    value : self[ks[idx++]],
                    done : (idx>ks.length)
                }
            }
        }
    }
});

var it = obj['my_iterator']();
console.log(it.next()); // value : 2, done : false
console.log(it.next()); // value : 4, done : false
console.log(it.next()); // value : 5, done : false
console.log(it.next()); // value : undefined, done : true

NOTE :- If you want to overwrite the internal implementation of iterator then use Symbol.iterator as key instead of my_iterator

That is it for this blog. If you liked this blog then please like and share. If I made a mistake in this blog then please comment I would surely get back to it.
I am planning to write more blogs like this, so stay tuned.

'this' keyword in JavaScript

angDecoder — Thu, 29 Jun 2023 16:49:36 +0000

'this' in JavaScript can be very confusing, especially if you already know any Object Oriented Language (like C++ or Java) because 'this' in JavaScript behaves very different.
Let's dive right into it.

1. What is 'this'?
2. What 'this' is not
3. Rules for 'this' - this all makes sense

3.1 Default Binding
3.2 Implicit Binding
3.3 Explicit Binding
3.4 new Binding

4. Rule Precedence
5. Wait there is more - Lexical 'this'

1. What is 'this'?

'this' in JavaScript is a special keyword which refers to a object and gets automatically generated in the scope of the function.

It is a runtime binding and it depends on the call site( where the function was invoked from ).

var obj = {
    name : "Superman",
    printName : function(){
        console.log(`My name is ${this.name}.`)
    }
};

obj.printName(); // My name is Superman

Simple, isn't it? Well, not so fast. Check out this code.

var obj1 = {
    name : "Superman",
    printName : function(){
        console.log(`My name is ${this.name}.`)
    }
};

var obj2 = {
    name : 'Batman'
}

obj1.printName.call(obj2); // My name is Batman.

How is obj2 able to access a property of obj1 and why is this pointing to obj2 ? This post will clear all doubts one by one.

2. What 'this' is not

Before understanding what this actually means, we need to understand what this is not.

i. this does not refer to itself

// program to check how many times function was called
function fun(){
    this.count++;
}

/* We can add property to functions as they are also objects in js*/
fun.count = 0; 

for( var i=0; i<4; i++ )
    fun();

console.log(fun.count) // 0

Here, this keyword inside fun() doesn't not refer to itself, as fun.count is still 0.
Hint : this is pointing to global object. More on this later.

ii. this doesn't refer to function scope.

// this.a inside inner function doesn't
// refer to variable a of outer function
function outer(){
    var a = 4;
    function inner(){
        console.log(this.a);
    }

    return inner;
};

var f = fun1();
f(); // undefined

Hint : Again, this is pointing to global object
Does it mean that this always points at global object ?
The answer is NO, it was just a coincidence.

3. Rules for 'this' - this all makes sense

Now, we are about to dive deep into rules which define how this is binded to objects. There are 4 basic rules :-

3.1 DEFAULT BINDING

By default this is binded to global object. If none of the other rules apply.

var a = 'global';

function fun(){
    var a = 'local';
    console.log(this.a);
};

fun(); // global

In strict-mode global object is not available for default binding. So, this.a would result in TypeError.

var a = 'global';

function fun(){
    "use strict"
    var a = 'local';
    console.log(this.a);
};

fun(); 
// uncaught TypeError: Cannot read properties of undefined (reading 'a')

3.2 IMPLICIT BINDING

In implicit binding 'this' is binded to context object. Context Object is the object which contains the reference for the function called. It is also sometimes called owning or containing object.

Note :- Although the name suggests that the function is owned by the owning object(context object) it only contains the reference of the function. A function is never owned by any object.

var name = 'global';

function fun(){
    console.log(this.name);
}

var myObj = {
    name : 'myObj',
    fun : fun
}

fun(); // global -> due to default binding
myObj.fun() // myObj -> due to implicit binding

// here myObj is context object for function fun.

Some pitfalls in implicit binding.

a. Passing a reference

var name = 'global';

function fun(){
    console.log(this.name);
}

var myObj = {
    name : 'myObj',
    fun
}

var f = myObj.fun; // only reference of fun is passed
f(); // global 
// actual call to fun is made without context object

// Remember object do not own a function

b. Only last/top level object property reference matters

var name = 'global';

function fun(){
    console.log(this.name)
}

var obj1 = {
    name : 'obj1',
    fun
}

var obj2 = {
    name : 'obj2',
    obj1,
    fun
}

obj2.obj1.fun() // obj1

3.3 EXPLICIT BINDING

In this type of binding, we explicitly define which object this should bind to. This can be done with the help of .bind(), .call() or .apply().

.call() -> It is used to change the value of this inside a function and execute it with the arguments provided.
.apply() -> It works just like .call() but takes arguments in a array.
.bind() -> It takes object as first argument, rest of the arguments are used as default argument for the function.

Below code shows how these functions work.

function introduce(city){
    console.log(`Hi, my name is ${this.name}. I live in ${city}. `)
}

var hero = {
    name : 'Spiderman'
}

introduce.call(hero,'New York');
introduce.apply(hero,['New York']);
// .call() and .apply() are immediately executed

var intro = introduce.bind(hero,'New York');
intro();
// new function (intro) is created with 'this' binded 
// to hero object. This function can be later executed.

Hard Binding - Variation of Explicit binding
Binding using .bind() is called hard binding.Code to implement our own .bind() function .

function myBind(f,obj){
    return function(...args){
        f.apply(obj,args);
    }
};
// f -> function to be binded
// obj -> object 'this' should refer to

3.4 new BINDING

This type of binding is done with the help of new operator. Before we move forward let us make some things clear :-

There are no class in JS, only objects. The class introduced in ES6 gives us false belief but under the hood they are all just functions and objects.
There are no contructors in JS, they are not attached to any class.
When functions are called with new operator in-front of them, then new object is created. It is called constructor call. Functions themselves are not constructors.

When functions are called with new operator then following things happen :

a. A new object is created out of thin air.
b. Newly created object is [[Prototype]]-linked to function.

More on [[Prototype]] will be discussed in some other blog.

c. Newly created object is set as 'this' for the function call.
d. Function automatically returns a newly constructed object ( unless the function itself returns a object itself ).

function fun(name,age){
    this.name = name;
    this.age = age;
    this.introduce = function(){
        console.log(`My name is ${this.name}. I am ${this.age} years old.`);
    }
};

var obj = new fun('Peter Parker',22);
obj.introduce();

4. Rule Precedence

i. Explicit Binding ( my own implementation myBind() )
ii. new Binding
iii. Explicit Binding ( internal implementation )
iv. Implicit Binding
v. Default Binding

Note :- If null or undefined is passed as a 'this' binding parameter to call, bind or apply then default binding applies.

5. Wait there is more - Lexical 'this'

With the ES6, arrow functions were introduced which behaves differently than normal functions for this binding.

The arrow functions adopt the this binding from enclosing scope.

function outer(){
    var inner = ()=>{
        console.log(this.name);
    }

    return inner;
}

var myObj = {
    name : 'myObj'
}

var inner = outer.apply(myObj);
inner(); // myObj

Arrow functions are useful when using callbacks to keep track of 'this'.

var name = 'global';

var obj = {
    name : 'obj'
}

function exec(){
    setTimeout(() => {
        console.log(this.name)
    }, 1000);
};

exec.call(obj); // obj -> after 1000ms
/* 
Normal function as callback would 
print global after 1000ms as 'this' would
refer to global object
*/

In pre ES6 era, closure were used to keep track of this.

var name = 'global';

var obj = {
    name : 'obj'
}

function exec(){
    var self = this;
    setTimeout(function(){
        console.log(self.name)
    }, 1000);
};

exec.call(obj);

That is it for this blog. If you learned something from this blog then please like and share. If I made a mistake in this blog then please comment I would surely get back to it.
I am planning to write more blogs like this, so stay tuned.
Also, connect with me on linkedin

DEV Community: angDecoder

CHAPTER 1 : Reliable, Scalable, and Maintainable Applications

1. Fundamentals of Data-Intensive Applications

1.1. Reliability

1.2. Scalability

1.3. Maintainability

2. Reliability

2.1. Hardware Faults

2.2. Software Errors

2.3. Human Errors

3. Scalability

3.1. Describing Load

3.1.1. Case Study: Twitter's Operations and Scaling Challenges

3.2. Describing Performance

3.2.1. Using Percentiles for Response Times

4. Maintainability

Closures In Javascript

1. What is Closure?

2. Modular Design Pattern

3. Currying in JavaScript

a. Currying with recursion

b. Currying with .bind() method

4. Data Hiding and Encapsulation

5. Disadvantages of Closures

JavaScript : Execution Context and Hoisting

Table Of Content

1. Intro

2. Execution Context

i. Variable Environment

ii. Thread of Execution.

3. Hoisting in JavaScript

4. Scope, Scope chain and Lexical Environment

Demystifying Buffers in Node.js

Table of Contents

1. What is Buffer?

2. What is Character Encoding?

3. Buffer in Node.js

🔥Mastering Event Emitters in Node.js

Table of content

1. Intro

2. What is Event Emitter?

3. Why Event Emitters are required?

4. Some additional functionalities .

5. Error handling

6. Custom Event Emitter

✅ JavaScript Inheritance without classes

Table Of Contents

1. What is Prototype?

2. [[Prototype]] links

2.1 Object.create()

2.2 new Operator

3. __proto__

4. '.constructor' Property

5. Getters and Setters

6. [[GET]] Operation

7. [[PUT]] Operation

1. If the object already has the property

2. The object doesn't have the property but some object in [[Prototype]] chain has the property.

a. The property is writable false

b. The property is writable true

c. Setter is present

d. Neither the object nor other object in [[Prototype]] link has property.

🔥Object in JavaScript : The Only guide that you need

Table Of Contents

1. What is Object in JS?

2. Property v/s Methods.

3. Property Descriptors

4. Writable Descriptor

5. Enumerable Descriptor

6. Immutability

7. Implementing iterator

'this' keyword in JavaScript

Table of Contents

1. What is 'this'?

2. What 'this' is not

i. this does not refer to itself

ii. this doesn't refer to function scope.

3. Rules for 'this' - this all makes sense

3.1 DEFAULT BINDING

3.2 IMPLICIT BINDING

3. proto