7 Bad Ways to Write JavaScript

Photo by Pankaj Patel on Unsplash

Hey there, JavaScript enthusiasts! Today, we’re going to dive into a topic that’s as important as knowing the right way to write JavaScript: the bad ways to do it! Yep, we’ll explore seven common pitfalls that might trip you up and leave you scratching your head.

So, let’s buckle up and prepare ourselves for some wild examples of what not to do when writing JavaScript.

1. Using Global Variables Galore 🌍

Imagine this: you’ve got a massive project, and instead of being organized, you decide to sprinkle global variables all over the place.

Sure, it might work initially, but as your codebase grows, these variables will start colliding, leading to unexpected bugs and hard-to-find errors.

Avoid polluting the global scope by properly encapsulating your code within functions and modules.

Bad:

// Global variables everywhere!
let user = 'John';
let cartTotal = 0;

function addToCart(itemPrice) {
  cartTotal += itemPrice;
}

function checkout() {
  // Do something with the cartTotal
}

Good:

// Encapsulate in a function to avoid polluting global scope
(function () {
  let user = 'John';
  let cartTotal = 0;

  function addToCart(itemPrice) {
    cartTotal += itemPrice;
  }

  function checkout() {
    // Do something with the cartTotal
  }
})();

2. Callback Hell 😱

Have you ever seen those pyramid-like blocks of callbacks nested inside each other? This is the infamous “callback hell”!

It happens when you handle asynchronous operations in a less-than-organized way, making your code difficult to read and maintain.

Instead, embrace modern features like async/await or use libraries like Promise to tame this monster.

Bad:

function getUserDetails(userId, callback) {
  getUser(userId, function (user) {
    getOrders(user.id, function (orders) {
      getOrderDetails(orders[0].id, function (orderDetails) {
        // And it goes on and on...
      });
    });
  });
}

Good:

async function getUserDetails(userId) {
  try {
    const user = await getUser(userId);
    const orders = await getOrders(user.id);
    const orderDetails = await getOrderDetails(orders[0].id);
    // Much better!
  } catch (error) {
    // Handle errors here
  }
}

3. Neglecting Error Handling 🚨

Errors happen, and ignoring them won’t make them go away! Failing to handle errors properly can lead to disastrous consequences.

Whether it’s an API request, a file operation, or any other operation with potential issues, always implement proper error handling to keep your code stable and reliable.

Bad:

function divide(a, b) {
  return a / b;
}

Good:

function divide(a, b) {
  if (b === 0) {
    throw new Error('Cannot divide by zero!');
  }
  return a / b;
}

4. Relying on eval() 🧨

Sure, eval() can be powerful, but with great power comes great responsibility!

Using eval() to execute dynamic code can open a Pandora's box of security vulnerabilities.

It's a potential gateway for injection attacks, and in most cases, there are better and safer alternatives.

Bad:

function executeCode(code) {
  eval(code);
}

Good:

function executeCode(code) {
  // A safer approach would be using Function constructor
  const myFunction = new Function(code);
  myFunction();
}

5. Not Using Strict Mode 😲

Remember those times when JavaScript silently let you get away with sloppy code? Well, not anymore!

Introduce yourself to the wonders of strict mode. It helps you write more robust code by catching common mistakes and discouraging bad practices.

Bad:

function myFunction() {
  x = 10; // Oops, missing 'var', 'let', or 'const'!
  console.log(x);
}

Good:

function myFunction() {
  'use strict';
  let x = 10;
  console.log(x);
}

6. Neglecting Code Formatting 🙈

Ever come across a wall of code that looks like a battlefield? Poor code formatting makes your code difficult to read and understand.

Take the time to format your code properly, use consistent indentation, and follow established style guides like the Airbnb JavaScript Style Guide or the Google JavaScript Style Guide.

Bad:

function myFunction(){console.log('Hello');let x=5;if(x>0){console.log('x is positive');}}

Good:

function myFunction() {
  console.log('Hello');
  let x = 5;
  if (x > 0) {
    console.log('x is positive');
  }
}

7. Reinventing the Wheel 🎡

JavaScript has an incredibly vast ecosystem with libraries and frameworks that can solve common problems efficiently.

Don’t try to reinvent the wheel by writing everything from scratch.

Instead, leverage the power of existing tools, learn from others, and focus on solving the unique challenges of your project.

Bad:

// Implementing your own AJAX request
function ajaxRequest(url, method, data, callback) {
  // ... lots of code ...
}

// Don't do this!

Good:

// Using a well-established library like Axios
axios.get(url)
  .then(function (response) {
    // Handle the response
  })
  .catch(function (error) {
    // Handle errors
  });

And there you have it, folks! We’ve explored seven bad ways to write JavaScript.

Remember, writing clean and maintainable code is crucial for the longevity and success of your projects.

Avoid these pitfalls, learn from your mistakes, and strive to become a better JavaScript developer each day.

Connect with me on Medium ✍ : https://medium.com/@Evelyn.Taylor