Javascript concepts you tend to forget easily

Now you won't!

  1. Promise

A promise is an object in javascript that represents a value that is going to be fulfilled or rejected in the future. Most often, we as developers tend to consume promises given to us or by libraries so handling promises with then and catch block is important to understand.

let dataFetched = true;
const dataIsFetched = new Promise((resolve, reject) => {
    if(dataFetched) {
        resolve("Data Fetched");
    } else {
        reject("Some Error Occured");
    }
}

dataIsFetched()
    .then((msg) => console.log(msg))
    .catch((errMsg) => console.log(errMsg));
  1. Closures

The closure is a concept of function inside a function where the inner function can access and modify the variables from the outer function. Using this concept, we can do some amazing things like encapsulation and implement decorators and generators, asyncronous code, etc.

function outerFunction() {
    let userName = "John";
    function innerFunction() {
        console.log(userName);
    }
    return innerFunction;
}

const inner = outerFunction();
inner();
  1. Higher Order Functions

Higher order functions are those functions that take function as arguments or return functions as return value. Array methods like .map, .reduce, .forEach, etc all are higher order functions.

function isOdd(num) {
    return num % 2;
}

function takeFilteredElements(array, condition) {
    const returnArr = [];
    for(let i = 0; i < array.length, i++) {
        if(condition(array[i])) {
            returnArr.push(array[i]);
        }
    }
    return returnArr;
}

console.log(takeFilteredElements([1, 2, 3, 4, 5, 6], isOdd));
  1. Recursion

The concept of recursion is that a function calls itself until a base condition is reached. There are two compulsory parts in a recursive function.

  • Base Case: It is the simplest case that a function may arrive. Like 0 factorial is 1.

  • Recursion: This is the place where recursion occurs where a function is called again and again.

function findFactorial(num) {
    if(num < 0) return -1; // Value of num can not be negative
    if(num == 0) return 1; // Simplest base case 
    return num * findFactorial(num - 1);
}
console.log(findFactorial(6)); // Output: 720
  1. Async/await

Async/await is nothing but just a wrapper on the Promise API. It is used for asynchronous programming for fetching data from file or database or request.

  • async: It is used to tell that the function or method is going to have await inside it

  • await: It is used to stop the current execution of the function and take the execution context to another part until the operation is completed.

async function getTodo() {
    const response = await fetch("https://example.com/api");
    const data = await response.json();
    console.log(data);
}

In the example above the await fetch part runs and the execution is given to some other code but after the response is there. It is converted to json which is an expensive process so again it is given inside await.

  1. Array methods

Array methods are important methods that are often overlooked by most developers when learning about Arrays and try to implement their function operation on the array.

Some of the most important array methods are:

  • Array.map: It iterates over all elements and returns a new array with return value

  • Array.forEach: It iterates over all elements of the array but does not return any value.

  • Array.filter: It filters the elements of an array that met certain conditions return filtered array.

  • Array.some: It checks if any element of an array met a certain condition and returns a boolean.

Conclusion

Apart from these, many other javascript concepts are important and often forgotten but this blog tries to cover 6 of them.


Thanks for reading this article. If you found this helpful, please support this with a reaction, comment or share.