10 Javascript hacks to speedup development

Javascript, an omnipresent force in modern web development, empowers developers with its versatility. At the same time as developers, our perpetual quest for ingenious tips and techniques to use for amplifying our productivity and for crafting efficient code is a constant.

To satisfay this in the following article a list of tricks. Each of the 10 tricks is explained thoroughly, covering the ‘what’ (the rule itself), ‘why’ (its importance), and ‘how’ (implementing it).

For a visual representation, check out this picture featuring a superhero, to grasp these concepts visually and make them as powerful as a superhero’s abilities. Let’s delve into the enchanting world of JavaScript wizardry!

1. Destructuring Assignment

What: Destructuring assignment allows the extraction of values from arrays or objects with a concise syntax, fostering cleaner and more readable code.

Why: Enhances code clarity, particularly when handling intricate data structures.

How: Replaces traditional variable assignments with direct extraction of specific values.

// Traditional variable assignment
const data = { name: 'John', age: 30 };
const name = data.name;
const age = data.age;
// Destructuring assignment
const { name, age } = data;

2. Spread Operator

What: The spread operator (three dots: … ) enables the expansion of arrays, objects, or function arguments into separate elements. It is used also for shallow copy of an array.

Why: It is invaluable for tasks like array merging, object cloning, or dynamically passing multiple arguments to a function, reducing code verbosity.

How: These examples shows the spread syntax for creating shallow copies of arrays and objects, providing a concise and effective way to duplicate data structures and also for seamless data manipulation.

// Without spread syntax
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = arr1.concat(arr2);
// With spread syntax
const mergedArray = [...arr1, ...arr2];

// Shallow copy of an array using spread syntax
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
// Modify the copied array without affecting the original
copiedArray.push(4);
console.log('Original Array:', originalArray); // [1, 2, 3]
console.log('Copied Array:', copiedArray);     // [1, 2, 3, 4]

// Shallow copy of an object using spread syntax
const originalObject = { name: 'John', age: 30 };
const copiedObject = { ...originalObject };
// Modify the copied object without affecting the original
copiedObject.city = 'New York';
console.log('Original Object:', originalObject); // { name: 'John', age: 30 }
console.log('Copied Object:', copiedObject);     // { name: 'John', age: 30, city: 'New York' }

3. Optional Chaining

What: Optional chaining (?.) is an operator , called also ‘elvis’ operator, gracefully handles nested property or method access, preventing errors in situations where properties or methods may be undefined or null.

Why: Mitigates the need for long if statements, resulting in more concise and robust code.

How: Employ optional chaining to navigate through object structures with ease.

// Without optional chaining
const street = user.address && user.address.street;
// With optional chaining
const street = user.address?.street;

4. Nullish Coalescing Operator

What: The nullish coalescing operator (??) offers a concise way to assign default values when a variable is null or undefined.

Why: Particularly useful for eliminating tedious null checks in conditional expressions or when retrieving object values.

How: Streamline code by incorporating the nullish coalescing operator in conditional expressions.

// Without nullish coalescing operator
const username = user.username || 'Guest';
// With nullish coalescing operator
const username = user.username ?? 'Guest';

5. Promises and Async/Await

What: Promises and the Async/Await are indispensable for managing asynchronous operations in JavaScript.

Why: Promises provide a structured approach for handling asynchronous tasks, allowing developers to work with a clear chain of logic using .then() and .catch(). Async/Await, built on top of Promises, offers a more synchronous-like syntax for handling asynchronous code.

How: The first snippet demonstrates data fetching using Promises, while the second uses Async/Await. Both way contribute to a more structured and readable approach to handling asynchronous tasks in JavaScript.

Example 1: Using Promises

// Example using Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulating asynchronous data fetching
    setTimeout(() => {
      const data = { message: 'Data fetched successfully!' };
      resolve(data);
    }, 2000);
  });
}
// Consuming the Promise
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Example 2: Aync / Awair

