20 JavaScript Tips Every Developer Should Know

tuanxt — Mon, 11 Nov 2024 15:19:09 +0000

JavaScript is a powerful and flexible language, but it can be full of surprises if you don't fully understand it. Here are 20 useful tips every JavaScript developer should know to help keep your code clean, readable, and efficient.

1. Use `===` instead of `==`

=== checks both value and data type, helping to avoid errors caused by implicit type conversion.

   console.log(5 === '5'); // false
   console.log(5 == '5');  // true

2. Use `const` and `let` instead of `var`

var has function scope, which can lead to unintended issues. const and let make code safer and easier to understand.

3. Object Destructuring

Destructuring makes it easier and shorter to access object properties.

   const user = { name: 'Alice', age: 25 };
   const { name, age } = user;

4. Array Destructuring

Array destructuring is a quick way to assign array values to variables.

   const [first, second] = [10, 20];

5. Use Arrow Functions

Arrow functions make code more concise and provide a fixed this context from the outer scope.

   const add = (a, b) => a + b;

6. Use Template Literals

Template literals allow easy variable interpolation within strings.

   const name = 'Alice';
   console.log(`Hello, ${name}!`);

7. Nullish Coalescing Operator (`??`)

Use ?? to set a default value when the value is null or undefined.

   const value = null;
   const defaultValue = value ?? 'default';

8. Optional Chaining (`?.`)

Optional chaining prevents errors when deeply accessing non-existent object properties.

   const user = {};
   console.log(user?.address?.city); // undefined

9. Working with Default Parameters

Setting default parameter values helps functions handle missing data better.

   function greet(name = 'Guest') {
     return `Hello, ${name}`;
   }

10. Using the Spread Operator

The spread operator quickly copies and merges objects or arrays.

   const arr1 = [1, 2];
   const arr2 = [...arr1, 3, 4];

11. Using Rest Parameters

Rest parameters collect remaining parameters into an array.

   function add(...numbers) {
     return numbers.reduce((a, b) => a + b);
   }

12. Convert a `NodeList` to an Array with `Array.from()`

Use Array.from() to convert a DOM NodeList into an array.

   const elements = Array.from(document.querySelectorAll('p'));

13. Handle Asynchronous Code with `async` / `await`

async and await make asynchronous code more readable than callbacks and then chains.

   async function fetchData() {
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
   }

14. Use `Promise.all` for Multiple Promises

Promise.all allows you to execute multiple promises simultaneously and get the results when all are done.

   const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);

15. Use `Array.map` to Process Array Data

map() creates a new array by performing a function on each element.

   const numbers = [1, 2, 3];
   const doubled = numbers.map(num => num * 2);

16. Filter Arrays with `Array.filter`

filter() creates a new array with elements that satisfy the condition.

   const numbers = [1, 2, 3, 4];
   const evens = numbers.filter(num => num % 2 === 0);

17. Use `Array.reduce` to Aggregate Data

reduce() helps to sum, count, or process data with a custom logic.

   const numbers = [1, 2, 3];
   const sum = numbers.reduce((acc, num) => acc + num, 0);

18. Sort Arrays with `Array.sort`

sort() sorts arrays in place in custom order.

   const numbers = [3, 1, 2];
   numbers.sort((a, b) => a - b);

19. Remove Items from Arrays with `splice` or `filter`

splice() mutates the original array, whereas filter() creates a new array without the removed item.

   const numbers = [1, 2, 3];
   numbers.splice(1, 1); // Removes the second element
   const newArray = numbers.filter(num => num !== 2); // Does not change the original array

20. Use `console.table` for Easier Debugging

console.table() makes data easier to read in table format, especially for complex arrays and objects.

   const users = [
     { name: 'Alice', age: 25 },
     { name: 'Bob', age: 30 }
   ];
   console.table(users);

JavaScript is rich and offers countless ways to write clean, concise, and effective code. Try applying these tips in your projects and see the difference in your development process.

DEV Community: tuanxt

20 JavaScript Tips Every Developer Should Know

1. Use === instead of ==

2. Use const and let instead of var

3. Object Destructuring

4. Array Destructuring

5. Use Arrow Functions

6. Use Template Literals

7. Nullish Coalescing Operator (??)

8. Optional Chaining (?.)

9. Working with Default Parameters

10. Using the Spread Operator

11. Using Rest Parameters

12. Convert a NodeList to an Array with Array.from()

13. Handle Asynchronous Code with async / await

14. Use Promise.all for Multiple Promises

15. Use Array.map to Process Array Data

16. Filter Arrays with Array.filter

17. Use Array.reduce to Aggregate Data

18. Sort Arrays with Array.sort

19. Remove Items from Arrays with splice or filter

20. Use console.table for Easier Debugging