DEV Community: Amit Kumar Singh

Learn Synchronous and Asynchronous Programming in Javascript

Amit Kumar Singh — Wed, 24 May 2023 11:34:30 +0000

Introduction

Hello friends, in this article, we will discuss Synchronous and Asynchronous programming in JavaScript. I know most people would have already heard this term being used in JavaScript.

So just to give you some idea, synchronous is a blocking operation whereas asynchronous is a non-blocking operation, by which I mean in synchronous, another set of operations will be blocked until a particular operation is not completed, but in the case of asynchronous, none of the operations gets blocked. Now let us discuss this in more detail to better understand synchronous and asynchronous programming in JavaScript.

Synchronous Programming in JavaScript
Asynchronous Programming in JavaScript
Difference between Synchronous vs Asynchronous
Conclusion

Synchronous Programming in JavaScript

We all know that JavaScript is an interpreted language, and the code runs line by line. So by default, JavaScript code execution is synchronous, which means the code runs in a particular sequence one by one only after the completion of the program.

In synchronous programming, each statement or program we write in JavaScript is executed one after another, and the program will wait for each operation to be completed before moving on to the next statement.

Now let us understand synchronous programming in JavaScript with a few examples,

function first() {
    console.log(‘I am the first function’);
}
function second() {
    console.log('I am the second function');
    first();
}
second();

In the above example, we have declared two functions, that is first() and second(), and now we are calling the second() function, and this is the output that we receive.

Output

I am the second function
I am the first function

Now if we try to understand the order of execution here by seeing the output is sequential, I mean the output is performed in a particular sequence. It first calls the second() function and prints the output; after that, it calls the first() function and prints the output.

Let us now discuss what is asynchronous programming in JavaScript.

Asynchronous Programming in JavaScript?

So unlike synchronous, asynchronous allows code to run concurrently, so there is no blocking of the execution flow. In asynchronous programming, the tasks are executed in the background while the other tasks continue to execute other statements, so basically, when a task gets completed, a callback function is invoked, and it allows the program to handle the result or to continue with the next statement.

Now you must be wondering what is a callback function. Basically, callback functions are functions that are passed as an argument to a synchronous function. These functions are automatically invoked or executed whenever asynchronous operations are completed.

Let us understand this by an example,

setTimeout(function printMe() {
    console.log("Something is done.");
  }, 2000);

In the above example, we can see we have a setTimeout() function, and it takes a callback function named printMe. This callback function will be executed whenever the operation of setTimeout is completed, so for our case, it will execute after 2 seconds.

Now let us understand the asynchronous operation by a simple example,

console.log('1');
setTimeout(() => console.log('2'), 2000);
console.log('3');

Output

1
3
2

In the above code example, if we see the output of the code, we notice that after printing “1”, “3” is printed out in our console before “2” and this is because of the asynchronous execution of the code here in the code example the setTimeout() function waits for 2 seconds. Parallelly, the next statement gets executed without waiting for the previous statement to complete. This is why we say asynchronous is a nonblocking operation, as it does not block the main execution thread.

Difference between Synchronous vs Asynchronous

Now let us know the difference between synchronous and asynchronous programming.

Synchronous programming

Sequential Execution: In synchronous programming, the code is executed sequentially, which means one by one, so one statement must be completed before moving on to the next statement.

Blocking Nature: The synchronous operation blocks the main execution thread until they are completed.

Simple Control Flow: The synchronous code flows are predictable and straightforward, and it makes it easy to understand the execution order of a program.

Asynchronous programming

Concurrent Execution: In asynchronous programming, the code is executed concurrently even if the current code is running; other codes are allowed to run parallelly even without waiting for the current code to finish.

Non-Blocking Nature: Operations are nonblocking in nature as they don’t block the execution flow of the program. When a particular operation is started, the program can continue to execute other code or the statement, and a callback function, promise, or async/await syntax is required to handle the result or continuation of the operation.

