DEV Community: umerjaved178

IIFE - Immediately Invoked Function Expression - JavaScript

umerjaved178 — Sat, 31 Jul 2021 13:10:29 +0000

Topics covered:

Introduction
Why do we use IIFE
Alternative in ES6+

Introduction

It is a function expression that runs as soon as we define it.

(function(){
  console.log("My favorite hero is Captain America")
})()

The first parathesis make it an expression and last parathesis immediately invokes/calls it.

In short, it runs right away

Why do we use IIFE

Most commonly use of IIFE is to avoid declaring variables in global scope

Let's see how

var num = 20;
{
  var num = 10;
  console.log(num);
}
console.log(num);

// console
// 10
// 10

As javascript has function level scope, let's solve this problem by taking advantage of that

var num = 20
(function consoleNum() {
  var num = 10;
  console.log(num);
})();

console.log(num);
// console
// 10
// 20

Alternative in ES6+

In JavaScript ES6+, we can use the powers of let & const to replace IIFE as let & const has block level scope, so we don't pollute global name space.

let num = 20;
{
  let num = 10;
  console.log(num);
}

console.log(num);
// console
// 10
// 20

This is much cleaner and readable.

Function Currying - JavaScript

umerjaved178 — Thu, 29 Jul 2021 22:45:45 +0000

Currying is a technique of writing function having multiple arguments, into sequence of functions with single argument. Thus it keep returning the function until all the fucntions are exhausted, arguments are remembered via Closure.

Don't know about Closure, then ignore it ;)

Let go through this simple example:


// without arguments
let dish = function () {
  return function () {
    console.log("Chicken Curry ;) ");
  };
};

dish()();
// console
// Chicken Curry ;


// with arguments
let dish = function () {
  return function (y) {
    console.log(y);
  };
};

dish()("I had crush on JS");
// console
// I had crush on JS

let multiply = function (x) {
  return function (y) {
    console.log(x*y);
  };
};

dish(2)(3);
// console
// 6

Now a complex example

let employee = 
  name =>
    role =>
      company =>
        name + " is  a " +
        role + " in " +
        company

let output = employee('Jack')('Frontend Engineer')('Google')
console.log(output)
// console
// Jack is  a Frontend Engineer in Google

// we can also write it as 
let person = employee('Jack')
let designation = person('Frontend Engineer')
console.log(designation('Google'))
// console
// Jack is  a Frontend Engineer in Google

Benefits

It will make out function look sleek when it has multiple arguments
I avoids the frequent calling of a function with the same argument, Let's see how

We have a function to calculate the volume of a cylinder
It happens that all the cylinders in your house are of height 100m.

function volume(l, w, h) {
    return l * w * h;
}

volume(200,30,100); // 600,000l
volume(32,45,100); //144000l
volume(2322,232,100); // 53870400l

We are repeatedly using the same height in all 3 invocations.
Let's solve this using currying

function volume(h) {
    return (w) => {
        return (l) => {
            return l * w * h
        }
    }
}

const hCylinderHeight = volume(100);

hCylinderHeight(200)(30); // 600,000l
hCylinderHeight(32)(45);   //144000l
hCylinderHeight(2322)(232); // 53,870,400l

call, apply and bind methods JavaScript

umerjaved178 — Tue, 27 Jul 2021 19:47:54 +0000

Let's consider an object having a few properties and a method as below

const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
  getInfo: function () {
    console.log(this.first + " " + this.last + "is" + this.role);
  },
};

console.log(person1);

It consoles to

JavaScript attaches some behind the scenes things to objects.
Here with the getInfo, JS has attached certain methods including call, apply and bind.

Let's dig deep into them

Consider another object

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

What if we want to use getInfo method on person2, rather than copying it, we can borrow it from person1 object (function borrowing)

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

// function borrowing
person1.getInfo.call(person2)

// console
// taylor swift is singer

In the function borrowing, this points to the object passed within parathesis.

But generally, if method is to be used in multiple objects, we keep this outside the objects

const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
};

