DEV Community: nouman shah

call(), apply() and bind() methods in Javascript

nouman shah — Sun, 28 Mar 2021 11:30:35 +0000

We know that functions are a special kind of objects in JavaScript. So they have access to some methods and properties. To prove functions are objects, we can do something like this, for example:

function greeting() {
  console.log('Hello World');
}
greeting.lang = 'English';
// Prints 'English'
console.log(greeting.lang);

JavaScript also provides some special methods and properties to every function object. So every function in JavaScript inherits those methods. Call, bind, and apply are some of the methods that every function inherits.

call( )

The call( ) allows for a function/method belonging to one object to be assigned and called for a different object.
Using the call method we can do a function borrowing.
We can borrow a method from some object and use it with the data of some other object.
We can do like following-

let name = {
  firstName: "nouman",
  lastName: "shah",
}

let printFullName = function () {
  console.log(this.firstName + " " + this.lastName)
}
printFullName.call(name)
//nouman shah

let name2 = {
  firstName: "Ali",
  lastName: "khan"
}
printFullName.call(name2)

In call( ), we pass arguments individually.

let printFullName = function (hometown, gender, job) {
  console.log(this.firstName + " " + this.lastName + " " + "from" + " " + hometown + " " + gender + " " + job)
}
printFullName.call(name, "Pakistan", "Male", "Software Engineer")

apply( )

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma-separated values.

printFullName.apply(name,["Pakistan","Male", "Software Engineer"])

bind( )

bind method looks similar to call but instead of directly calling the method, the bind method binds the printFullName with an object and returns a copy of that.

let printMyName=printFullName.bind(name)
printMyName();
// nouman shah

What it will do is that it will create a copy of printFullName and it will bind that with name object and will return a function that can be called later.

The difference between call() and bind() is that the call() does not create a new copy of the function,

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...).

If you have any questions or suggestions please let me know.

JavaScript Promises vs Observables

nouman shah — Wed, 06 Jan 2021 07:51:01 +0000

Asynchronous Programming in JavaScript
There are different ways in JavaScript to create asynchronous code. The most important ones are the following:

Callbacks
Promises
Async/Await
RxJS Observables

Callbacks
This is the old-fashioned classical approach to asynchronous programming. You provide a function as an argument to another function that executes an asynchronous task. When the asynchronous task completes, the executing function calls your callback function.
The main disadvantage of this approach occurs when you have multiple chained asynchronous tasks, which requires you to define callback functions within callback functions within callback functions… This is called callback hell.

function greeting(name) {
  console.log(`Hello ${name}!`);
}

function introduction(firstName, lastName, callback) {
  const fullName = `${firstName} ${lastName}`;

  callback(fullName);
}

introduction('Nouman','shah', greeting); 
//"Hello Nouman shah!"

Promises
Promises have been introduced in ES6 (2015) to allow for more readable asynchronous code than is possible with callbacks.
The main difference between callbacks and promises is that with callbacks you tell the executing function what to do when the asynchronous task completes, whereas with promises the executing function returns a special object to you (the promise) and then you tell the promise what to do when the asynchronous task completes.
Promises have three states:

Pending: This is the initial state of the Promise before an operation begins
Fulfilled: This means the specified operation was completed
Rejected: The operation did not complete; an error value is usually thrown

function getUsers(onSuccess) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Handle resolve and reject in the asynchronous API
      if (onSuccess) {
        resolve([
          {id: 1, name: 'Jerry'},
          {id: 2, name: 'Elaine'},
          {id: 3, name: 'George'},
        ])
      } else {
         reject('Failed to fetch data!')
      }
    }, 1000)
  })
}

// Run the getUsers function with the false flag to trigger an error
getUsers(false)
  .then((response) => {
    console.log(response)
  })
  .catch((error) => {
    console.log(error)
  })

Async/Await
There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use.

