This is a continuation of the previous list of javascript one-liners. If you haven't checked out the article, you are highly encouraged to accomplish so.

Let's crack on with the new list!

1. Sleep Function

JavaScript has NO built-in sleep function to wait for a given duration before continuing the execution flow of the code.

Luckily, generating a function for this purpose is straightforward

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

2. Go Back to the Previous Page

Need to send the user back to the page they came from? history object to the rescue!

const navigateBack = () => history.back();
// Or
const navigateBack = () => history.go(-1);

3. Compare Objects

Javascript behaves in mysterious ways when comparing objects. Comparing objects with the === operator checks only the reference of the objects, so the following code always returns false:

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
obj1 === obj2; // false

To solve this very issue, you can create a deep comparison function:

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

// examples
isEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
isEqual({ a: 1, b: 2 }, { a: 1, b: 3 }); // false

// works with arrays too
isEqual([1, 2, 3], [1, 2, 3]); // true
isEqual([1, 2, 3], [1, 2, 4]); // false

4. Generate Random id

Need multiple unique identifiers but not looking to add the uuid package? Try out this simple utility function:

const uuid = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

NOTE: The function is a one-liner, but spread across multiple lines for readability.

5. Get Selected Text

Want to have access to the text user selects? window just has a method to help you out!

const getSelectedText = () => window.getSelection().toString();

6. Check if an Element is Focused

You can effortlessly check if an element is currently focused without setting up the focus & blur listener.

const hasFocus = (element) => element === document.activeElement;

7. Count by the Properties of an Array of Objects

Need to count the number of items in an array that match a particular property? Using reduce on arrays can achieve the task with ease!

const countElementsByProp = (arr, prop) =>
  arr.reduce(
    (prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev),
    {}
  );

// example
countElementsByProp(
  [
    { manufacturer: "audi", model: "q8", year: "2019" },
    { manufacturer: "audi", model: "rs7", year: "2020" },
    { manufacturer: "ford", model: "mustang", year: "2019" },
    { manufacturer: "ford", model: "explorer", year: "2020" },
    { manufacturer: "bmw", model: "x7", year: "2020" },
  ],
  "manufacturer"
); // { 'audi': 2, 'ford': 2, 'bmw': 1 }

NOTE: This too is a one-liner, but spread across multiple lines for readability.

That's all folks!

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas