JavaScript Interview Questions（2024）

Question: How do you handle errors in JavaScript?

Answer:

In JavaScript, errors are managed using a combination of try-catch blocks , throwing exceptions , and error objects . These mechanisms allow developers to gracefully handle unexpected issues in the code, ensuring that the program doesn’t crash and can respond appropriately to errors. Here are the primary ways to handle errors in JavaScript:

---

1. try…catch Block The try...catch** statement is the most common way to handle errors in JavaScript. It allows you to define a block of code to try and execute, and if an error occurs, it catches the error and allows you to handle it gracefully.Syntax:

try {
  // Code that may cause an error
} catch (error) {
  // Code to handle the error
}

• try block : Contains the code that you want to execute. If any error occurs here, the flow is immediately transferred to the catch block.

• catch block : Catches the error and allows you to handle it, typically by logging it or providing a fallback.

• error : The object that represents the error caught, which contains information about the error (such as the message, stack trace, etc.). Example:

try {
  let result = someFunction(); // might throw an error
} catch (error) {
  console.error("An error occurred: ", error.message);  // Handling the error
}

• If someFunction() throws an error, the code in the catch block is executed.

• The error.message provides the error message that was thrown.

---

2. Throwing Errors You can throw your own errors using the throw statement. This is useful when you want to generate a custom error in response to certain conditions, such as invalid inputs or failed validations.Syntax:

throw new Error("Custom error message");

You can throw any object, but most commonly, an Error object (or its derived types) is used to provide a stack trace along with a message.Example:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero is not allowed");
  }
  return a / b;
}

try {
  let result = divide(10, 0); // This will throw an error
} catch (error) {
  console.error(error.message);  // Outputs: Division by zero is not allowed
}

• Custom error messages : When you use throw, you can define the error message that will be displayed.

• Error object : You can also throw instances of custom error classes if you want to provide more detailed error handling.

---

3. Custom Error Types (Extending Error Class) Sometimes, you might want to create custom error types to represent specific error conditions. You can extend the built-in Error class to create more meaningful error types.Example:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError"; // Custom error name
  }
}

function validateUser(user) {
  if (!user.name) {
    throw new ValidationError("User must have a name");
  }
}

try {
  validateUser({});  // This will throw a ValidationError
} catch (error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);  // Custom error handling
  } else {
    console.error("An unexpected error occurred:", error.message);
  }
}

• Custom errors : By extending the Error class, you can create specific error types (e.g., ValidationError, DatabaseError).

• Error type checking : You can check the error type using instanceof to handle different errors differently.

---

4. Error Object The Error object in JavaScript contains useful information about the error. The Error object has several properties:

• name : The name of the error (e.g., "TypeError", "ReferenceError", "SyntaxError").

• message : A description of the error.

• stack : A stack trace, which helps in debugging by showing where the error occurred in the code. Example:

try {
  let result = someUndefinedFunction();  // ReferenceError
} catch (error) {
  console.log(error.name);     // ReferenceError
  console.log(error.message);  // someUndefinedFunction is not defined
  console.log(error.stack);    // Stack trace
}

---

5. Handling Asynchronous Errors When working with asynchronous code (such as Promises or async/await), errors are handled differently since they don’t immediately throw an error. Here’s how you can handle errors in asynchronous code.a. Promises: In the context of Promises, errors are usually caught by using the .catch() method, which handles any rejection.Example with Promises:

function fetchData() {
  return new Promise((resolve, reject) => {
    let success = false;  // Simulating a failure
    if (success) {
      resolve("Data fetched successfully");
    } else {
      reject("Error fetching data");
    }
  });
}

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));  // Catching the error

b. async/await: When using async/await, you can handle errors with a try...catch block, just like with synchronous code.Example with async/await:

async function getData() {
  try {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Failed to fetch data:", error.message);  // Catching async errors
  }
}

getData();

• await pauses the execution until the Promise is resolved or rejected.

• try...catch is used to catch any errors that occur in the asynchronous function.

---

6. Logging Errors for Debugging For debugging purposes, you can log errors to the console or to external logging systems (e.g., Sentry, LogRocket). It’s helpful to include the stack trace and other relevant error information for easier debugging. Example:

try {
  let data = JSON.parse('{"name": "John"}');
} catch (error) {
  console.error("Error details:", error);  // Logs the error object with message and stack trace
}

---

7. Error Handling Best Practices

1. Provide Detailed Error Messages : Always include descriptive error messages that explain what went wrong.

2. Use Specific Error Types : Create custom error classes for different scenarios to handle them accordingly.

3. Avoid Silent Failures : Don’t silently catch errors unless you have a good reason. Always handle them properly and provide meaningful feedback.

4. Log Errors for Debugging : Ensure that errors are logged, especially in production environments, so that you can diagnose and fix issues promptly.

5. Graceful Degradation : Instead of letting your app crash, provide fallbacks or alternative behaviors when an error occurs.

---

Summary:

• try...catch blocks are used to handle errors in synchronous code.

• throw allows you to create custom errors.

• Custom error types can be created by extending the Error class.

• Asynchronous errors are handled using .catch() for Promises or try...catch for async/await.

• Always log errors to help with debugging, and aim for clear, descriptive error messages to guide troubleshooting.

Question: What are JavaScript’s methods for iterating over arrays?

Answer:

JavaScript provides several methods for iterating over arrays, allowing you to loop through elements and perform actions on each element. These methods offer different levels of flexibility and are suitable for different use cases. Here are the most common methods for iterating over arrays:

