Rutvik Makvana

Posted on Dec 18

15 JavaScript Tricks Every Developer Must Know 🚀

#webdev #javascript #devops #ai

1. Destructure and Rename in One Step

Rename variables during object destructuring to avoid naming conflicts:

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

2. Optional Chaining with Function Calls

Ensure a function exists before calling it:

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

3. Use ||= Operator for Default Assignment

Assign a default value only if the variable is null, undefined, or falsey:

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

4. Convert NodeList to Array Using Spread Operator

Quickly 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

Avoid undefined by assigning default values during destructuring:

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

6. Remove Falsy Values from an Array

Filter out falsy values like 0, null, or undefined:

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

Sort objects by a specific property:

const users = [{ name: 'Rohit', age: 38 }, { name: 'Virat', age: 36 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Virat', age: 36 }, { name: 'Rohit', age: 38 }]

8. Default Parameters with Object Destructuring

Destructure and set default values in function parameters:

function createUser({ name = 'Rutvik', age = 22 } = {}) {
  console.log(name, age);
}
createUser();               // Rutvik 22
createUser({ name: 'Rohit' }); // Rohit 22

9. Use Object.assign() for Shallow Copying

Shallow-copy objects without affecting the original:

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

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

Easily flatten deeply nested arrays:

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

11. Toggle Boolean Value with !

Toggle a boolean value:

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

12. Merge Multiple Arrays with concat()

Merge arrays in a single step:

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]

13. Get the Last Item in an Array Quickly

Retrieve the last item in an array:

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

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

Format rounded numbers easily:

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

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

Turn array-like objects into arrays:

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

By incorporating these tricks into your coding practices, you can write efficient and expressive JavaScript. Which trick did you find most helpful? Let me know in the comments below!

Happy coding! 🚀

🎯 Follow me on GitHub: RutvikMakvana4

DEV Community