Javascript & Typescript

10 Common Issues JavaScript Developers Face and How to Solve Them

0

JavaScript developers face a variety of challenges every day. This article introduces 10 common problems and their solutions. We hope this helps you address these issues quickly and efficiently.

pixabay

1. Handling Arrays

Working with arrays is one of the fundamental tasks in JavaScript. Let’s consider the following array:

const products = [
  { id: 1, name: "Apple", price: 1.99, inStock: true },
  { id: 2, name: "Banana", price: 0.79, inStock: false },
  { id: 3, name: "Orange", price: 2.49, inStock: true },
];

To filter products that are in stock and sort them by price in ascending order, you can use the following code:

const availableProducts = products.filter(product => product.inStock)
.sort((a, b) => a.price - b.price);

This will result in `availableProducts` containing only the products that are in stock, sorted by price. The use of higher-order functions `filter` and `sort` makes this both simple and powerful.

2. DOM Manipulation

DOM (Document Object Model) manipulation is a common task for JavaScript developers. Here’s a simple example of changing a heading upon a button click:

<!DOCTYPE html>
<html>
<body>
  <h1 id="heading">Welcome to our website!</h1>
  <button id="change-button">Change Heading</button>

  <script>
    const changeButton = document.getElementById("change-button"); 
    changeButton.addEventListener("click", function(event) { 
      const heading = document.getElementById("heading"); 
      heading.textContent = "This heading has been changed!";
    });
  </script>
</body>
</html>

In this example, clicking the button changes the text of the `h1` element.

3. Asynchronous Programming

Asynchronous programming is crucial in modern JavaScript. Here’s an example using `Promise` and `async/await`:

function waitOneSecond() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I was called after one second.");
    }, 1000);
  });
}

async function waitOneSecondAsync() {
  try {
    const message = await waitOneSecond();
    console.log(message);
  } catch (error) {
    console.error(error);
  }
}

waitOneSecondAsync();

This code prints a message after one second.

4. Error Handling

Code can throw exceptions at any time. Here’s a simple example of handling an exception:

try {
  throw new Error("Something is not right here.");
} catch (e) {
  console.log("Got an error: " + e.message);
} finally {
  console.log("This always executes.");
}

This code prints the error message when an exception occurs and always runs the `finally` block.

5. Working with Objects

Objects are essential in JavaScript. Here’s an example of creating an object and accessing its properties:

let campingSpot = {
  name: "Willow Creek",
  location: "Big Sur"
};

console.log("We’re going camping at " + campingSpot.name);

You can also define an object in a class structure:

class CampingSpot {
  constructor(name, location) {
    this.name = name;
    this.location = location;
  }
  
  describeWater() {
    console.log("The water at " + this.name + " is very cold.");
  }
}

let spot = new CampingSpot("Willow Creek", "Big Sur");
spot.describeWater();

6. Using Remote APIs

APIs are useful for fetching external data. Here’s an example using the Fetch API:

async function getStarWarsFilms() {
  try {
    const response = await fetch('https://swapi.dev/api/films');
    if (!response.ok) {
      throw new Error(`Error fetching Star Wars films: ${response.status}`);
    }
    const data = await response.json();
    console.log(data.results);
  } catch (error) {
    console.error("Error:", error);
  }
}

getStarWarsFilms();

This code fetches a list of Star Wars films.

7. String Manipulation

Strings are frequently used in JavaScript. Here’s an example of manipulating a string:

const text = "The Tao that can be told is not the eternal Tao.";
const newText = text.replace(/told/g, "spoken");
console.log(newText);

This code replaces “told” with “spoken”.

8. Converting JSON Objects to Strings

Converting JSON objects to strings and vice versa is a common task.

let website = {
  name: "InfoWorld",
  url: "www.infoworld.com"
};

let myString = JSON.stringify(website);
console.log(JSON.parse(myString));

9. Simple Date Calculations

JavaScript’s `Date` object makes it easy to work with dates.

const today = new Date();
console.log(today.getFullYear());

10. Creating, Finding, and Counting Numbers

JavaScript handles numbers efficiently. Here are a few examples:

let pi = 3.14159;
console.log(Math.ceil(pi)); // 4
console.log(Math.floor(pi)); // 3
console.log(Math.max(100, 5, 10, 73)); // 100

Leave a Reply