Basically, you can declare a function to be async, which allows you to use the await keyword in the body of this function. The await keyword can be put in front of an expression that evaluates to a promise. The await keyword pauses the execution of the async function until the promise is resolved. When this happens, the entire await expression evaluates to the result value of the promise, and then the execution of the async function resumes.
Furthermore, the async function itself returns a promise as well that is resolved when the execution of the function body completes.

function asyncTask(i) {
    return new Promise(resolve => resolve(i + 1));
}
async function runAsyncTasks() {
    const res1 = await asyncTask(0);
    const res2 = await asyncTask(res1);
    const res3 = await asyncTask(res2);
    return "Everything done"
}
runAsyncTasks().then(result => console.log(result));

RxJS Observables
Observables are also like callbacks and promises that are responsible for handling async requests. Observables are a part of the RXJS library that makes use of Observables, making it really easy to write asynchronous code.

There are four stages through which observables pass. They are:

Creation
Subscription
Execution
Destruction

Creation of an observable is done using a create function.

var observable = Rx.Observable.create((observer: any) =>{
})

To make an observable work, we have to subscribe it. This can be done using the subscribe method.

observable.subscribe((data)=>{
   console.log(data);    
})

Execution of observables is what is inside of the create block.

Destruction after an error or a complete notification, the observable is automatically unsubscribed. But there are cases where we have to manually unsubscribe it. To manually do this task, just use:

var subscription = observable.subscribe(x => console.log(x)); // Later: subscription.unsubscribe();

Promises vs observables

Observables are lazy whereas promises are not

Promises are eager: the executor function is called as soon as the promise is created.
Observables are lazy: the subscriber function is only called when a client subscribes to the observable.

Observables handle multiple values unlike promises
Promises can only provide a single value whereas observables can give you multiple values.

Observables are cancelable
You can cancel observables by unsubscribing it using the unsubscribe method whereas promises don’t have such a feature.

forEach(), map(), filter() What's the difference?

nouman shah — Fri, 01 Jan 2021 13:00:26 +0000

The map() method

The map() method loops through each element in array and calls the provided function for each element. This method creates a new array and doesn’t alter the original array.

const numbers = [5, 6, 8, 14, 32];

const updatedNumbers = numbers.map((number) => {
    return number + 10;
});

console.log(updatedNumbers); // [15, 16, 18, 24, 42]

The filter() method

The filter() method in JavaScript creates a new array with the elements that satisfies the provided condition. This method calls a provided function for each element in array and verifies the condition given in the provided function and passes only those elements that satisfy the given condition.

const numbers = [5, 6, 9, 32, 14];

const even = numbers.filter((number) => {
     return number % 2 === 0;
});

console.log(even); // [6, 32, 14]

The forEach() method

forEach() is used to execute the same code on every element in an array but does not change the array and it returns undefined.
Example:
In the example below we would use .forEach() to iterate over an array of food and log that we would want to eat each of them.

let food = ['mango','rice','pepper','pear'];

food.forEach(function(foodItem){ 

console.log('I want to eat '+foodItem);
});

Hope you have got a clear idea about both JavaScript array methods map() filter() and forEach().

Remove duplicates from an array using indexOf() and filter() methods

nouman shah — Fri, 01 Jan 2021 06:42:43 +0000

There are many ways to remove duplicates from array in JavaScript but today I will use indexOf and filter methods!

The indexOf() method returns the index of the first occurrence of an element in an array. For example:

let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B');

Output: 1

To remove the duplicates, you use the filter() method to include only elements whose indexes match their indexOf values:

const arr = ['A', 'B', 'A', 'C', 'B'];
const uniqueArr = arr.filter((c, index) => {
    return arr.indexOf(c) === index;
});
console.log(uniqueArr);

Output: [ 'A', 'B', 'C' ]

To find the duplicate values, you just need to reverse the condition:

const arr = ['A', 'B', 'A', 'C', 'B'];
const uniqueArr = arr.filter((c, index) => {
    return arr.indexOf(c) !== index;
});
console.log(uniqueArr);

Output: [ 'A', 'B' ]