const getInfo = function () {
    console.log(this.first + " " + this.last + "is" + this.role);
}

getInfo.call(person1)

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

getInfo.call(person2)

// console
// will smith is actor
// taylor swift is singer

side example,what if getInfo has its own arguments. Then this keyword points to first argument

const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
};

const getInfo = function (place) {
    console.log(this.first + " " + this.last + "is" + this.role + " from " + place);
}

getInfo.call(person1, "mars")

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

getInfo.call(person2, "earth")

// console
// will smith is actor from mars
// taylor swift is singer from earth

Moving towards apply method
Only difference between call & apply method is the way, we pass additional parameters to the method, for the above example, apply will work like this

getInfo.apply(person1, ["mars"])
getInfo.apply(person2, ["earth"])

Now bind method

bind & call methods are also similar, bind method instead of invoking/calling it, it returns the copy of the method, which can be invoked later, let's see the example

let info1 = getInfo.bind(person1, "mars")
info()

//or

getInfo.bind(person1, "mars")()

// console
// will smith is actor from mars

We call the above behaviour as function currying, more about this in the coming blog -- stay tuned

Polyfills for .forEach(), .map(), .filter(), .reduce() in JavaScript

umerjaved178 — Mon, 26 Jul 2021 23:11:20 +0000

A piece of code that provide native support to the older browsers who does not have the support of modern functionalities of javascript is known as polyfill.

forEach

The forEach() executes the callback function on each element of array.

const names = ["ali", "hamza", "jack"];
function consoleFunc(x) {
   console.log(x);
}
names.forEach(consoleFunc);

// console
// ali hamza jack

Let's make its polyfill

Array.prototype.ourForEach = function (callBack) {
  for (let i = 0; i < this.length; i++) {
    callBack(this[i]);
  }
};
names.ourForEach(consoleFunc);

// console
// ali hamza jack

Array.prototype let use run our function on every array
this corresponds to the array

map

.map() is very much similar to .forEach() method, except, instead of returning items out of the array, it return the array itself

const users = [1, 2, 3, 4, 5];
function double(x) {
  return x + x;
}
const newUsers = users.map(double);
// console
// [1, 4, 9, 8, 10]

Let's make its polyfill

const users = [1, 2, 3, 4, 5];
Array.prototype.ourMap = function (callBack) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    newArray.push(callBack(this[i]));
  }
  return newArray;
};
console.log(users.ourMap(double));

// console
// [1, 4, 9, 8, 10]

filter

.filter() decide what kind of items do we want in the resulting array.

const logicAlbums = [
  {
    name: "Bobby Tarantino",
    rating: 5,
  },
  { name: "The Incredible True Story", rating: 4.5 },
  {
    name: "Supermarket",
    rating: 4.9,
  },
  {
    name: "Neon",
    rating: 4.2,
  },
  { name: "Under Pressure", rating: 5 },
];

function greaterThan(x) {
  return x.rating > 4.5;
}

const filtered = logicAlbums.filter(greaterThan);
console.log(filtered)

// console
// [ 
// {name: "Bobby Tarantino", rating: 5},
// {name: "Supermarket", rating: 4.9},
// {name: "Under Pressure", rating: 5}
// ]

Let's make its polyfill

Array.prototype.ourFilter = function (callBack) {
  let output = [];
  for (let i = 0; i < this.length; i++) {
    if (callBack(this[i])) {
      output.push(this[i]);
    }
  }
  return output;
};

console.log(logicAlbums.ourFilter(greaterThan));
// console
// [ 
// {name: "Bobby Tarantino", rating: 5},
// {name: "Supermarket", rating: 4.9},
// {name: "Under Pressure", rating: 5}
// ]

reduce

reduce() function is used to reduce the array to a single value.

not the exact definition, but we will consider this for sake of simplicity

const numbers = [1, 2, 3, 4, 5, 6];

function additionFunction(accumulator, current) {
  accumulator = accumulator + current;
  return accumulator;
}

const sum = numbers.reduce(additionFunction, 0);

