Learn these awesome Javascript concepts.

Publish Date: Aug 2 '21

389 40

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.

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

Iterator
Generating infinite number efficiently

Async Await vs Generator Function ⏳

Generator Functions and Async Functions can be used to write asynchronous code which can wait.
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.
Generator function runs till yield and pauses but Async function runs till await and waits there.

Closure 🤏

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

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

Usages

Hiding data inside function.
Maintaining state.

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.

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

Usage

Used to create Higher Order Function
Memoization
Error handling
Initializing functions

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

Binding functions with state

Call, Apply & Bind 📞

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

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

Usage

DRY: Do Not Repeat Code
Debouncing

Connect Me @ Linkedin, Github, Twitter, Youtube 😇

Thanks to Akshay Saini for his amazing series on JS.

Comments 40 total

Furkan KAYAAug 2, 2021
Really nice clickbait. 👌
Abhishek RajAug 3, 2021
Thanks for the feedback, renamed the title.
Yes, I avoided arrow function in currying because its quite easy to understand returning functions for beginners.

Almost every thing in JS can be written on our own, it doesn't need to know the original javascript concept.

Cheers
Muhammad HasnainAug 3, 2021
Posts such as these are targeted at beginners. The concepts and alternatives you suggest are not just your own opinions regarding what is good and bad but also makes things unnecessarily complex.

Yes, you're very smart but not everyone has a decade of experience under their belt. Those who have, aren't going to come and read these posts.
- Nikola StojakovićAug 3, 2021
  I fail to see how anything he mentioned makes things unnecessarily complex.
  - Muhammad HasnainAug 3, 2021
    That's the problem with "senior" developers on dev.to. They fail to see things from a beginner's perspective. If you know these concepts then this post isn't for you.
Abhishek RajAug 3, 2021
Comparing Generator function with eval is vague.
I would use generator function instead of creating my own generator object then use it.
Abhishek RajAug 3, 2021
Its an open world, not always everyone has to agree with everyone. We all have our opinion. You are free to share your opinion neither I am hiding any negative comments.

You are also free to report this post.
Nikola StojakovićAug 3, 2021
I'm not a senior developer but medior. Maybe I don't see it well from the beginner perspective - that's what I asked the question and that's why I was expecting a good answer.
- Nikola StojakovićAug 3, 2021
  Honestly I don't see why people find arrow methods so confusing. I find them much clearer and easier to read.
  - Muhammad HasnainAug 3, 2021
    The first example implements an iterator interface along with recursive. The watered down version is cute but multi-level arrow functions and currying, do you think a beginner would find that easy?
    
    I hope you found this answer good enough. If you still don't see how people find this difficult perhaps you could sit down with a beginner or better yet, spend some time teaching JavaScript to someone as their first programming language, as in actually mentor someone.
    
    You'll be very frustrated.
Muhammad HasnainAug 3, 2021
I didn't click on this when its previous title, so, I won't concern myself with that. If we are discussing this, let's not casually ignore the iterator interface and recursion. Currying also causes additional complexity because you're throwing functional programming into the mix.

Regardless of what I say, you'll remain firm in your point of view and speak from your experience as if it is the experience of every new developer. Anyways, I don't want to talk about this further.

I prefer your answers but I have a very grave problem with this attitude where senior developers shove their opinions down other's throat. Even I haven't really studied functional programming, what are the odds that a beginner would've.

Have a good day Luke!
Muhammad HasnainAug 3, 2021
Of course, you're allowed to give feedback. I hope I didn't cause any strife, if I did, I'm sorry. Regarding seniorities, well, that's something we can agree on. Thanks. :)
- Nikola StojakovićAug 3, 2021
  Currying is a hard concept on it's own for beginners. Arrow functions don't make it much harder in my opinion - it's just a different syntax.
  - Muhammad HasnainAug 3, 2021
    ... yeah, whatever.
Paulo SantosAug 3, 2021
Insightful post for beginners! Well done! Some advice: do make sure you use the tag #beginners or at least set the post's expert level down to a lower level since it is showing up in timelines of people that are not so which has caused this mess in the comment section.
- Abhishek RajAug 3, 2021
  Thanks for the feedback, will update it.

mooha1999Aug 3, 2021

In the Closure example
The parameter "childName", where will it get its value from?
I'm new to js and this issue is confusing me

