JavaScript Exercises Solved Step by Step: A Practical Guide

Reading documentation and watching tutorials is great, but in programming, true understanding comes when you get your hands dirty writing code. JavaScript is the language of the web, and mastering its logic requires constant practice.

In this article, we are going to solve together some of the most common JavaScript exercises, from string manipulation to array methods. These are classics that will help you think like a programmer and will even be useful for technical interviews. Let's code!

Exercise 1: Reverse a String

The Problem: Write a function that takes a string and returns it reversed. For example, if we pass "hello", it should return "olleh".

Step-by-step: In JavaScript, strings do not have a native method to reverse themselves, but arrays do (reverse). So the trick is: convert the string into an array, reverse the array, and then join it back into a string.

function reverseString(text) {
  // 1. split('') separates each letter into an array
  // 2. reverse() reverses the order of the array
  // 3. join('') joins the array back into a string
  return text.split('').reverse().join('');
}

console.log(reverseString('JavaScript')); // Prints: tpircSavaJ

    

Exercise 2: Filter an Array of Objects

The Problem: You have an array of users with their name and age. You need to extract only those users who are adults (18 years or older).

Step-by-step: This is an extremely common scenario in real-world development. The best way to do it is by using the array method .filter(). This method iterates through each element of the array and, if the condition returns true, it includes it in the new resulting array.

const users = [
  { name: 'Anna', age: 15 },
  { name: 'Charles', age: 28 },
  { name: 'Lucy', age: 18 }
];

// We use filter with an arrow function
const adults = users.filter(user => user.age >= 18);

console.log(adults);
// Result: [{ name: 'Charles', age: 28 }, { name: 'Lucy', age: 18 }]

    

Exercise 3: The Classic FizzBuzz

The Problem: Write a program that prints the numbers from 1 to 15. But for multiples of 3, print "Fizz" instead of the number, and for the multiples of 5, print "Buzz". For numbers which are multiples of both (3 and 5), print "FizzBuzz".

Step-by-step: This is one of the most famous interview exercises in the world. We will use a for loop and the modulo operator % (which gives us the remainder of a division). If the remainder of dividing by 3 is 0, it is a multiple. Important: The double check (3 and 5) must go first, otherwise, the individual condition will catch the number before it.

for (let i = 1; i <= 15; 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);
  }
}

    

Conclusion

Writing code is all about solving problems. As we have seen, complex tasks can be solved by combining simple tools from the language: array methods like .split() or .filter(), loops, and conditionals. I encourage you to open your browser's console or your code editor and try changing the variables in these exercises. The best way to learn JavaScript is by breaking it and fixing it!