console.log(sum);

// console
// 21

Let's make its polyfill

Array.prototype.ourReduce = function (callback, initialValue) {
  var accumulator = initialValue === undefined ? undefined : initialValue;

  for (var i = 0; i < this.length; i++) {
    if (accumulator !== undefined) {
      accumulator = callback.call(undefined, accumulator, this[i], i, this);
    } else {
      accumulator = this[i];
    }
  }
  return accumulator;
};

console.log(numbers.ourReduce(additionFunction));

// console
// 21

Method Chaining - JavaScript

umerjaved178 — Thu, 15 Jul 2021 18:33:46 +0000

Chaining Method (also known as Cascading), means repeatedly calling one method after another on an object, in one continuous line of code eventually reducing the redundancy. (Skyrocketing the code quality 🚀)

If you don’t know jQuery then ignore the next line 😉

You will also understand the concept of functional training in jQuery And how we mimic the same behaviour in Javascript

Let's get started

class User {
  constructor(username) {
    this.username = username;
    this.score = 0;
  }
  login() {
    console.log(this.username, "has logged in");
  }
  logout() {
    console.log(this.username, "has logged out");
  }
  updateScore() {
    this.score++;
    console.log(this.username, "score is now", this.score);
  }
}

let noemi = new User("Noemi");
let jack = new User("Jack");

// Run it in Browser

noemi.login() 
// "noemi has logged in"
// undefined

noemi.updateScore() 
// "noemi score is now 1"
// undefined

We also get the undefined because our methods are not returning any value.

Let's chain it now

noemi.login().updateScore()

//console
//Noemi has logged in
//Uncaught TypeError: Cannot read property 'updateScore' 
//of undefined
//    at <anonymous>:1:14

Why chaining is not working?
The reason is, methods run on the instance of object, as our methods are returning undefined, no instance is available for updateScore() to run on
*Solution: *
Simply, return instance of the object from methods, as we all know it is store in this

Updated code is

class User {
  constructor(username) {
    this.username = username;
    this.score = 0;
  }
  login() {
    console.log(this.username, "has logged in");
    return this; //new
  }
  logout() {
    console.log(this.username, "has logged out");
    return this; //new
  }
  updateScore() {
    this.score++;
    console.log(this.username, "score is now", this.score);
    return this; //new
  }
}

let noemi = new User("Noemi");
let jack = new User("Jack");

// Run it in Browser

noemi.login() 
// "noemi has logged in"

noemi.updateScore() 
// "noemi score is now 1"

Let's chain it again

noemi.login().updateScore()

//console
//Noemi has logged in
//Noemi score is now 1

noemi.login().updateScore().logout() //chain as many methods as you want

Conclusion:

You can also chain methods using objects, do you guys want that implmentation too?

Optional Chaining Operator (?.) - JavaScript

umerjaved178 — Tue, 13 Jul 2021 18:53:17 +0000

Topics covered:

1- Intro

2- Optional Chaining with Functions

3- Optional Chaining with Expressions

4- Optional Chaining with Arrays

5- With Nullish Operator

1- Intro

Optional chaining operator ?. loves you to read the value of within objects / nested objects with safety.

?. is similar to . except if the property in a object does not exist while accessing, it will return undefined instead of error/ breaking the program. This means you can explore The object with the carefree mind whether the property exists or not, thus making your code more solid.

const person = {
    name: 'John',
    dog: {
        name: 'toto'
    }
}

const catName = person.cat.name  // error
const catName = person.cat?.name  // error-free line (undefined)

Safety handling with & without Optional Chaining

//without optional chaining 
const catName = person.cat ? person.cat.name : undefined 

//without optional chaining 
const catName = person.cat?.name

Handling safety in deeper objects destroys the code readability

2- Optional Chaining with function call

Wooaahh! You can also call function with the peace of mind while digging in objects

const person = {
    name: 'John',
    vehicle: {
        year: 2012,
        drive(){
            return "I am driving"
        }
    }
}

const catName = person.vehicle?.drive?.()

