JavaScript Development Hacks: 13 Hidden Gems you need to know

Introduction

JavaScript is a versatile and dynamic language that has enabled developers to create some of the most innovative and complex applications on the web.

As the language has evolved, new features and techniques have been introduced to help developers write more efficient and readable code.

While some of these features are well-known and widely used, there are a host of hidden features within the language that can make a significant impact on your coding skills.

From advanced string manipulation to array manipulation, and from working with numbers and floating points to dealing with Promises, we’ll cover a range of topics that are often overlooked by developers. With these functionalities, you can optimize your code and streamline your development workflow.

Whether you’re a seasoned developer or just getting started with JavaScript, this blog post will provide valuable insights for improving your coding skills. So, let’s dive in and explore these functionalities of JavaScript!

Sponsored

Build good habits to discover your hidden talents and use them when needed with Justly. Try it today!

Arrays

1. Array.flat()

As the name suggests, This method is used to flatten an array of nested arrays. For example:

const arr = [[1, 2], [3, 4], [5, 6]];
console.log(arr.flat()); // [1, 2, 3, 4, 5, 6]

2. Array.flatMap()

In the above example, suppose you want to multiply all the elements with any number and then flatten the whole array. This method will be useful to you.

This method is a combination of Array.map() and Array.flat() methods. It is used to map each element in an array to a new value and then flatten the resulting array. For example:

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap(item => item.map(value => value * 5));
console.log(result); // [5, 10, 15, 20, 25, 30]

3. Array.reduceRight()

This method is used to reduce an array from right to left. It can be used to simplify the code when working with arrays that need to be processed from right to left. For example:

const arr = [1, 2, 3, 4, 5];
/** 
    0 is initial value for accumulator, 
    if not defined it starts with last element of array (5)
**/
const result = arr.reduceRight((accumulator, currentValue) => {
    return accumulator - currentValue
}, 0);  
console.log(result); // -15

currentValue : current value of iterator in 5,4,3,2,1 order
accumulator: Value after performing accumulator - currentValue, Ex. 0, -5, -9, -12, -14, -15

4. Array.reduce()

This method is used to reduce an array to a single value by applying a specified function to each element in the array. It can be used to simplify the code when working with arrays of data that need to be reduced. For example:

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

5. Array.some()

You are feeling hungry and you see the basket(array) of food and you want to know whether this basket has some fruit so you can eat.

In general, This method is used to check if at least one element in an array matches a specified condition. It can be used to simplify the code when searching for an element in an array. For example:

const basket = [
  {
    type: "fruit",
    name: "apple"
  },
  {
    type: "vegetable",
    name: "tomato"
  },
  {
    type: "fruit",
    name: "orange"
  },
  {
    type: "vegetable",
    name: "cucumber"
  }
];

const hasFruit = basket.some((item) => item.type == "fruit");
console.log(hasFruit); // true

6. Array.every()

Now we want to check whether every item in the basket is fruit or not.

This method is used to test all elements in an array. It can be used to simplify the code when working with arrays of data that need to be tested. For example:

const basket = [
  {
    type: "fruit",
    name: "apple"
  },
  {
    type: "vegetable",
    name: "tomato"
  },
  {
    type: "fruit",
    name: "orange"
  },
  {
    type: "vegetable",
    name: "cucumber"
  }
];

const hasFruit = basket.every((item) => item.type == "fruit");
console.log(hasFruit); // false

Objects

7. Object.fromEntries()

This method is used to create an object from an array of key-value pairs. It can be used to simplify the code when working with data that needs to be converted into an object. For example:

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // {a: 1, b: 2, c: 3}

8. Object.freeze()

This method is used to make an object immutable(unchanged). It can be used to prevent accidental changes to an object, which can improve the stability and reliability of the code. For example:

const obj = {a: 1, b: 2};
Object.freeze(obj);
obj.c = 3; // This will have no effect
console.log(obj); // {a: 1, b: 2}

It can be used to define the constants, that will never change.

Strings

9. String.padStart() and String.padEnd()

If you want to append something to the start or end of the string and want to control the length of the string. These methods will help you.

These methods are used to pad the start and end of a string with a specified character until the string reaches a specified length. For example:

const str = '123';
console.log(str.padStart(5, '0')); // '00123'
console.log(str.padEnd(5, '0')); // '12300'

Promise

10. Promise.allSettled()

Sometimes we need all the details of promises whether they were resolved or rejected.

This method returns an array of objects that describe the outcome of each promise either resolved or rejected. It can be used to simplify the code when working with multiple promises that need to be tracked. For example:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(2);
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3]).
        then((results) => console.log(results));
/**
 Output: [{ status: 'fulfilled', value: 1 }, 
          { status: 'rejected', reason: 2 }, 
          { status: 'fulfilled', value: 3 }]
**/

11. Promise.race()

If you want to do a race between promises, this method will help you 😉.

This method is useful when you have multiple promises that need to resolve and have to decide which promise will resolve or reject first.

This method returns a promise that resolves or rejects as soon as one of the given promises resolves or rejects, with the value or reason from that promise. For example:

const promise1 = new Promise((resolve) => setTimeout(() => resolve(1), 500));
const promise2 = Promise.resolve(2);

Promise.race([promise1, promise2]).then((result) => console.log(result)); //output: 2

Others

12. Object.is()

Bored with using traditional comparison a==b? Use Object.is()

This function is used to determine whether two values are the same. It can be useful in comparisons. For example:

console.log(Object.is(0, -0)); // false
console.log(Object.is("cool", "cool")); // true

13. Number.isFinite()

This function is used to determine whether a value is a finite number or not. For example:

console.log(Number.isFinite(1000/0));   // false
console.log(Number.isFinite(1000/1));   // true
console.log(Number.isFinite(Infinity)); // false

Conclusion

Whether you’re building complex applications or working on simple projects, these features and techniques of JavaScript can make a significant impact on your development process.

We’re Grateful to have you with us on this journey!

Suggestions and feedback are more than welcome! 

Please reach us at Canopas Twitter handle @canopas_eng with your content or feedback. Your input enriches our content and fuels our motivation to create more valuable and informative articles for you.

That’s all for today, meet you soon in the next article. Till that, keep exploring…

Related articles