DEV Community: Bishnu Prasad Chowdhury

Memoization in JavaScript

Bishnu Prasad Chowdhury — Wed, 17 Mar 2021 16:37:40 +0000

Memoization is a process by which a recursive function call can be improved more like creating an index for already computed values.

Before doing a costly function call where it computes some value an index function is called where all previous outputs of the function are stored. If the required calculation is already present in the existing index it returns the result instead of wasting the resource to calculate the result again.

It is kind of an optimization using which we can save resources and time to compute.

This is achievable because of closure in JavaScript, we can return the indexed result instead of calculated result using an inner function.

// A simple function

var a = (x) => (x * 2)
a(2);
>4

// Now let's memoize the func

var mem_a = () => {
    var index = {};
    return (x) => {
        if( x in index){
            return index[x];
        } else {
            var b = x *2;
            index[x] = b;
            return b;
        }
     }
}

var c = mem_a();
// Does calculation
console.log(c(5));
> 10
// Uses memoization
console.log(c(5));
> 10

It stores result in memory so we should avoid it for function which are called frequently and also we should not index the errors thrown by the calculation if any.

So to sum it up this is like wasting memory to reduce execution time of an expensive function.

Currying in JavaScript

Bishnu Prasad Chowdhury — Thu, 11 Mar 2021 16:44:08 +0000

In JavaScript a function with multiple arguments can be broken into a series of interconnected functions where each function returns a new arrow function that accepts a single argument. It goes on until the arguments are finished so a 3 argument function can have a function inside it returning another function taking up one argument each.

Currying can be achieved with only those function that accepts multiple argument else not.

A normal function would look like below

function sum(x,y,z){
  return x+y+z;
}

sum(2,3,4)
>9

Now let's see how the same function would look like while curried

function sum(x){
  return (y) => {
    return (z) => {
      return x+y+z;
    }
  }
}

sum(2)(3)(4)
> 9

The last function that is returned has access to the outer function scope (closure feature) hence it can easily get the values of x and y and return the sum with z.

Currying is useful in those scenarios where a function accepts multiple arguments where one or two argument are constant on every function call i.e their value stays the same. In that scenario we can use currying and reduce the effort of passing the constant argument in each function call.

Suppose a function fx is having a formula x + y + z + c where c is constant say €25 for every function call but the other values changes everytime. Then we can write like below:

function fx(x){
  return (y) => {
    return (z) => {
      return (c) => {
        return x+y+z+c;
      }
    }
  }
}

const simplifyFX = fx(25);
simplifyFX(1)(2)(3)
>31

We can use lodash library to curry function on the fly.

var a = function (x,y,z){
  return x+y*z;
}

var curryMe = _.curry(a);
var net =  curryMe(5);

net(2,3);
>11
net(2)(2);
>9
net(2,3,4)
>11

We can also achieve currying using bind on the above function.

var net2 = a.bind(this, 5)
net2(2,3)
>11

Constructor functions in JavaScript

Bishnu Prasad Chowdhury — Sat, 06 Mar 2021 08:07:05 +0000

Constructor functions are regular functions in JavaScript that can be used to create objects that have similar methods and properties.

In a normal scenario, we would use object literals to create objects with certain characteristics like below:

var Image = {
    URL: "https://www.domain.com/image.jpg",
    height: 400,
    width: 400
};

Image.URL
>"https://www.domain.com/image.jpg"
Image.height
>400
Image.width
>400

But when we have to deal with multiple objects with similar characteristics, then we can use the constructor function to declare a characteristic and then reuse it by creating objects of that function again and again.

So in a constructor function, we declare the properties with "this" keyword and we create an object of the function with the "new" keyword like below and we have to pass the arguments to the function which is to be used during object creation:

var Image = function(URL, width, height) {
    this.URL = URL; 
    this.width = width;
    this.height = height;
};

var img1 = new Image ("https://www.domain.com/img1", 400, 600);
var img2 = new Image ("https://www.domain.com/img2", 500, 500);

img1.URL
>"https://www.domain.com/img1"

img1.height
>600

img2. width
>500

Unlike normal functions, constructor functions are named with their first letter in uppercase.

We can also set a new property of the constructor function separately using the prototype object where all the objects created from the constructor function can make use of it.
Suppose we want to add a new property opacity to the Image function without disturbing the main code, we should do like below:

var Image = function(URL, width, height) {
    this.URL = URL; 
    this.width = width;
    this.height = height;
};

var img1 = new Image ("https://www.domain.com/img1", 500, 500);
var img2 = new Image ("https://www.domain.com/img2", 600, 600);

Image.prototype.opacity = 0;

img1.opacity
>0