---

1. for Loop

The traditional for loop is one of the most flexible methods for iterating over arrays. You can control the loop’s index and termination condition manually.

Syntax:

for (let i = 0; i < array.length; i++) {
  // Access array[i]
}

Example:

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• Pros: Offers complete control over the iteration process.
• Cons: Syntax can be more verbose compared to other methods.

---

2. for...of Loop

The for...of loop is a simpler and cleaner way to iterate over array elements. It directly gives you the element (not the index).

Syntax:

for (let element of array) {
  // Access element
}

Example:

let arr = [1, 2, 3, 4, 5];
for (let num of arr) {
  console.log(num);
}

• Pros: Simple and easy to read, directly gives you the value.
• Cons: Does not provide access to the index directly.

---

3. forEach() Method

The forEach() method executes a provided function once for each element in the array. It allows you to perform side effects or operations on each item.

Syntax:

array.forEach(function(element, index, array) {
  // Access element, index, and array
});

Example:

let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index) => {
  console.log(`Element at index ${index}: ${num}`);
});

• Pros: Concise and easy to use, allows access to the current element, index, and the array.
• Cons: Cannot be broken or skipped early (i.e., break and return do not work).

---

4. map() Method

The map() method creates a new array populated with the results of calling a provided function on every element in the array. It’s ideal when you want to transform the array.

Syntax:

let newArray = array.map(function(element, index, array) {
  return transformedElement;
});

Example:

let arr = [1, 2, 3, 4, 5];
let squared = arr.map(num => num * num);
console.log(squared);  // [1, 4, 9, 16, 25]

• Pros: Returns a new array, ideal for transforming data.
• Cons: Does not modify the original array; creates a new array.

---

5. filter() Method

The filter() method creates a new array with all elements that pass a test implemented by the provided function.

Syntax:

let newArray = array.filter(function(element, index, array) {
  return condition;
});

Example:

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4]

• Pros: Useful for filtering elements based on a condition.
• Cons: Like map(), it creates a new array and does not modify the original.

---

6. reduce() Method

The reduce() method applies a function to each element in the array (from left to right) and reduces it to a single value (like summing the elements or accumulating data).

Syntax:

let result = array.reduce(function(accumulator, currentValue, index, array) {
  return accumulator + currentValue;  // for example, summing elements
}, initialValue);

Example:

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

• Pros: Extremely powerful for aggregating or accumulating values.
• Cons: Can be harder to understand initially and is not suitable for every use case.

---

7. some() Method

The some() method checks if at least one element in the array passes the provided test. It returns true if the condition is met for any element and false otherwise.

Syntax:

let result = array.some(function(element, index, array) {
  return condition;
});

Example:

let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven);  // true (since there are even numbers in the array)

• Pros: Useful for quickly checking if at least one element meets a condition.
• Cons: Stops as soon as it finds a match (no need to iterate over all elements).

---

8. every() Method

The every() method checks if every element in the array passes the provided test. It returns true if the condition is met for all elements and false otherwise.

Syntax:

let result = array.every(function(element, index, array) {
  return condition;
});

Example:

let arr = [1, 2, 3, 4, 5];
let allPositive = arr.every(num => num > 0);
console.log(allPositive);  // true

• Pros: Useful for ensuring that every element meets a condition.
• Cons: Stops as soon as one element does not meet the condition.

---

9. find() Method

The find() method returns the first element in the array that satisfies the provided testing function. If no element matches, it returns undefined.

Syntax:

let result = array.find(function(element, index, array) {
  return condition;
});

Example:

let arr = [5, 12, 8, 130, 44];
let found = arr.find(num => num > 10);
console.log(found);  // 12 (first element greater than 10)

• Pros: Useful for retrieving the first matching element.
• Cons: Stops after finding the first match.

---

10. findIndex() Method

The findIndex() method is similar to find(), but instead of returning the element, it returns the index of the first element that satisfies the condition. If no match is found, it returns -1.

Syntax:

let result = array.findIndex(function(element, index, array) {
  return condition;
});

Example:

let arr = [5, 12, 8, 130, 44];
let index = arr.findIndex(num => num > 10);
console.log(index);  // 1 (index of the first element greater than 10)

• Pros: Useful when you need the index of the element that matches the condition.
• Cons: Similar to find(), stops after finding the first match.

---

11. flatMap() Method

The flatMap() method first maps each element using a mapping function and then flattens the result into a new array. It is a combination of map() and flat().

Syntax:

let result = array.flatMap(function(element, index, array) {
  return transformedElement;
});

Example:

let arr = [1, 2, 3];
let flattened = arr.flatMap(num => [num, num * 2]);
console.log(flattened);  // [1, 2, 2, 4, 3, 6]

• Pros: Combines map() and flat() in one step for flattening the result of a transformation.
• Cons: Only flattens the array by one level.

---

Summary:

JavaScript provides a variety of methods for iterating over arrays, each with different use cases:

• for and for...of loops provide manual and simple iteration.
• forEach() is used for side-effect operations without returning a new array.
• map(), filter(), reduce() are used for transforming, filtering, and reducing the array.
• some(), every(), find(), findIndex() are used for testing conditions and retrieving elements or indexes.
• flatMap() combines mapping and flattening in one operation.

Each method has its strengths and should be chosen based on the specific task you’re working on.

Read More

If you can’t get enough from this article, Aihirely has plenty more related information, such as JavaScript interview questions, JavaScript interview experiences, and details about various JavaScript job positions. Click here to check it out.