Learn these awesome Javascript concepts.
Tags: javascript, webdev, tutorial, career
Published: 2021-08-02 18:54:51

## 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.

{% codepen https://codepen.io/abhishekraj272/pen/YzVjPrE default-tab=js,result %}

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)](https://code4developers.com/ways-to-use-generator-functions-in-javascript)
[Some More (Ctrl + Click)]
(https://dev.to/rfornal/use-cases-for-javascript-generators-1npc)

### 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](https://towardsdatascience.com/javascript-generator-yield-next-async-await-8442d2c77185)

### Closure 🤏

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

{% codepen https://codepen.io/abhishekraj272/pen/qBmydZo default-tab=js,result %}

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

### 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.

{% codepen https://codepen.io/abhishekraj272/pen/zYwLGZP default-tab=js,result %}

> 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](https://towardsdatascience.com/javascript-currying-vs-partial-application-4db5b2442be8)

### 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](https://blog.alexdevero.com/higher-order-functions-javascript/)

### Call, Apply & Bind 📞

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

{% codepen https://codepen.io/abhishekraj272/pen/rNmrVqJ default-tab=js,result %}

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

#### Usage
1. DRY: Do Not Repeat Code
2. Debouncing

[Read More](https://www.codingame.com/playgrounds/9799/learn-solve-call-apply-and-bind-methods-in-javascript)

Connect Me @ [Linkedin](https://www.linkedin.com/in/abhishekraj272/), [Github](https://github.com/abhishekraj272), [Twitter](https://twitter.com/abhishekraj272), [Youtube](https://www.youtube.com/channel/UCvHn2T8DSJzEWzYDdK3Dt8A) 😇

Thanks to [Akshay Saini](https://www.youtube.com/channel/UC3N9i_KvKZYP4F84FPIzgPQ) for his amazing series on JS.