50 Practical JavaScript Tips for Developers

Boost Your Coding Efficiency with These Essential JavaScript Hacks

Oct 22, 2024

JavaScript is a dynamic and constantly evolving language, and mastering its quirks can significantly improve your coding efficiency. Whether you're a beginner or an advanced developer, these 50 practical tips will enhance your JavaScript skills and help you write cleaner, more efficient code.

1. Reverse a String

Reversing a string in JavaScript can be achieved using a one-liner:

const reversedString = str.split('').reverse().join('');

This breaks the string into an array of characters, reverses it, and joins it back.

2. Sum an Array

Calculate the sum of all elements in an array using reduce():

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

3. Find the Max and Min Values in an Array

Use the spread operator with Math.max() and Math.min() to find the largest and smallest values:

const numbers = [3, 7, 1, 9];
const max = Math.max(...numbers);
const min = Math.min(...numbers);

4. Remove Duplicates from an Array

Create a new array without duplicates using Set:

const uniqueArray = [...new Set([1, 2, 2, 3])];

5. Flatten a Multi-dimensional Array

The flat() method flattens nested arrays:

const nestedArray = [1, [2, [3, 4]]];
const flatArray = nestedArray.flat(2);

6. Copy Text to Clipboard

You can copy text to the clipboard using the Clipboard API:

function copyText(text) {
  navigator.clipboard.writeText(text);
}

7. Check if a Value is a Number

To check if a value is a valid number, use the combination of typeof and !isNaN():

const isNumber = value => typeof value === 'number' && !isNaN(value);

8. Generate a Random Number in a Range

Here’s a function to generate a random number between two values:

const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

9. Convert a String to a Number

Use the + operator to quickly convert a string into a number:

const num = +"42"; // 42

Alternatively, you can use parseInt():

const number = parseInt("42", 10);

10. Default Parameters in Functions

Set default parameter values in functions to avoid undefined values:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

11. Convert Arguments Object to an Array

In JavaScript functions, arguments is an array-like object that can be converted into an actual array:

function myFunc() {
  const argsArray = Array.from(arguments);
}

12. Debounce a Function

Debouncing ensures a function is not called repeatedly in quick succession. Here’s an example:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

13. Throttle a Function

Throttling ensures a function is called at most once in a specified time frame:

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

14. Check if an Object is Empty

Check if an object has no properties by using Object.keys():

const isEmpty = obj => Object.keys(obj).length === 0;

15. Short-circuit Evaluation

Use short-circuiting to conditionally assign values:

const message = user.isLoggedIn && "Welcome back!";

If user.isLoggedIn is true, message is assigned the string value.

16. Object Property Shorthand

When property names match the variable names, you can use shorthand syntax:

const name = "John";
const age = 25;
const person = { name, age };

17. Destructure Arrays

Destructure arrays to assign values to variables:

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

18. Destructure Objects

Extract properties from objects and assign them to variables:

const {name, age} = {name: "Jane", age: 30};

19. Template Literals

Use template literals for easy string interpolation:

const name = 'John';
const greeting = `Hello, ${name}!`;

20. Convert NodeList to Array

You can convert a NodeList to an array using Array.from():

const nodeList = document.querySelectorAll('div');
const nodeArray = Array.from(nodeList);

21. Check if Array Contains an Element

Use includes() to check if an array contains a value:

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

22. Get Unique Values from an Array

You can find unique values using Set:

const uniqueValues = Array.from(new Set([1, 2, 2, 3, 3]));

23. Find Object Properties

Use Object.keys() and Object.values() to retrieve the keys and values of an object:

const obj = { name: 'Alice', age: 30 };
console.log(Object.keys(obj)); // ['name', 'age']
console.log(Object.values(obj)); // ['Alice', 30]

24. Merge Objects

Use the spread operator to merge objects:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

25. Map an Array

Use map() to transform an array by applying a function to each element:

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

26. Filter an Array