Event-driven Model: Asynchronous programming most often relies on event-driven models, which means functions are invoked or triggered automatically in response to a particular event or whenever the asynchronous operations are completed, and this makes the model responsive

Conclusion

In this article, we have discussed synchronous and asynchronous programming and what are the differences between them, and we can conclude that synchronous programming and asynchronous programming both have their importance depending upon the situation or the task we are involved in if we want to strictly wait for a particular operation to happen and then we want to run a particular set of statement we can use synchronous programming and the place where we need to do multiple operations we must use asynchronous programming.

👋🏻 👋🏻 Hey if you are here, please connect with me
Instagram / Twitter / LinkedIn

Pure and Impure Function in JavaScript: JS Quick Guide

Amit Kumar Singh — Mon, 22 May 2023 17:22:34 +0000

So this article will be about what is functions in JavaScript and, most importantly, what is pure and impure function in JavaScript and how to differentiate between pure and impure functions.

Table of Contents

What are functions
What are Pure Functions
What are Impure Functions
Conclusion

What are Functions in JavaScript
So before we know what are functions in JavaScript, we all know that JavaScript is a scripting language which means we can write our code line by line and save it as a script file name dot JS and JavaScript will execute that script file. Now the question is, why do we need a function?

So once the script file becomes very big, it becomes tough to identify and debug what a particular line of code is doing, and this is where JavaScript functions come into the picture; functions are the beauty of JavaScript. It helps to wrap a particular piece of script and helps to identify what a particular set of script is doing or what it is required to do.

Now let us understand functions with a few examples:

function sayHello() {
  console.log(‘Hello’);
}
sayHello(); // Hello

In the above example, we have created a function named sayHello(), and once we execute this function, it will print hello in our console. So now, only by seeing the function we can know or identify what a particular set of function is doing.

Now let’s take another example to understand function more clearly,

function fullName(firstname, lastname) {
  console.log(`${firstname} ${lastname}`);
}
fullName(‘Amit’, ‘Singh’) // Amit Singh

So in the above example, we have declared a function named fullName(), which takes two arguments: the first name and the last name, and prints the full name by taking the first name and the last name as arguments.

Now just by seeing the function code, we can identify what the particular set of function is doing or what it is required to do. It becomes very easy to debug a particular piece of code, which is why we use pure functions in javascript.

Now depending upon our need or requirement, we can create a set of functions in JavaScript to make our work easier and to debug a particular piece of code. For example, we can create a function to add a number, multiply a number, etc.

So as we have understood what functions are, will help us know better about pure and impure functions in JavaScript.

What is Pure function
So basically, pure functions are a type of function in JavaScript that is pure in nature. By this, I mean this function will always produce the same output for the same given input, and there will be no side effects. These pure functions are independent and do not depend on any external state or variables.

Now let us understand pure functions with few examples:

function fullName(firstname, lastname) {
  console.log(`${firstname} ${lastname}`);
}
fullName(‘Amit’, ‘Singh’) // Amit Singh

We have taken the same example we discussed above; we have declared a function named fullName(), which takes a first name and last name as arguments and gives the output, which is the full name.

So we can see that the output was very predictable for this function, which is why we call this kind of function a pure function where the output of a particular function is predictable, only depends on the internal state, and does not have any side effect. Pure functions can be reused in our code wherever we require the same output; this makes the program very modular.

Here are the key characteristics of pure functions:

Deterministic: A pure function always returns the same result when given the same arguments. It does not depend on any hidden or mutable state.
No Side Effects: Pure functions do not modify variables outside their scope, mutate data structures, perform I/O operations, or have any other observable effect on the program’s state or the external world.
Referential Transparency: Pure functions can be replaced with their return value without changing the program’s behavior. For a given set of inputs, calling a pure function will always yield the same output, regardless of where or when it is called.

Now by the above example, we can see that pure function has several advantages.

Predictability: Since pure functions produce the same output for the same input, they are predictable and easier to reason about. You don’t need to worry about hidden state changes affecting their behavior.
Testability: Pure functions are easier to test because you can provide inputs and check the outputs without dealing with complex setup or dependencies.
Reusability: Pure functions can be reused in different parts of your codebase, promoting code modularity and reducing redundancy.
Parallelization: Pure functions can be safely executed in parallel since they do not rely on a shared mutable state. This property is beneficial for performance optimization.

What is Impure Function
So impure functions are functions that are impure in nature. I mean that given the same input, it will give different output. We can see that impure functions are the opposite of what we discussed above in pure functions.

So unlike pure functions, an impure function can depend on any external state and can also modify the external state, mutate data, perform input-output operation, or have other observable effects on the program state or the external state. Impure functions can be used in scenarios where we need to interact with external states. For example, let’s check if a particular user is authenticated, and based on that, we will do a certain set of actions.

isUserAuthenticated() is a function that returns true or false based on the user’s situation if the user is logged in or not.

function isUserLoggedIn() {
  const isAuthenticated = isUserAuthenticated() // return true or false;
  if(isAuthenticated) {
      console.log(`user is logged in`)
   } else {
      console.log(`user is not logged in`)
   }
 }

Now in the above example, we see that we have a function named is isUserAuthenticated(), which returns true or false based on the user situation if the user is logged in or not, and then we have declared a function named isUserLoggedIn() which depends on the external state that is a function isUserAuthenticated() and check if a user is authenticated or not and based on the state it gives the output.

So now, by seeing the function isUserLoggedIn(), we cannot predict the output because the output is based on the external state. Whether the user is authenticated or not, it will give the output.

Let us understand this by a simple example:

let c = 2
function add(a,b) {
  console.log(a+b+c)
}
add(1,2);

In the above example, we have declared a function named add(). It takes two arguments, a and b, and returns the sum of a + b + c; we can clearly see that function add() depends on the external state, i.e., variable c for the output, and the output will never be the same for the given input.

Now let us understand by another example:

function generateUserId(){
  console.log(Math.floor(Math.random()*10000));
}

In the above example, we have created a function named generateUserId(), which basically generates a random user id using that external state; in this case, that is Math.random() functions. We can see that it becomes very difficult to predict the output of the generateUserId() function.

Here are some characteristics of impure functions:

Side Effects: Impure functions can have side effects, meaning they can modify variables outside their scope, mutate data structures, perform I/O operations (e.g., reading from or writing to a file or database), make network requests, update the user interface, or interact with the browser’s APIs.
Dependency on External State: Impure functions can rely on variables or data that are not passed as function parameters. They can access and modify external state, such as global variables or properties of objects outside their local scope.
Non-deterministic: Impure functions may produce different results for the same input because they can depend on external factors or changing state.

Conclusion
In this article, we have covered what is functional programming, what are functions in JavaScript, why do we use functions in JavaScript, what are pure and impure functions in JavaScript, and what the differences are between impure and pure functions. So we can conclude that every function has its importance, whether pure or impure, depending on the situation or requirement. We can use pure or impure functions to make our code clean and can be easy to debug.

👋🏻 👋🏻 Hey if you are here, please connect with me
Instagram / Twitter / LinkedIn

Trendingtags.io free youtube automation tool

Amit Kumar Singh — Sat, 07 May 2022 19:05:11 +0000

In this article we will understand how using youtube automation tools can make your content creation journey essay effective such that you can grow your youtube channel.

Table of contents

What is youtube automation
Why youtube automation
Types of youtube automation tools
How to SEO youtube videos
How to do video marketing

1. What is youtube automation ?
In simple words to understand we can say that it is a process that is used by third party softwares to automate actions of YouTube like video upload videos, generate tags, title generator, schedule video content, etc. Today using youtube automation people are building their passive income also.There are lots of tools and softwares available in the market for youtube automation that we will come to know in this article.

2. Why youtube automation ?
Let us know why any content creators need a youtube automation tool and how youtube automation makes your content creation journey very easy and effective. The reason why most early content creators face a problem to get views or to viral videos on youtube is because they don't do keyword research.