img2.opacity
>0

For normal functions, the default return type is of Undefined type, whereas the default return type of Constructor functions is "this" parameter.

function normalFunc() {}
var cf = function ConstructorFunction() {}

var a = new cf ();
var b = normalFunc();

a
>ConstructorFunction {}

b
>undefined

Closures in JavaScript

Bishnu Prasad Chowdhury — Wed, 03 Mar 2021 16:28:43 +0000

In JavaScript we can pack a function inside another function. When one function A is inside another function B then function A is called outer function while function A is called inner function and this phenomenon is called a closure.
In closure the inner function can have access to the outer function scope.

function B() {
  let x = 7;
  function A() {
     console.log(x);
  }
  return A;
}

var c = B();
c();

>7

Closures are used to make private function or variables that has limited access. The outer function of a closure cannot access the inner function scope so it can be used to hide data.

Apart from this use closure do have drawbacks where as long as closure is running memory cannot be garbage collected resulting to memory leaks. This can be avoided by making them null force fully after the use.

Event bubbling in JavaScript

Bishnu Prasad Chowdhury — Thu, 25 Feb 2021 12:38:08 +0000

Event bubbling is an event propagation type which is observed in DOM API.

<div>
  <p>
    <img> </img>
  </p>
</div>

For example suppose all 3 elements have registered to handle an event, then as per bubbling rule the event will be handled from inner to outer that is img element will handle the event first then p and last will be div element.

For general use event bubbling is convenient but some rare cases we need to handle outer event first than inner so in those situation we need to avoid event bubbling.

This is achieved by making useCapture true to the event handler function where by default it's passed as false.

btn.addEventListener('click',action item(),true);

To stop bubbling we can use either

// stops immediately
event.stopImmediatePropagation()

//stops after running current event
event.stopPropagation()

Reusing object properties with call() method in JavaScript

Bishnu Prasad Chowdhury — Mon, 15 Feb 2021 07:39:49 +0000

Suppose we have an object with properties that we want to re-use for a certain new object.

JavaScript provides a call method that we can use to achieve this objective.

//Sample object
var emp = {
   salary_per_day: 10,
   monthlySalary: function(){
   return this.salary_per_day * 30;
   }
};

//call the function 
emp.monthlySalary();
> 300

We can use the call method here on the new object to use the method of the existing object.

var emp = {
   salary_per_day: 10,
   monthlySalary: function(){
   return this.salary_per_day * 30;
   }
};


var emp2 = {salary_per_day: 50};

emp.monthlySalary.call(emp2);
> 1500

Like this. call function can be utilized to reuse the property of another function.

Difference between Object.freeze and Object.seal in JavaScript

Bishnu Prasad Chowdhury — Tue, 09 Feb 2021 13:59:57 +0000

There are times when we want our objects to retain their original properties such that the property should be not changeable or editable.

We can change or add property of an object like below

var a = { 
    color: 'red'
};
//Object.freeze(a)

a.value = 10;

>a
[object Object] {
  color: 'red',
  value: 10
}

We can add Object.freeze(a); to the above code to prevent value property to be added to the a object.

Also Object.freeze(a) does not allow the property of an object to be changed.

var a = {id: 1};
a.id=5;
console.log(a);
> 5


var b = { cost: 100;};
Object.freeze(a);
b.cost= 200
console.log(a);
> 100

>delete b.cost
false

We cannot perform delete operation with an object which is freeze where on using delete it will return false.

Object.seal allows to change an existing property unlike Object.freeze

var a = { id: 6};
Object.seal(a);
a.cost=500;
a.id=10;

>a
[object Object]{
   id:10
}

>delete a.id
false

So now if we want to allow delete to work on the object we can use Object.preventExtensions() instead of Object.seal()

So the below is the observation on using prevent extension

var a = {id: 6};
Object.preventExtensions(a);
a.id=9;
a.cost=100;

>a
[object Object]{
   id: 9
}

> delete a.id
true

> a
[object Object] {...}

There is another way for freezing a property instead of the whole object with Object.freeze.

Suppose we want to freeze id of an object a only rather than the whole object, we can use it like below

var a = { id : 5, cost : 100, quantity: 50};

Object.defineProperty( a, 'id', { writable: false, value:5});

a.id = 10;
a.quantity=10
a.cost= 60

>a
[object Object]{
   id:5,
   cost:60,
   quantity: 10
}

Difference between undefined and null in JavaScript

Bishnu Prasad Chowdhury — Thu, 04 Feb 2021 14:32:12 +0000

Undefined is set by javascript automatically when a value of a variable is defined but value is not set or not declared at all.

Null is an empty object which is set by the programmer to reset a value of a variable.

