20 JavaScript Tricks Every Developer Must Know 🚀

1. Destructure and Rename in One Step

You can rename variables during object destructuring, which is helpful when there are naming conflicts.

const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge);  // 25

2. Optional Chaining with Function Calls

Optional chaining can be used with functions, ensuring the function exists before it’s called.

const user = {
  getName: () => 'Alice',
};
console.log(user.getName?.());   // Alice
console.log(user.getAge?.());    // undefined

3. Use ||= Operator for Default Assignment

The logical OR assignment (||=) assigns a value only if the variable is null or undefined or falsey value like 0.

let count;
count ||= 10;
console.log(count); // 10

4. Convert NodeList to Array Using Spread Operator

The spread operator provides a quick way to convert a NodeList to an array.

const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true

5. Array/Object Destructuring with Default Values

Assign default values during destructuring to avoid undefined when keys are missing.

const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25

6. Remove Falsy Values from an Array

Use filter() to remove falsy values (like 0, null, undefined, false) from an array.

const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]

7. Sorting Arrays of Objects by Property

Easily sort an array of objects by a specific property.


const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]

8. Dynamic Imports for Lazy Loading

Dynamic imports allow you to load modules only when needed, reducing initial load time.

const loadModule = async () => {
  const module = await import('./myModule.js');
  module.default(); // Calls the default export function
};
loadModule();

9. Default Parameters with Object Destructuring

When using default parameters, you can also destructure and set defaults for specific properties.

function createUser({ name = 'Guest', age = 18 } = {}) {
  console.log(name, age);
}
createUser();               // Guest 18
createUser({ name: 'Alice' }); // Alice 18

10. Use Object.assign() for Shallow Copying

Object.assign() is handy for shallow-copying objects without changing the original.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged)

11. Memoize Functions for Performance

Memoization caches results of expensive function calls based on arguments, useful for computationally heavy functions.

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)

12. Using reduce to Group Array Items

reduce() can group array items based on a property, often needed in data processing.

const people = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
  (acc[person.role] = acc[person.role] || []).push(person);
  return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }

13. Flatten Nested Arrays with Array.flat(Infinity)

Flattening multi-level nested arrays becomes straightforward with Array.flat(Infinity).

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

14. Toggle Boolean Value with !

Toggling a boolean value is as easy as applying the NOT operator twice.

let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true

15. Merge Multiple Arrays with concat()

concat() is helpful for merging multiple arrays in a single statement.

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]

16. Asynchronous Array Iteration with for...of and await

When iterating over an array of promises, for...of with await ensures that each promise resolves before the next one runs.

const fetchData = async () => {
  const urls = ['url1', 'url2'];
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.json());
  }
};

17. Get the Last Item in an Array Quickly

Retrieve the last item in an array without needing to know the length.

const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4

18. Use Intl for Date Formatting

Intl.DateTimeFormat offers a powerful way to format dates across locales.

const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Thursday, 08 August 2024"

19. Round Numbers with Math.round() and Template Literals

Template literals can format rounded numbers directly.

const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14

20. Convert Array-Like Objects to Arrays Using Array.from()

Use Array.from() to convert array-like objects (e.g., arguments) into real arrays.

function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]

Each of these tricks simplifies common coding patterns in JavaScript. Integrate them into your workflow to write code that is both efficient and expressive.

Happy coding! 🚀

Easily sort an array of objects by a specific property. const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }]; users.sort((a, b) => a.age - b.age); console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]

11. Memoize Functions for Performance

Memoization caches results of expensive function calls based on arguments, useful for computationally heavy functions.

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)

12. Using reduce to Group Array Items

reduce() can group array items based on a property, often needed in data processing.

const people = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
  (acc[person.role] = acc[person.role] || []).push(person);
  return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }

16. Asynchronous Array Iteration with for...of and await

When iterating over an array of promises, for...of with await ensures that each promise resolves before the next one runs.

const fetchData = async () => {
  const urls = ['url1', 'url2'];
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.json());
  }
};

20. Convert Array-Like Objects to Arrays Using Array.from()

Use Array.from() to convert array-like objects (e.g., arguments) into real arrays.

function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]

Each of these tricks simplifies common coding patterns in JavaScript. Integrate them into your workflow to write code that is both efficient and expressive.

Happy coding! 🚀