Keyword research helps content creators find out what keyword people are searching for in the market and what is the volume of the keyword. This gives a clear idea on what topic the video is to be created.

There are also lots of other factors where youtube automation tools play an important role for content creators youtube automation example are:

Finding the video SEO score.
Generating tags for Youtube videos
Video thumbnail downloader
Youtube title generator
Competitor channel analysis
Automate video uploads

and a lot more you can do with using youtube automation tools.

3. Types of youtube automation tools
There are lots of paid youtube automation tools in the market but there are very few free and working tools that are meant for early content creators as they cannot afford to pay at the time of their growth.

Lets us know about these tools in details:

TubeBuddy (Paid Tool)
Trendingtags (Free Tool for Community)

TubeBuddy (Paid Tool)

TubeBuddy is a paid tool that comes with a browser extension and offers SEO optimization to all your content through content suggestions protocol that is based on keywords of your content. TubeBuddy helps you find out content ideas and once you find the content idea it will help you optimize the video by suggesting video title, tags, topic and captions. This helps your video to optimize properly and increase your views.

Trendingtags (Free tool for community)

Trendingtags is a free tool for the content creator, it offers all the service which is being offered by paid tools like tubebuddy because most of the early content creators cannot afford paid tools. Using this free tool you can effectively grow your youtube channel. Not only this you can also use trending tags tool for social media growth for social media platforms like Instagram, TikTok and Twitter. Now let us know about the features of Trendingtags.io

Trendingtags features:

Content ideas suggestions
Search keyword ideas with their volume
Youtube video SEO score
Youtube tag generator
Youtube title generator
Search top video tags
Extract shorts tags and video tags
Youtube thumbnail downloader
Youtube video downloader

and much more to explore using Trendingtags tools.

4. How to SEO youtube videos
SEO youtube video means optimizing youtube videos keywords, descriptions, tags, title, caption such that if people search for the related keyword your youtube video is displayed in largest search engine google or youtube search.

This can be only done by doing keyword research and to do this you can use either TubeBuddy paid tool or Trendingtags free keyword research tool which will save time and money.

5. How to do video marketing
Video marketing can be done by the digital marketing and youtube marketer strategy and to do this you need to identify your goal and need to find out about your target audience. Once you know who your target audience is, you need to know what keyword people are searching for and based on the keywords you have to optimize your keyword such that you can target your audience based on the number of searches your audience does and it is only possible by doing right keyword research.

Conclusion,
Now we can understand how youtube automation can help any content creators grow their youtube channel effectively specially for the early content creators who struggle a lot to get views on their youtube videos. Try trending tags tool for free youtube automation and for social media growth.

TrendingTags.io - Free Tags, Keyword and Video Downloader

Amit Kumar Singh — Tue, 25 Aug 2020 18:12:51 +0000

So, in this post I tell you about my small project i.e., TrendingTags.io

Technology used to build this project.

NextJS
Python
Tailwind CSS

Let's start!

I love building mobile and web application that people can use and on weekend I was thinking to build something as it also helps you build confidence in using the technology as developer.

As I didn't got any ideas, one of my friend calls me and while we talk I told him about I want to build something and shares idea to build a website from where we easily download Instagram Reels, Videos and IGTv.

I did the research and saw lots of people are searching for it and then I thought it would be great if am able to build our website will able to get lots of traffic.

Then we finalise the complete idea of TrendingTags.io

So, TrendingTags.io is an online tool which provide Free SEO Effective keywords and tags with volume data for your content, Instagram Video Downloader, IGTV Download, Reels Download, Facebook Video Download, YouTube Video Downloader

I used NextJS and built the complete frontend using Tailwind css and the backend with the django.

If anyone wants to know in detail how I built the complete project using the technologies then comment below. I will write the detail article on it.

Try the project and share your feedback or suggestions to improve the project.

Visit Now: TrendingTags.io

Thanks,