DEV Community: ayush65

Promises in JavaScript

ayush65 — Thu, 21 Jul 2022 15:22:00 +0000

JavaScript is a single-threaded programming language, that means only one thing can happen at a time. Before ES6, we used callbacks to handle asynchronous tasks such as network requests.

Using promises, we can avoid the infamous ‘callback hell’ and make our code cleaner, easier to read, and easier to understand.

Suppose we want to get some data from a server asynchronously, using callbacks we would do something like this:

getData(function(x){
    console.log(x);
    getMoreData(x, function(y){
        console.log(y); 
        getSomeMoreData(y, function(z){ 
            console.log(z);
        });
    });
});

Here I am requesting some data from the server by calling the getData() function, which receives the data inside the callback function. Inside the callback function, I am requesting for some more data by calling the getMoreData() function passing the previously received data as an argument and so on.

This is what we call callback hell, where each callback is nested inside another callback, and each inner callback is dependent on its parent.

We can rewrite the above snippet using promises. For example:

getData()
  .then((x) => {
    console.log(x);
    return getMoreData(x);
  })
  .then((y) => {
    console.log(y);
    return getSomeMoreData(y);
  })
  .then((z) => {
    console.log(z);
   });

What is a Promise?

A Promise is an object that holds the future value of an async operation. For example, if we are requesting some data from a server, the promise promises us to get that data which we can use in future.

States of a Promise

A Promise in JavaScript just like a promise in real-world has 3 states. It can be pending, resolved , rejected. For example:

Unresolved or Pending :-

A Promise is pending if the result is not ready. That is, it’s waiting for something to finish (for example, an async operation).
Resolved or Fulfilled :-

A Promise is resolved if the result is available. That is, something finished (for example, an async operation) and all went well.
Rejected :-

A Promise is rejected if an error happened.

JavaScript Methods

ayush65 — Thu, 21 Jul 2022 15:01:00 +0000

1.includes()
The includes() method focuses on finding out whether an array (a data structure comprising a list of items, each of which stores several elements in a single variable) holds a specific value within its list, then responds with either true or false. It’s vital to remember that includes() is case sensitive when looking for a specific answer.

let text = "Hello world, welcome to the universe."; let result = text.includes("world");

2.some()
The some() method tests are responsible for finding whether at least one item in the array passes the test conducted by the callback function. The callback function accepts only three responses: the item, the index, and the entire array.

const ages = [3, 10, 18, 20];

ages.some(checkAdult);
function checkAdult(age) {
  return age > 18;
}

3.every()
The every() method uses a similar process as some(), with one change. The difference here is that all the elements in the array pass the test by the callback function.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));

4.filter()
The filter() method, a favorite for many developers, works by creating a new array by using elements from pre-existing arrays, using a test done by the callback function.

const ages = [32, 33, 16, 40];
const result = ages.filter(checkAdult);

function checkAdult(age) {
  return age >= 18;
}

5.map()
The map() method, much like the filter() method, creates a new array using the results from the callback function for each element in the array. The callback function receives one of three arguments: currentValue, index, or array. Much like reduce(), the callback function looks for indexes (the element’s location) of the array with assigned values, including if it’s undefined.

const numbers = [4, 9, 16, 25];
const newArr = numbers.map(Math.sqrt)

6.flatMap()
The flatMap() method takes a function (a task using a specific keyword) to each element along with the array and then “flattens” (or changes) the result into a new array. This method combines flat() and map() in one function, which is more efficient than inputting two different methods separately.

const arr1 = [1, 2, [3], [4, 5], 6, []];

const flattened = arr1.flatMap(num => num);

console.log(flattened);

7.reduce()
The reduce() method uses the callback function for each value within the array using the four key arguments: accumulator, currentValue, currentIndex, or array. During the first callback, the accumulator and currentValue will result in initialValue if available; if not, the first value of the array will appear.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);

8.reverse()
The reverse() method takes an array and reverses its order. This function takes the first element along with the array and makes it the last, and the last array becomes the first element.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

9.sort()
The sort() method, one of the most common, focuses on sorting elements of an array in place and then returns the completed array, set to default in ascending order. This method doesn’t always guarantee perfect results, depending on the task’s complexity.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Ayush

ayush65 — Thu, 02 Sep 2021 05:03:08 +0000

Chalk module in Node.js is the third-party module that is used for styling the format of text or create our own theme in the node.js project

for the neog.camp in the mark 1 i learn about it and used in my program .

A small part of program is as follows :-

we can use even const and var as per our choice.

we have to first write the following code for importing the module
Now ,
var variable = require('readline-sync');

Using readline-sync helps us to get the user input later if we want in our program

eg:- In this program we want to check that the user is correct or not about the questions provided .

Now,
const chalk = require('chalk');

chalk is a variable here you can use any name as you want for the variable .

we have to import chalk module is used for providing the color for for the console.log() as we discussed earlier

here using the chalk.blue we can get the blue color for the console.log part as :-

We can use the chalk module as a variable also :-

We can use in the console.log() as :-

console.log(welcome('you are right! '));

console.log(warning('oops! its wrong'));

We will assign the score for the small CLI app game :-

Initially the score will be zero .

for last defining part we can use it with console.log as shown below :-

you can check the project on :- https://replit.com/@ayush65pra/my-quiz?embed=1&output=1#index.js
thanks for giving your valuable time .

Chalk Module in JavaScript

ayush65 — Sun, 15 Aug 2021 09:44:15 +0000

Chalk module in Node.js is the third-party module that is used for styling the format of text or create our own theme in the node.js project

For the neog.camp in the mark 1 i learn about it and used in my program .

A small part of program is as follows :-

we can use even const and var as per our choice.

var variable = require('readline-sync');
const chalk = require('chalk');