peerreyndersAug 3, 2021

This is one of the weird cases where it is actually easier to show with TypeScript:

// A type of function that takes a 
// `string` argument and returns `undefined`
type ChildFn = (name: string) => void;

// A type of function that takes a
// `string` argument and returns a `ChildFn`
type ParentFn = (name: string) => ChildFn;

// `create` is a function of type `ParentFn`
// i.e. it takes a string argument and returns
// a `ChildFn` function. 
const create: ParentFn = (parentName) => 
  (childName) => print(`${parentName} ${childName}`);

// i.e. `create` returns the function 
// `(childName) => print(`${parentName} ${childName}`)`
// note that `parentName` comes from the closure that 
// created the function.

// The function returned from `create` 
// is bound to `child` and has access 
// to `parentName = 'Bitcoin' 
// through its closure which created it
const child: ChildFn = create('Bitcoin');

// Here we finally supply `childName` 
// so that the full string is logged.
child('Dogecoin');

// ---
function print(...args: any[]): void {
  console.log(...args);
}

So it's at child('Dogecoin'); that we supply childName.

A version that uses function declarations only:

// A type of function that takes a
// `string` argument and returns `undefined`
type ChildFn = (name: string) => void;

// The function value returned from `create`
// is bound to `child` and has access
// to `parentName = 'Bitcoin'
// via the closure that created it
const child: ChildFn = create('Bitcoin');

// Here we finally supply `childName`
// so that the full string is logged.
child('Dogecoin');

// [LOG]: "Bitcoin Dogecoin"

// ---

// `create` is a function that takes
// a `string` argument and returns
// a function of the `ChildFn` type.

function create(parentName: string): ChildFn {
  return childFn;

  // ---
  function childFn(childName: string): void {
    print(`${parentName} ${childName}`);
  }
}

// i.e. `create` returns the `childFn` function
// value which has access to `parentName`
// value via the closure that created it.

function print(...args: any[]): void {
  console.log(...args);
}

I believe it's a bit more difficult to understand.

sakethkAug 3, 2021
I like generators. Redux-Saga library has been developed using generators. I would say generators is not bad way. Its our choice whether to use generators or not
Abhishek RajAug 3, 2021
Cool agreed.
Although my native language is Hindi not English ;)
Oskar CodesAug 3, 2021
Just a quick note, asynchronous functions don’t return a function to resolve, but instead a promise.
Otherwise, this is a great article!
- Abhishek RajAug 3, 2021
  Oh, I missed that here, will update.
  
  Thanks for pointing out :)
Muhammad HasnainAug 3, 2021
Believe it or not, English is my third language language. I'm fluent in Pashto that's spoken in Pakistan and Afghanistan. I can speak Urdu which is like 90% same as Hindi so I can speak Hindi too.

I can read Arabic and understand Punjabi a little but I'm not counting them as language. Spanish is also an interesting language. I was thinking about properly learning 4th.

Not sure if I should learn Mandarina, Spanish or German. It really depends on which country I'll decide to move to. =)
Jakub T. JankiewiczAug 3, 2021
1. HOC is React pattern called Higher Order Components that have nothing to do with Higher Order Functions.
2. I would add interator protocol to the list. This is the API behind generators that make them work. This is also what make for..of loops works with arrays. Because Arrays are iterators.
var iter = [1,2,3][Symbol.iterator](); console.log(iter.next()); // {value: 1, done: false} console.log(iter.next()); // {value: 2, done: false} console.log(iter.next()); // {value: 3, done: false} console.log(iter.next()); // {value: undefined, done: true}
- Abhishek RajAug 4, 2021
  There was a typo, fixed it.
  
  Will add the iterator to this list.
  
  Cheers
DanDev95Aug 4, 2021
Async await returns a promise, not a prototype...
- Abhishek RajAug 4, 2021
  Thanks for the fix.
  Cheers!
АнонимAug 4, 2021
[deleted]
- Abhishek RajAug 4, 2021
  Be my english tutor :)
Sadanand PaiAug 6, 2021
Generator in action with example
github.com/sadanandpai/generators-...
Vikram BhattAug 9, 2021
FYI except for call, apply and bind methods (which are JS features) the rest are realted to functional programming paradigm rather than JS.

Add comment

Abhishek Raj @abhishekraj272