3- Optional Chaining with property accessors (bracket notation)

Optional chaining operator while accessing the object values using bracket

const person = {
    name: 'John',
    dog: {
        name: 'toto'
    }
}

const catName = person.['dog']?.['name']

4- Optional Chaining with Arrays

You can use optional chaining with array too while accessing its elements

let arrayItem = arr?.[42];

5- With Nullish Operator

You can set the default value instead of returning undefined

const person = {
    name: 'John',
    dog: {
        name: 'toto'
    }
}

const catName = person.cat?.name  ?? 'Maani'
console.log(catName) //Maani

map - Higher Order Function in JavaScript - in Depth

umerjaved178 — Sun, 11 Jul 2021 19:44:27 +0000

Topics covered:

1- Basic implementation with example

2- Parameters: element, index, array, this

3- when we shouldn't use map()

4- trick ;)

1- Basic implementation with example

In modern JavaScript, we have a very powerful method which is map.

Map method runs/loops on an array (not on object) and runs a function on each element of the array, the returned value of that function becomes the new element of the new array.

Confused? don't worry, I will cover every detail and make you comfortable with map function

let's get started.

const drugs = ["facebook", "whatsapp", "instagram"]

// map
const newDrugs = drugs.map(function(value){
    return "the " + value;
})

//console newDrugs
["the facebook", "the whatsapp", "the instagram"]

map has taken every element of the array drugs and ran function on it, returned value of the function (with "the ") has become the new value of the new array

Arrow function makes it a bit more clean

// map
const newDrugs = drugs.map(value => "the ")

2- Parameters: element, index, array, this

Element:

It is the each single element of array

const newDrugs = drugs.map(function(element){
    return "the " + element;
})

Index

It is the index of each single element of array

const newDrugs = drugs.map(function(element, index){
    console.log(index)  //console 0, 1, 2
    return "the " + element;
})

Array:

It is the initial array (drugs) which we are mapping

const newDrugs = drugs.map(function(element, index, array){
    console.log(index)  
    console.log(array)  //console every time ["facebook", "whatsapp", "instagram"]
    return "the " + element;
})

this:

We can set the value of our own 'this' inside map ;). Let me show you how.
Define the new object as below

const newDrugs = drugs.map(function(element){
    return "the " + element + " by " + this.ceo;
}, {
ceo: 'mark zuckerburg',
})

//console
["the facebook by  mark zuckerburg", "the whatsapp by  mark zuckerburg", "the instagram by  mark zuckerburg"]

3- when we shouldn't use map()

map() builds the new array and return it, when you don't want returned array, use forEach or for...of

4- trick

We can reformat the array of objects using map

const ourArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}]
let reformattedArray = ourArray.map(x => {
   let newObj = {}
   newObj[x.key] = x.value
   return newObj
})

// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],

DEV Community: umerjaved178

IIFE - Immediately Invoked Function Expression - JavaScript

Introduction

Why do we use IIFE

Alternative in ES6+

Function Currying - JavaScript

Benefits

call, apply and bind methods JavaScript

Polyfills for .forEach(), .map(), .filter(), .reduce() in JavaScript

forEach

map

filter

reduce

Method Chaining - JavaScript

Conclusion:

Optional Chaining Operator (?.) - JavaScript

1- Intro

2- Optional Chaining with Functions

3- Optional Chaining with Expressions

4- Optional Chaining with Arrays

5- With Nullish Operator

1- Intro

Safety handling with & without Optional Chaining

2- Optional Chaining with function call

3- Optional Chaining with property accessors (bracket notation)

4- Optional Chaining with Arrays

5- With Nullish Operator

map - Higher Order Function in JavaScript - in Depth

Topics covered:

1- Basic implementation with example

2- Parameters: element, index, array, this

3- when we shouldn't use map()

4- trick ;)

1- Basic implementation with example

2- Parameters: element, index, array, this

Element:

Index

Array:

this:

3- when we shouldn't use map()

4- trick

End

any confusion regarding the above mentioned concepts?