we have to first write the following code for importing the module
Now ,

var variable = require('readline-sync');

Using readline-sync helps us to get the user input later if we want in our program

# concatenation

It concatenates one string to the end of another string using the ( + ) Sign .
We can use this for welcoming the users.

console.log("wecome " + user )

eg:- In this program we want to check that the user is correct or not about the questions provided .

Now,

const chalk = require('chalk');

chalk is a variable here you can use any name as you want for the variable .

we have to import chalk module is used for providing the color for for the console.log() as we discussed earlier

var username = variable.question('what is your name ? ');

console.log(chalk.blue("welcome",username,"lets play"));

here using the chalk.blue we can get the blue color for the console.log part as :-

We can use the chalk module as a variable also :-

const warning=chalk.red;
const welcome=chalk.green;
const endgame=chalk.yellow;

We can use in the console.log() as :-

    console.log(welcome('you are right! '));

    console.log(warning('oops! its wrong'));

We will assign the score for the small CLI app game :-

Functions

           function gamename(playername){
                       console.log(playername)

                     }



            function name(){
                    console.log("Ayush Prakash")
                   }

These are two types of functions one take parameter and second one doesn't take any parameter, what parameter means is to pass a value to that piece of code which that code can implement function includes concepts of global and local variable, “ A variable inside a function stays inside a function unless its global ” that means a variable declared inside a function cannot be used by other functions unless its global or its passed as parameter

Initially the score will be zero .

score = 0;


function playGAme(question,answer){
  var Userans = variable.question(question);

  if (Userans === answer){
    console.log(welcome('you are right! '));
    score = score+ 1;
  }else{
    console.log(warning('oops! its wrong'));

  }

}

for last defining part we can use it with console.log as shown below :-

Lists

As we have seen array stores a single value without ref to store value with ref we use dictionary wich consists of key & value pair we can call a value by its key name. it uses 'CURLY BRACKETS {..}'

var obj1 ={
  name:"Ayush",
  age:"20",

}
var obj2 ={
  name:"Prakash",
  age:"15"
}

We can use the user provided data in the list of object and if we have more than one time to do we will use loop Both can be done as :-


var listofstudent = [];

for (let i=0 ; i<5 ; i++) {

var name = variable.question('what is your name ? ');
var unitTest = variable.question('what is your unit test marks ? ');
var preFinal = variable.question('what is your Pre final ? ');
var final = variable.question('what is your Final marks ? ');

console.log('------------------------------------------')
console.log('------------------------------------------')

var tempobj ={
  name: name,
  unitMarks: unitTest,
  preMarks: preFinal,
  finalMarks : final
}
listofstudent.push(tempobj);
}

We are storing the values here unitTest marks and all in the listofstudents list . Later we made temp object and later we push the values in the listofstudents list

We can use that in a function as :-


var obj1 ={
  name:"ram",
  power:"2500",
  yuga:"treta"
}
var obj2 ={
  name:"krishna",
  power:"2325",
  yuga:"dwapar"
}

function playGAme(obj1,obj2){


  if (Number(obj1.power) > Number(obj2.power)){
    console.log(chalk.yellow(obj1.name + ' has more power than '+obj2.name));

  }  
  else if (Number(obj1.power) < Number(obj2.power)){
    console.log(chalk.yellow(obj2.name + ' has more power than '+obj1.name));

  }  

  else{
    console.log('they both have same power')
  }

}

playGAme(obj1,obj2);

thanks for giving your valuable time .

Prop Drilling

ayush65 — Sun, 15 Aug 2021 09:11:38 +0000

Components in React can be passed some parameters. These parameters are generally named props.

When i started learning in React . I came across Prop drilling it . Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level. Data needed to be sent from Parent to Child.

The diagram can be given as :-

React has a component based design like:-

App.js
Post.js
login.js
Feed.js
Header.js
Sidebar.js

The App.js is the main parent here it first checks with the Login.js for the authentication of the user then the details is been send to the feed section for further details .

assume when we login we get the user for the user object . then if we have to pass the user through the tree it will be messy and hard to understand .

The Prop Drilling helps to traverse the data requied in this case we have the user details after login in then the data is been send to the feed as per the user then we can fetch the data of the user as in the form of posts.

-> Why is Prop Drilling a Problem?

Prop drilling doesn’t have to be a problem. If we are passing data only between 2 or 3 levels, we are fine. It will be easy to trace the flow of data but if we are drilling 5 levels, or 10 levels, or 15 it will be a problem because the data will have to traverse all through the levels .

-> So how can we prevent this from happening ?

We can actually use react context .

React context can help us to pass the data through to all the components in the tree , without taking too much time to pass it down every level .

In our case we want the user details to be given to the required place . Assume we want the user details in the post part to know that what posts the user has made as per the user id or personal details . After getting the details the post part will only show the posts and we do not have to pass the user details throughout the tree.

-> Without using Prop Drilling

                     useContext hook

We can use alternative by using useContext hook. The useContext hook is based on Context API and works on the mechanism of Provider and Consumer. Provider needs to wrap components inside Provider Components in which data have to be consumed. Then in those components, using the useContext hook that data needs to be consumed.

Thanks for your time , Have a nice day 😄

DEV Community: ayush65

Promises in JavaScript

What is a Promise?

States of a Promise

Unresolved or Pending :-

Resolved or Fulfilled :-

Rejected :-

JavaScript Methods

Ayush

Chalk module in Node.js is the third-party module that is used for styling the format of text or create our own theme in the node.js project

Chalk Module in JavaScript

Functions

Lists

Prop Drilling

The diagram can be given as :-

React has a component based design like:-

-> Why is Prop Drilling a Problem?

-> So how can we prevent this from happening ?

-> Without using Prop Drilling