JavaScript Problem Solving

JavaScript is a very popular, widely used, and easy programming language. It is popular among developers because of its versatile nature and powerful features. Mastering JavaScript requires a deep understanding of concepts and practice for problem-solving.

In this article, we will discuss 10 JavaScript problems that anyone can practice to have a good understanding of JavaScript concepts. We will discuss problems of varying difficulty, starting with beginner-friendly and then moving towards more complex problems. These 10 problems will be helpful to practice concepts and will also invoke problem-solving ability with a variety of approaches. We set off on the journey of JavaScript problem-solving in this extensive article. Moving past the straightforward "Hello, World!" challenge, we reveal a set of ten unique problems that have been carefully chosen to span a range of skill levels.

Our goal as we go through these issues is to develop a problem-solving attitude in addition to strengthening our coding abilities. These difficulties are not isolated; rather, they serve as entry points to practical uses. From the fundamental "Hello, World!" to the complexities of asynchronous fetching, this article acts as a compass, pointing both newcomers and experienced programmers in the direction of JavaScript proficiency. So come along for this investigation of JavaScript Problem Solving, whether you are new to the language or want to hone your abilities. One issue at a time, let's peel back the layers of this flexible language.

Problem 1: Hello, World!

This is the very basic level task that poses the problem of how to print a text on the console. To solve this, you need to know the tool to print the output on the user console. To do so in JavaScript, we use the console.log() function. The text to be printed should be passed as an argument to the function in quotes. The below example presents the solution to this problem.

Code:

function sayHello() {
  console.log("Hello, World!");
}
sayHello();

Output:

"Hello, World!"

Problem 2: Print a table of any natural number

The second problem of printing the table of any natural number is another basic-level problem that requires basic mathematics and operators and iterators in JavaScript to solve. Multiple approaches can be taken. The code below functions and loops to solve this problem.

Code:

function printMultiplicationTable(number) {
  if (number <= 0 || !Number.isInteger(number)) {
    console.log("Please enter a valid natural number.");
    return;
  }
  console.log(`Multiplication Table for ${number}:`);
  for (let i = 1; i <= 10; i++) {
    console.log(`${number} x ${i} = ${number * i}`);
  }
}
// Example: Print the multiplication table for 5
printMultiplicationTable(5);

Output:

5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50

Problem 3: Factorial Calculation

For instance, 5 × 4 × 3 × 2 × 1 is the factorial of 5, and 120 is the result. Calculating the factorial of a number is a problem of intermediate complexity. It requires mathematical formulas and basic programming methodologies, like loops, functions, and recursion. There are two popular approaches to solving this problem: one is using loops, and another is using recursion. We will discuss both approaches. Go through each of them, understand the code well, and try to implement the solution in its most feasible way.

Solution 1:

Here, we will use loops to find the factorial of a given number.

Code:

function factorialUsingLoop(number) {
  if (number < 0 || !Number.isInteger(number)) {
    console.log("Please enter a non-negative integer.");
    return;
  }
  let result = 1;
  for (let i = 2; i <= number; i++) {
    result *= i;
  }
  console.log(`Factorial of ${number}: ${result}`);
}
// Example: Calculate the factorial of 5
factorialUsingLoop(5);

Output:

Factorial of 5: 120

Solution 2:

Here, we will use recursion to find the factorial of a given number. Recursion is when a function is called within the same function's body.

Code:

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
console.log(factorial(5)); // Output: 120

Output:

Factorial of 5: 120

Problem 4: Calculate the sum of numbers within an array

This task is another basic-level mathematical problem, but it also requires intermediate-level knowledge of a few concepts, such as conditional statements, arrays, and constants. Below is the solution to this problem using conditional statements. To ensure its correct functioning in all scenarios, it is suggested that the program be checked with multiple sample array sets.

Code:

function calculateArraySum(arr) {
  if (!Array.isArray(arr)) {
    console.log("Please provide a valid array of numbers.");
    return;
  }
  const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log(`Sum of the numbers in the array: ${sum}`);
}
// Example: Calculate the sum of numbers in an array
const numbersArray = [1, 2, 3, 4, 5];
calculateArraySum(numbersArray);

Output:

The sum of the numbers in the array: 15

Problem 5: Palindrome Check of a Sequence in JavaScript

To determine whether a string is a palindrome, you may construct a JavaScript function that compares characters starting at the end and ending at the beginning. Here is a simple example of how to solve this problem. A palindrome is a string of letters that, when read both forward and backward, has the same meaning regardless of direction. Words, sentences, numerals, or whole phrases can be among them. The symmetrical character arrangement is the essential feature. There are a few examples: "level," "radar," and "civic." Spaces, capitalization, and punctuation are frequently overlooked in phrases and sentences.

Code:

function isPalindrome(str) {
  // Remove non-alphanumeric characters and convert to lowercase
  const cleanedStr = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase();
  // Compare the original and reversed strings
  return cleanedStr === cleanedStr.split('').reverse().join('');
}
// Example: Check if "radar" is a palindrome
console.log(isPalindrome("radar")); // Output: true
// Example: Check if "hello" is a palindrome
console.log(isPalindrome("hello")); // Output: false

Output:

true
false

Problem 6: Printing a FizzBuzz Pattern in JavaScript

This is a very traditional programming problem. The problem states that a FizzBuzz program should loop through all of the natural numbers, ranging from 1 to n. It should print "Fizz" for any number that is divisible by 3, "Buzz" for any number that is divisible by 5, and "FizzBuzz" if a number is divisible by both 3 and 5. Below is the solution for this classical problem.

Code:

function fizzBuzz(n) {
  for (let i = 1; i <= n; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      console.log("FizzBuzz");
    } else if (i % 3 === 0) {
      console.log("Fizz");
    } else if (i % 5 === 0) {
      console.log("Buzz");
    } else {
      console.log(i);
    }
  }
}

fizzBuzz(15);

Output:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

Problem 7: Find Prime Numbers

In this approach, we are using conditional statements and loops within a function. Other than this, try other approaches to solve this problem. A common challenge in mathematics and computer science is finding prime integers. Natural numbers larger than one that have no other positive divisors than one is known as prime numbers. This JavaScript program shows you how to find prime integers.

Code:

function isPrime(number) {
  if (number <= 1) {
    return false;
  }
  // Check for divisibility from 2 to the square root of the number
  for (let i = 2; i <= Math.sqrt(number); i++) {
    if (number % i === 0) {
      return false; // If divisible, it's not a prime number
    }
  }

  return true; // If not divisible, it's a prime number
}
function findPrimesInRange(start, end) {
  const primes = [];
  for (let i = start; i <= end; i++) {
    if (isPrime(i)) {
      primes.push(i);
    }
  }
  return primes;
}
// Example: Find prime numbers between 1 and 20
const primeNumbers = findPrimesInRange(1, 20);
console.log("Prime Numbers:", primeNumbers);

Output:

Prime Numbers: [
   2,  3,  5,  7,
  11, 13, 17, 19
]

Problem 8: Give back how many vowels are in a string.

JavaScript may be used to count the number of vowels in the string by creating a function that iterates over each letter in the string and detects if it is a vowel. After using to LowerCase() to convert the text to lowercase, the function uses a Set named vowels to keep the vowels. A for...of the loop is used to go through each letter in the lowercase string after initializing a counter variable called vowel count. A character's vowelCount is increased if it is. The function may be used with different strings to count vowels in different inputs, and it returns the overall count of vowels.

Code:

function countVowels(str) {
  // Convert the string to lowercase to handle both uppercase and lowercase vowels
  const lowerCaseStr = str.toLowerCase();

  // Define a set of vowels
  const vowels = new Set(['a', 'e', 'i', 'o', 'u']);

  // Initialize a counter for vowels
  let vowelCount = 0;

  // Iterate through each character in the string
  for (let char of lowerCaseStr) {
    // Check if the character is a vowel
    if (vowels.has(char)) {
      vowelCount++;
    }
  }

  // Return the total count of vowels
  return vowelCount;
}

// Example: Count vowels in the string "Hello World"
const vowelCount = countVowels("Hello World");
console.log("Number of vowels:", vowelCount);

Output:

Number of vowels: 3

Problem 9: Object Manipulation

Here's an explanation and sample of how to manipulate objects with JavaScript. Programming frequently involves manipulating objects, particularly in JavaScript, where objects are essential to data representation. The work entails changing, adding, or removing an object's attributes in accordance with predetermined specifications.

Code:

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 25,
  occupation: "Engineer",
};

// Adding a Property
person.city = "New York";

// Modifying a Property
person.age = 26;

// Deleting a Property
delete person.occupation;

// Object Iteration
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Object Spread for Creating a Modified Copy
let updatedPerson = { ...person, age: 27, city: "San Francisco" };

// Displaying Updated Object
console.log("Original Person:", person);
console.log("Updated Person:", updatedPerson);

Output:

firstName: John
lastName: Doe
age: 26
city: New York
Original Person: { firstName: 'John', lastName: 'Doe', age: 26, city: 'New York' }
Updated Person: { firstName: 'John', lastName: 'Doe', age: 27, city: 'San Francisco' }

Problem 10: Asynchronous Fetch in JavaScript

Asynchronous Fetch is a common problem when working with web development, particularly in JavaScript. It involves making asynchronous HTTP requests to fetch data from a remote server. The asynchronous retrieve pattern enhances the user experience in web applications by enabling data retrieval without interfering with the execution of other programs. In modern web development, the fetch API is commonly used for this purpose. An asynchronous HTTP request with a URL as a parameter and a resolved promise as a response is provided by the fetchData function.

The data is extracted from the response JSON by parsing it using response.json(); the retrieved data is then returned as a resolved promise. The catch method takes care of any mistakes that arise during the retrieve process, while the then function manages the successful resolution of the promise. Here's a step-by-step explanation of how to perform an asynchronous fetch in JavaScript:

Code:

// Function to perform asynchronous fetch
async function fetchData(url) {
  try {
    // Using the fetch API to make an asynchronous HTTP request
    const response = await fetch(url);

    // Checking if the response status is OK (status code 200-299)
    if (!response.ok) {
      throw new Error(`Error: ${response.status} - ${response.statusText}`);
    }

    // Parsing the response JSON
    const data = await response.json();

    // Returning the fetched data
    return data;
  } catch (error) {
    // Handling errors, such as network issues or invalid response
    console.error("Fetch Error:", error.message);
    throw error; // Propagate the error for further handling
  }
}

// Example: Fetching data from a JSON API
const apiUrl = "https://jsonplaceholder.typicode.com/todos/1";

// Calling the fetchData function with the API URL
fetchData(apiUrl)
  .then((data) => {
    // Handling the fetched data
    console.log("Fetched Data:", data);
  })
  .catch((error) => {
    // Handling errors from the fetchData function
    console.error("Error:", error.message);
  });

Output:

Fetched Data: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }

In conclusion, solving JavaScript problems is a crucial part of learning the language and becoming a skilled developer. This article covers ten different JavaScript problems encompassing basic to advanced ideas and abilities. These exercises are intended to improve your knowledge of JavaScript and develop your problem-solving skills.

Hello, World!: This problem introduces basic console output using console.log().
Print Table of Any Natural Number: Demonstrates the use of functions, loops, and basic mathematical operations.
Factorial Calculation: Explores factorial calculation using both loops and recursion, showcasing different problem-solving approaches.
Calculate the Sum of Numbers within an Array: Utilizes array manipulation, conditional statements, and mathematical operations.
Palindrome Check: Focuses on string manipulation, character comparison, and algorithmic logic.
FizzBuzz: A classic problem demonstrating conditional statements and loops for a common programming scenario.
Find Prime Numbers: Introduces the concept of prime numbers, utilizing conditional statements and mathematical operations.
Count Vowels in a String: Involves string manipulation, iteration, and conditional statements.
Object Manipulation: Demonstrates basic manipulation operations on JavaScript objects, including addition, modification, deletion, and iteration.
Asynchronous Fetch in JavaScript: Explores the asynchronous nature of JavaScript using the fetch API for making HTTP requests.