// Example using Async/Await with a general callback
async function fetchDataAsync() {
  return new Promise(resolve => {
    // Simulating asynchronous data fetching
    setTimeout(() => {
      const data = { message: ‘Async data fetched successfully!’ };
      resolve(data);
    }, 1500);
  });
}
// Consuming the Async/Await with a general callback
async function getDataWithCallback(callback) {
  try {
    const data = await fetchDataAsync();
    callback(null, data); // Passing the data or an error to the callback
  } catch (error) {
    callback(error, null);
  }
}
// Invoking the Async function with a callback
getDataWithCallback((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

6. Memoization

What: Memoization involves caching function results based on input parameters to avoid redundant calculations and enhance the performance of repetitive or resource-intensive functions.

Why: Drastically improves performance by storing and reusing previously calculated results.

How: Implement caching effortlessly in Javascript by creating a Cache object and checking results before recalculating.

// Memoization example with factorial calculation
const factorial = (function () {
  const cache = {};
  return function memoizedFactorial(n) {
    if (n in cache) {
      return cache[n];
    } else {
      if (n === 0 || n === 1) {
        return 1;
      } else {
        const result = n * memoizedFactorial(n - 1);
        cache[n] = result;
        return result;
      }
    }
  };
})();
console.log('Factorial of 5:', factorial(5));

7. Event Delegation

What: Event delegation optimizes handling of interactions by forwarding events through a single listener attached to a parent element, rather than attaching listeners to individual elements.

Why: This approach minimizes memory consumption and enhances performance, particularly in scenarios involving the creation of dynamic or numerous elements.

How: Embrace event delegation for efficient event handling in complex scenarios.

// example using closest() method for event delegation
document.addEventListener('click', function(event) {
    const button = event.target.closest('button');
    if (button) {
        // Handle button click
    }
});

8. Debugging with Console

What: The console object is a powerful tool for debugging, offering functions like console.log(), console.warn(), console.error(), and console.table().

Why: Enhances debugging capabilities, with styling options using the %c placeholder in console.log() for visually appealing messages.

How: Elevate your debugging workflow with advanced console features.

// Console debugging
console.log(‘This is a log message’);
console.warn(‘This is a warning message’);
console.error(‘This is an error message’);
console.table([{ name: ‘Andrea', age: 30 }, { name: 'marco', age: 25 }]);

9. Performance Optimization

What: Optimize performance through techniques like minimizing DOM manipulations, reducing network requirements, and leveraging browser cache memory.

Why: Boosts code efficiency, with tools like the Chrome DevTools Performance tab aiding in identifying bottlenecks and optimization opportunities.

How: Implement performance-boosting techniques to create lightning-fast web applications. Use Performance Tab in Chrome DevTools:

• Open your website in Google Chrome.
• Right-click on the page and select “Inspect” or use Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open Chrome DevTools.
• Navigate to the “Performance” tab.
• Click the record button (a red circle) to start capturing performance data.
• Interact with your website to simulate user actions.
• Click the stop button (a red square) to stop recording.
• Reasoning on the results, you can easily identify bottlenecks and opportunities for improvement.

10. ES6 Modules

What: Usage of ES6 modules introduced a native module system for JavaScript, facilitating code organization and modularity.

Why: Encourages code encapsulation, reuse, and enhances code maintainability.

How: Harness the power of import and export statements to modularize and organize your code effectively.

Note: I know, this specific point needs a separated post because we should discuss also about a superset of JavaScript (Typescript) and also describe its advantages in term of code reusability and maintainability and, why not, link to the Object Oriented Programming (OOP) principles.

// Exporting module
export function addNumbers(a, b) {
  return a + b;
}
// Importing module
import { addNumbers } from './mathUtils.js';

Conclusion

JavaScript, a realm of boundless possibilities, unveils an array of potent features and techniques capable of revolutionizing your development workflow.

The 10 remarkable JavaScript tricks shared in this article span syntax enhancements, debugging finesse, performance optimizations, and more.

By assimilating these tips into your coding arsenal, pave the way to becoming a more robust and quality-wise applications.