Filter an array to remove unwanted elements:

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

27. Promise.all()

Use Promise.all() to handle multiple asynchronous tasks concurrently:

Promise.all([fetch('/data1'), fetch('/data2')])
  .then(responses => {
    // Handle responses
  })
  .catch(error => console.error(error));

28. Convert a Set to an Array

You can convert a Set to an array using the spread operator:

const set = new Set([1, 2, 3]);
const array = [...set];

29. Sort an Array

Sort an array of numbers in ascending or descending order:

const numbers = [4, 2, 7];
numbers.sort((a, b) => a - b); // ascending
numbers.sort((a, b) => b - a); // descending

30. Pad a String

Pad the start or end of a string to reach a certain length:

const str = '5';
const paddedStr = str.padStart(3, '0'); // "005"

31. Trim Whitespace

Use trim(), trimStart(), and trimEnd() to remove whitespace:

const text = "  Hello  ";
console.log(text.trim()); // "Hello"

32. Check if String Contains Substring

Use includes() to check if a string contains a specific substring:

const sentence = "JavaScript is awesome";
console.log(sentence.includes("awesome")); // true

33. Find the Index of a Substring

Use indexOf() to find the position of a substring:

const sentence = "JavaScript is fun";
console.log(sentence.indexOf("fun")); // 14

34. Repeat a String

Use repeat() to repeat a string:

const str = "ha";
console.log(str.repeat(3)); // "hahaha"

35. Replace a Substring

Use replace() to replace a substring:

const text = "JavaScript is fun";
const newText = text.replace("fun", "awesome");

36. Use Optional Chaining

Optional chaining (?.) helps to safely access deeply nested properties:

const user = { name: 'John' };
console.log(user?.address?.city); // undefined, no error

37. Convert Date to Locale String

Format dates using toLocaleDateString():

const date = new Date();
console.log(date.toLocaleDateString('en-US')); // MM/DD/YYYY format

38. Check if a Value is an Array

Use Array.isArray() to check if a value is an array:

console.log(Array.isArray([1, 2, 3])); // true

39. Check if an Element Exists in DOM

Use document.querySelector() to check for the presence of an element:

const elementExists = !!document.querySelector('.my-element');

40. Get Current Timestamp

Use Date.now() to get the current timestamp:

const timestamp = Date.now();

41. Format Numbers with Commas

Use toLocaleString() to format numbers with commas:

const number = 1234567;
console.log(number.toLocaleString()); // "1,234,567"

42. Round a Number to 2 Decimal Places

Use toFixed() to round a number:

const number = 5.6789;
console.log(number.toFixed(2)); // "5.68"

43. Check if a Variable is Undefined

Check if a variable is undefined:

if (typeof variable === 'undefined') {
  // Handle undefined
}

44. Get Random Item from Array

Use Math.random() to retrieve a random item from an array:

const items = ['apple', 'banana', 'orange'];
const randomItem = items[Math.floor(Math.random() * items.length)];

45. Use Arrow Functions for Short Functions

Arrow functions provide concise syntax:

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

46. Use Object.assign() for Shallow Copy

Use Object.assign() to copy objects:

const original = { a: 1 };
const copy = Object.assign({}, original);

47. Use typeof for Type Checking

Use typeof to check the type of a variable:

console.log(typeof 'Hello'); // "string"
console.log(typeof 42); // "number"

48. Dynamic Property Names

You can use square brackets to set dynamic property names:

const key = 'name';
const obj = { [key]: 'John' };

49. Check for Nullish Values

Use the nullish coalescing operator (??) to handle null or undefined values:

const value = user.age ?? 'Unknown';

50. Use console.table() for Easier Debugging

Display tabular data in the console with console.table():

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

Conclusion

Mastering these 50 practical JavaScript tips will help you write better code and improve your problem-solving skills. Keep them handy as you work through various projects, and you'll see a significant boost in your productivity! Happy coding!

JavaScript Development Substack

Discussion about this post