If undefined is passed to a function as argument it does not over write the default value where as null does. If function parameter is not passed it is undefined.

let a = {};
> undefined

let b = function (a=true){console.log(a);}

b(null);
> null

b(undefined);
> true

function c(a,b){ console.log(a,b);}
c(null, 5);
> 5

Null is an empty object type and undefined is of type undefined.

typeof(undefined);
> undefined

typeof(null);
> object

Null means nothing and undefined means not defined hence both can mean false.

null == undefined;
> true

null === undefined;
> false

Undefined is not valid in JSON but null is valid.

Adding undefined with a number result to NaN where as null gives the same number.

let a = 5 + undefined
a
> NaN

let b = 6 + null
b
> 6

Finally both null and undefined usage should be avoided. We do have optional chaining that can help avoid using null.

Type Conversion in JavaScript wrt boolean, undefined, and null

Bishnu Prasad Chowdhury — Sat, 30 Jan 2021 04:12:19 +0000

We can convert to a string type using the String class

let a = 5;
typeof(a);
> "number"
typeof(String(a));
> "string"

let b = true;
String(b);
> "true"

let c = undefined;
String(c);
> "undefined"

let d = null;
String(d);
> "null"

Similarly, to convert to a number we can use the Number class


let a = "5" ;
typeof(a);
> "string"
typeof(Number(a));
> "number"

let b = true;
Number(b);
> 1

let c = undefined;
Number(c);
> NaN

let d = null;
Number(d);
> 0

//when an operator is there it auto converts
// to number unless its a + operator


let e = "6" / "2";  
e
>3

let e = "6" + "2";
e
>62

Converting to Boolean uses Boolean class like String and Number.


let a = "5" ;
typeof(a);
> "string"
typeof(Boolean(a));
> "boolean"

let b = true;
Boolean(b);
> true

let c = undefined;
Boolean(c);
> false

let d = null;
Boolean(d);
> false

Javascript prototype and prototypal inheritance

Bishnu Prasad Chowdhury — Thu, 21 Jan 2021 15:52:46 +0000

When an object/array/ function is created, the javascript engine adds access to hidden properties and method under _ _ proto _ _ object.

function b (){
   console.log("function");
};
let a = {
  id : 1,
  name : "jack",
  showScore: function (){
      console.log(this.id + " :" + this.name);
    }
}
a._ _ proto _ _
Object.prototype

a._ _ proto _ _ . _ _ proto _ _
null

b. _ _ proto _ _
Function.prototype

b. _ _ proto _ _ . _ _ proto _ _
Object.prototype

b. _ _ proto _ _ . _ _ proto _ _ . _ _ proto _ _
null

Hence we can say everything in javascript is an object.

let a = {
  name: "mavy",
  age: 16,
  place: "AU"
  showName: function (){
     console.log(this.name);
   };
};

let b = {
  name: "redis"
};


b. _ _ proto _ _ = a
// Avoid such code

b.name
"redis"

b.age
16

b.showName()
"redis"

Here b is inheriting from a using prototyping inheritance.

We can implement new logic to existing methods of prototype and everytime it will be called it will load that function.

Function.prototype.test =  function (){ console.log(true); }

function a() {};

a.test()
true

Like this, all functions can now have access to the function through prototype.test property.

Javascript : types of functions

Bishnu Prasad Chowdhury — Wed, 20 Jan 2021 18:28:09 +0000

Function statements

// Allows hoisting

function test(){
   console.log("function statements");
};
test();

Function expressions

// Doesnot allow hoisting

var a = function (){
   console.log(function expression);
};
a();

Named function expressions

var a = function test(){
   console.log("named function expressions");
};
a();

Function declaration

function test() {
   console.log("function declaration");
};
test();

Anonymous function

var x = (){
};
x();

First class function

// Ability to pass as argument and return functions as value

var x = function test(abc){
  console.log(abc);
  return function a(){
  };
};
x(function () {};);

Arrow functions

var x = () => console.log("Arrow functions");

Generator functions

function* square(a){
   for(let x=a;; x*=a){ 
      yield x;
      }
};

for(let z of square(2)){
    console.log(z);
}

new Function

// Allows to convert string to function useful to handle server return codes.

var a = new Function ('a','b', 'return a+b');
console.log( sum(3,6));

Javascript not defined vs undefined

Bishnu Prasad Chowdhury — Tue, 19 Jan 2021 16:41:05 +0000

undefined example:

console.log(a) 
// memory reserved for a
var a = 5;
console.log(a)

Output:
undefined
5

Not defined example:

console.log(b)
// No memory is reserved

Output:

Uncaught reference error: b is not defined