cft

Learn these awesome Javascript concepts.

In this post I will be showing some cool things in javascript.


user

Abhishek Raj

3 years ago | 2 min read

Introduction

You must have seeing people abusing and hating JS, because they compare Javascript with other languages like Java, C++, Go but Javascript is entirely different.

In this post I will be showing some cool things in javascript.

Generator Function ⚡

These are a type of function which can pause and resume its execution.

In simple words, suppose you call this function and you want to pause it execution at a certain state/condition and after certain condition you want to again resume its execution, you can do using generator function.

function* numGenerator() {
print("Yielded 1");
yield;

print("Yielded 2");
yield;

print("Yielded 3");
yield;
}

const genInit = numGenerator();

function run() {
genInit.next();
}

In the above example, you can see generator function are created using Asterisk(*) after writing function and when you want to pause its execution use yield and to stop use return, you can even return values using yield.

If you want to resume the execution, execute .run() method of the generator object.

Usages

  1. Iterator
  2. Generating infinite number efficiently

Read More (Ctrl + Click)
Some More (Ctrl + Click)

Async Await vs Generator Function ⏳

  1. Generator Functions and Async Functions can be used to write asynchronous code which can wait.
  2. Generator function always yields an object like {value: any, done: bool} but Async function returns a promise to resolve or can throw an error if doesn't resolves.
  3. Generator function runs till yield and pauses but Async function runs till await and waits there.

Read More

Closure 🤏

Closure is an environment, created inside a function which stores some variables and can be used by another function inside that scope.

function parent(parentName) {
return function child(childName) {
print(parentName + ' ' + childName);
}
}

const child = parent('Bitcoin');

function run() {
child('Dogecoin');
}

In the above example, you can see how the parentName is bind with child function.

Usages

  1. Hiding data inside function.
  2. Maintaining state.

Read More

Currying 🍛

Suppose of you have a function with N arguments, converting it into N function calls with only 1 arguments, is called Currying in Javascript.

function currying(num1) {
return function(num2) {
return function(num3) {
print(num1 * num2 * num3);
}
}
}

function run() {
currying(2)(3)(4);
}

Famous Question: Create a currying function to give sum of N numbers e.g. function(1)(2)(3).....(N) = 1+2+3+...+N

Usage

  1. Used to create Higher Order Function
  2. Memoization
  3. Error handling
  4. Initializing functions

Read More

Higher Order Functions (HOF) 💪

HOF accepts functions as argument and/or returns function with closure.

E.g. Array methods like map, reduce, filter.....etc.

Usage

  1. Binding functions with state

Read More

Call, Apply & Bind 📞

Call, Apply and Bind are JS methods using to bind object with this.

const name = {
firstName: 'Abhishek'
}
function printName(lastName) {
print(this.firstName + ' ' + lastName);
}

function run() {
printName.call(name, 'Call');
printName.apply(name, ['Apply']);
const func = printName.bind(name, 'Bind');
func();
}

In the above example, I have shown how you can use call, apply and bind.

Usage

  1. DRY: Do Not Repeat Code
  2. Debouncing

Upvote


user
Created by

Abhishek Raj


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles