12 Super Useful Tricks in JavaScript

12 Super Useful Tricks in JavaScript

12 Super Useful Tricks in JavaScript, I compile some of the JavaScript “techniques” that I usually use in my day-to-day life, saving a lot of time. I hope you find them useful! Create a Generic function, Switch with ranges, Grouping multiple switch cases, Wait to multiple asynchronous functions with async/await, Flattening bidimensional arrays in one step, Flattening multidimensional arrays in one step, Create pure objects in JavaScript, Remove duplicates elements in an Array in one step, Display in the console when a page has started and finished loading, Button to print the current page, Rounding off numbers, Empty an array

In this article, I compile some of the JavaScript “techniques” that I usually use in my day-to-day life, saving a lot of time. I hope you find them useful!

  1. Create a Generic function
  2. Switch with ranges
  3. Grouping multiple switch cases
  4. Wait to multiple asynchronous functions with async/await
  5. Flattening bidimensional arrays in one step
  6. Flattening multidimensional arrays in one step
  7. Create pure objects in JavaScript
  8. Remove duplicates elements in an Array in one step
  9. Display in the console when a page has started and finished loading
  10. Button to print the current page
  11. Rounding off numbers
  12. Empty an array

1. Create a Generic function

Let’s imagine that we want to develop a generic function, given some parameters and a function. This function is executed then with these parameters.

For example, a calculator with N parameters and N operations. You can easily achieve this using the spread operator and the reduce function:

function calculator(operation, ...numbers) {
    return operation(...numbers);
}

function add(...numbers) {
    return numbers.reduce( (total, num) => total + num, 0);
}
function subtract(...numbers) {
    return numbers.reduce( (total, num) => total - num, 0);
}
function multiply(...numbers) {
    return numbers.reduce( (total, num) => total * num, 1);
}
console.log(calculator(add, 1, 2, 3, 4, 5));
console.log(calculator(subtract, 10, 2, 1));
console.log(calculator(multiply, 2, 2, 2, 2));

Image for post

Different operations with our generic function

2. Switch with ranges

Sometimes you would probably have found useful to use ranges in a Switch sentence. Here is an example of how to do it:

function chooseSportByTemperature(fahrenheit) { 
  let sport;
  switch (true) {

   case (fahrenheit >= 15 && fahrenheit <=20):
     sport = 'Running';
     break;
   case (fahrenheit > 20 && fahrenheit <= 30):
    sport = 'Cycling';
    break;
   case (fahrenheit > 30):
    sport = 'Stay in home';
    break;
   default:
    sport = 'Sex';

   }
return sport;
}

3. Grouping multiple switch cases

A clean way to group case sentences:

function setMyValueByValue(value) { 
    let myValue;
  switch (value)
  {
     case "value1":
     case "value2":
     case "value3": 
         myValue = "My value 1-2-3"
         break;
     case "value4":     
         myValue = "My value 4"
         break;
     default: 
         myValue = "Default value"
  }
 return myValue;
}
console.log(setMyValueByValue("value1"));
console.log(setMyValueByValue("value2"));
console.log(setMyValueByValue("value3"));
console.log(setMyValueByValue("value4"));
console.log(setMyValueByValue("value5"));

Image for post

Grouping multiple switch cases.

4. Wait to multiple asynchronous functions with async/await

It is possible to wait to await the completion of multiple asynchronous functions using (Promise.all) inside the async function.

function resolveAfter1Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 1000);
  });
}
function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}
function resolveAfter3Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 3000);
  });
}
function resolveAfter4Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 4000);
  });
}
async function asyncFunction() {
  console.log('start');
  const result = await Promise.all(

  [resolveAfter1Seconds(),
   resolveAfter2Seconds(),
   resolveAfter3Seconds(),
   resolveAfter4Seconds()])
  console.log(result); //resolved after 10 seconds !
  console.log('end');
}
asyncFunction();

javascript programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.