JavaScript
Practice Problems

HCDD 411 — 20 Exercises covering everything from class

5

Easy

Lots of guidance

5

Easy–Medium

Good hints

5

Medium

Some hints

5

Medium–Hard

You're on your own

🎯 How to use this: Write your code in each editor and press Run Code to see the output. Use arrow keys or the buttons below to navigate between problems.

⭐ Easy — Problem 1 of 20

Say Hello to the World

🎯 Your Challenge:
Print the message "Hello, World!" to the console.

Step-by-step instructions:

Use console.log() to print a message
Put your text inside the parentheses, wrapped in quotes
Example: console.log("your text here")

💡 Reminder: You can use either single quotes '...' or double quotes "..." around your text.

✅ Expected Output: Hello, World!

YOUR CODE

// Step 1: Use console.log() to print "Hello, World!"
// Type your code below:

Output:

⭐ Easy — Problem 2 of 20

Variables About You

🎯 Your Challenge:
Create three variables to store information about a person, then log each one.

Step-by-step instructions:

Create a variable called name and set it to any name (a string)
Create a variable called age and set it to any number
Create a variable called isStudent and set it to true or false
Use console.log() to print all three variables

💡 Syntax reminder: let variableName = value; — use let to declare your variables.

✅ Example Output (your values may differ): Alice 22 true

YOUR CODE

// Step 1: Create a variable called name (string)
let name = 

// Step 2: Create a variable called age (number)
let age = 

// Step 3: Create a variable called isStudent (true or false)
let isStudent = 

// Step 4: Log all three variables
console.log(name);
console.log(age);
console.log(isStudent);

Output:

⭐ Easy — Problem 3 of 20

Positive or Negative?

🎯 Your Challenge:
Check whether a number is positive, negative, or zero, and print the result.

Step-by-step instructions:

Create a variable called number and give it any value
Use an if statement: if the number is greater than 0, print "Positive"
Use else if: if the number is less than 0, print "Negative"
Use else: otherwise print "Zero"

💡 Operators: Use > for "greater than" and < for "less than".

YOUR CODE

// Step 1: Declare the number variable
let number = -7;

// Step 2: Write your if / else if / else block
if (number > 0) {
    // print "Positive"

} else if (number < 0) {
    // print "Negative"

} else {
    // print "Zero"

}

Output:

⭐ Easy — Problem 4 of 20

Count to Ten

🎯 Your Challenge:
Use a for loop to print the numbers 1 through 10, one per line.

Step-by-step instructions:

A for loop has three parts: for (start; condition; step)
Start at i = 1
Keep going while i <= 10
Increase by 1 each time: i++
Inside the loop, use console.log(i)

💡 Template: for (let i = 1; i <= 10; i++) { ... }

✅ Expected Output: 1 2 3 ... (up to 10)

YOUR CODE

// Complete the for loop to print 1 through 10
for (let i = 1; i <= 10; i++) {
    // log i here

}

Output:

⭐ Easy — Problem 5 of 20

Add Two Numbers

🎯 Your Challenge:
Write a function called add that takes two numbers and returns their sum. Then call it and print the result.

Step-by-step instructions:

Declare a function: function add(a, b) { ... }
Inside, use the return keyword to return a + b
Call the function with two numbers: add(3, 5)
Store the result in a variable and print it

💡 Remember: return sends a value back. Without it, the function returns undefined.

✅ Expected Output: 8 15

YOUR CODE

// Step 1: Write the add function
function add(a, b) {
    return  // return a + b
}

// Step 2: Call the function and log the result
let result1 = add(3, 5);
console.log(result1);

// Step 3: Try another pair of numbers
let result2 = add(7, 8);
console.log(result2);

Output:

🔵 Easy–Medium — Problem 6 of 20

Build a Student Object

🎯 Your Challenge:
Create an object representing a student with specific properties, then access and update them.

Instructions:

Create an object called student with properties: name, age, major, and gpa
Print the student's name using dot notation: student.name
Print the student's GPA using bracket notation: student["gpa"]
Update the GPA to a new value, then print the whole object

💡 Hint: Objects look like: let obj = { key: value, key2: value2 };

YOUR CODE

// Step 1: Create the student object
let student = {
    name: "Taylor",
    age: 21,
    // add major and gpa here

};

// Step 2: Print name with dot notation
console.log(student.name);

// Step 3: Print gpa with bracket notation
console.log(student["gpa"]);

// Step 4: Update the gpa, then print the full object
student.gpa = 3.9;
console.log(student);

Output:

🔵 Easy–Medium — Problem 7 of 20

Fruits Array

🎯 Your Challenge:
Create an array of fruits and practice adding and removing items using array methods.

Instructions:

Create an array called fruits with 3 fruit names
Use push() to add "mango" to the end
Use unshift() to add "kiwi" to the beginning
Use pop() to remove the last item — store it in a variable and print it
Print the final array and its length

💡 Hint: push() / unshift() return the new length. pop() / shift() return the removed item.

YOUR CODE

// Step 1: Create the fruits array
let fruits = ["apple", "banana", "orange"];
console.log("Original:", fruits);

// Step 2: push "mango" to the end
fruits.push("mango");

// Step 3: unshift "kiwi" to the beginning
fruits.unshift("kiwi");

// Step 4: pop the last item and store it
let removed = fruits.pop();
console.log("Removed:", removed);

// Step 5: print the final array and its length
console.log("Final array:", fruits);
console.log("Length:", fruits.length);

Output:

🔵 Easy–Medium — Problem 8 of 20

Grade Classifier

🎯 Your Challenge:
Write a function that takes a numeric score and returns a letter grade.

Instructions:

Create a function called getGrade that takes a score parameter
Return "A" for 90 and above
Return "B" for 80–89
Return "C" for 70–79
Return "D" for 60–69
Return "F" for anything below 60
Test it with a few different scores

💡 Hint: Use if / else if / else. Check from the highest score down so the conditions don't overlap.

YOUR CODE

function getGrade(score) {
    if (score >= 90) {
        return "A";
    } else if (score >= 80) {
        // return "B"
    } else if (score >= 70) {
        // return "C"
    } else if (score >= 60) {
        // return "D"
    } else {
        // return "F"
    }
}

// Test your function
console.log(getGrade(95));   // A
console.log(getGrade(82));   // B
console.log(getGrade(74));   // C
console.log(getGrade(55));   // F

Output:

🔵 Easy–Medium — Problem 9 of 20

Countdown with a While Loop

🎯 Your Challenge:
Use a while loop to count down from 10 to 1, then print "Blast off!".

Instructions:

Declare a variable count starting at 10
Write a while loop that runs as long as count > 0
Inside the loop, print the current value of count
Decrease count by 1 each iteration using count--
After the loop, print "Blast off!"

💡 Warning: Don't forget to decrement count inside the loop — otherwise it will run forever!

YOUR CODE

// Step 1: Set count to 10
let count = 10;

// Step 2: Write the while loop
while (count > 0) {
    console.log(count);
    count--;  // decrease count by 1
}

// Step 3: Print "Blast off!" after the loop
console.log("Blast off!");

Output:

🔵 Easy–Medium — Problem 10 of 20

forEach – Print with Index

🎯 Your Challenge:
Use forEach to iterate over an array of colors and print each one with its index number.

Instructions:

Start with: let colors = ["red", "green", "blue", "yellow"];
Call colors.forEach() and pass a function with parameters (color, index)
Inside, print: "0: red", "1: green", etc.
Use a template literal: `${index}: ${color}` or string concatenation

💡 Hint: forEach passes the element first, the index second: arr.forEach(function(element, index) { ... })

YOUR CODE

let colors = ["red", "green", "blue", "yellow"];

// Use forEach to print each color with its index
colors.forEach(function(color, index) {
    // print something like "0: red"
    console.log(index + ": " + color);
});

Output:

🟡 Medium — Problem 11 of 20

Double With map()

🎯 Your Challenge:
Use the map() method to create a new array where every number is doubled.

Instructions:

Start with: let numbers = [1, 2, 3, 4, 5];
Use numbers.map() to return a new array where each value is multiplied by 2
Store the result in doubled and print both the original and the new array

🔑 Hint: map() takes a function that receives each element and returns the new value for that position.

YOUR CODE

let numbers = [1, 2, 3, 4, 5];

// Use map() to double each number
let doubled = numbers.map(function(num) {
    // return the doubled value
});

console.log("Original:", numbers);
console.log("Doubled:", doubled);

Output:

🟡 Medium — Problem 12 of 20

Filter the Evens

🎯 Your Challenge:
Use filter() to extract only even numbers from an array.

Instructions:

Start with: let nums = [3, 8, 15, 4, 22, 7, 10, 13];
Use nums.filter() to keep only the numbers where num % 2 === 0
Store the result in evens and print it
As a bonus: also filter out the odd numbers and print those

🔑 Hint: % is the modulo operator. n % 2 === 0 is true when n is even.

YOUR CODE

let nums = [3, 8, 15, 4, 22, 7, 10, 13];

// Filter for even numbers
let evens = nums.filter(function(num) {
    // return true if num is even
});

console.log("Even numbers:", evens);

// Bonus: filter for odd numbers
let odds = nums.filter(function(num) {
    // return true if num is odd
});

console.log("Odd numbers:", odds);

Output:

🟡 Medium — Problem 13 of 20

Object with a Method

🎯 Your Challenge:
Create an object that has both data properties and a method (a function inside an object).

Instructions:

Create an object called rectangle with properties width and height
Add a method called area that returns width * height
Add a method called perimeter that returns 2 * (width + height)
Call both methods and print the results

🔑 Hint: Inside a method, use this.width to refer to the object's own properties.

YOUR CODE

let rectangle = {
    width: 8,
    height: 5,

    area: function() {
        // return this.width * this.height
    },

    perimeter: function() {
        // return 2 * (this.width + this.height)
    }
};

console.log("Area:", rectangle.area());
console.log("Perimeter:", rectangle.perimeter());

Output:

🟡 Medium — Problem 14 of 20

Arrow Functions

🎯 Your Challenge:
Rewrite two functions using the ES6 arrow function syntax.

Instructions:

Convert function square(n) { return n * n; } into an arrow function
Convert function greet(name) { return "Hi, " + name + "!"; } into an arrow function
Then use map() with an arrow function to square each number in an array

🔑 Hint: Arrow syntax: const funcName = (param) => expression;. For a one-liner you can drop the curly braces and return keyword.

YOUR CODE

// Convert this to an arrow function:
// function square(n) { return n * n; }
const square = (n) => n * n;

// Convert this to an arrow function:
// function greet(name) { return "Hi, " + name + "!"; }
const greet = (name) => 

// Test them
console.log(square(4));       // 16
console.log(greet("Jordan")); // Hi, Jordan!

// Use an arrow function with map() to square an array
let nums = [1, 2, 3, 4, 5];
let squared = nums.map((n) => /* your expression here */);
console.log("Squared:", squared);

Output:

🟡 Medium — Problem 15 of 20

some() and every()

🎯 Your Challenge:
Use some() and every() to check conditions across an array of scores.

Instructions:

Start with: let scores = [72, 88, 95, 61, 83, 79];
Use every() to check if ALL scores are passing (above 60) — print the boolean result
Use some() to check if ANY score is an A (90 or above) — print the result
Use every() to check if ALL scores are above 90 — print the result

🔑 Hint: every() returns true only if the condition is true for all elements. some() returns true if at least one element satisfies the condition.

YOUR CODE

let scores = [72, 88, 95, 61, 83, 79];

// Are ALL scores above 60?
let allPassing = scores.every(/* your function here */);
console.log("All passing?", allPassing);

// Does ANY score reach 90 or above?
let hasAnA = scores.some(/* your function here */);
console.log("Has an A?", hasAnA);

// Are ALL scores above 90?
let allAs = scores.every(/* your function here */);
console.log("All A's?", allAs);

Output:

🔴 Medium–Hard — Problem 16 of 20

Chain map() and filter()

🎯 Your Challenge:
From an array of numbers, first double them all, then keep only the ones greater than 10. Do it in one chained expression.

Instructions:

Start with: let data = [1, 3, 5, 7, 9, 2, 4, 6];
Chain .map() and .filter() together in a single expression
First map to double each number, then filter to keep only values > 10
Print the result — no partial hints this time, you know how both methods work!

YOUR CODE

let data = [1, 3, 5, 7, 9, 2, 4, 6];

// Chain map() and filter() — double all, then keep > 10
let result = data
    .map(/* ... */)
    .filter(/* ... */);

console.log("Result:", result);

Output:

🔴 Medium–Hard — Problem 17 of 20

Array of Objects + forEach

🎯 Your Challenge:
You have an array of student objects. Use forEach to print a formatted summary for each student, and use filter to get only students with a GPA above 3.5.

Instructions:

The array is provided below — don't change it
Use forEach to print each student in the format: "Name: Alice | GPA: 3.8"
Use filter to create a new array of students with GPA > 3.5
Print the names of the filtered students using another forEach

YOUR CODE

let students = [
    { name: "Alice", gpa: 3.8 },
    { name: "Bob",   gpa: 3.1 },
    { name: "Carol", gpa: 3.9 },
    { name: "Dan",   gpa: 2.8 },
    { name: "Eve",   gpa: 3.6 }
];

// Print each student using forEach

// Filter students with GPA > 3.5

// Print the names of the filtered students

Output:

🔴 Medium–Hard — Problem 18 of 20

Build a Class

🎯 Your Challenge:
Create a BankAccount class with a balance, and methods to deposit, withdraw, and check the balance.

Instructions:

Define a class BankAccount with a constructor that takes an initial balance
Add a deposit(amount) method that increases the balance
Add a withdraw(amount) method that decreases the balance — but only if there are enough funds. If not, print "Insufficient funds"
Add a getBalance() method that returns the current balance
Create an instance and test all three methods

YOUR CODE

class BankAccount {
    constructor(balance) {
        // store the balance
    }

    deposit(amount) {
        // increase balance by amount
    }

    withdraw(amount) {
        // decrease balance only if funds are sufficient
    }

    getBalance() {
        // return the balance
    }
}

// Test it
let account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance());  // 1500
account.withdraw(200);
console.log(account.getBalance());  // 1300
account.withdraw(2000);             // Insufficient funds

Output:

🔴 Medium–Hard — Problem 19 of 20

Word Frequency Counter

🎯 Your Challenge:
Given an array of words, write a function that returns an object showing how many times each word appears.

Instructions:

Create a function countWords(words) that takes an array of strings
Use forEach to loop through the array
Build and return an object where each key is a word and each value is its count
If the word already exists in the object, increment its count. If not, initialize it to 1

YOUR CODE

function countWords(words) {
    let counts = {};

    words.forEach(function(word) {
        // if counts[word] already exists, increment it
        // otherwise set it to 1
    });

    return counts;
}

let words = ["apple", "banana", "apple", "cherry", "banana", "apple"];
console.log(countWords(words));
// Expected: { apple: 3, banana: 2, cherry: 1 }

Output:

🔴 Medium–Hard — Problem 20 of 20

Student Roster Manager

🎯 Your Challenge:
Build a Roster class that manages a list of students. It should support adding students, removing them by name, and computing the average GPA of the class.

Instructions:

The Roster class should store an array of student objects internally
addStudent(name, gpa) — push a new { name, gpa } object to the list
removeStudent(name) — filter out the student with the matching name
averageGPA() — return the average GPA of all students (return 0 if the list is empty)
printRoster() — use forEach to print every student's name and GPA

YOUR CODE

class Roster {
    constructor() {
        this.students = [];
    }

    addStudent(name, gpa) {
        // push { name, gpa } to this.students
    }

    removeStudent(name) {
        // filter out student with matching name
    }

    averageGPA() {
        // return average GPA, or 0 if no students
    }

    printRoster() {
        // forEach to print each student
    }
}

// Test it
let roster = new Roster();
roster.addStudent("Alice", 3.8);
roster.addStudent("Bob", 3.2);
roster.addStudent("Carol", 3.9);
roster.printRoster();
console.log("Average GPA:", roster.averageGPA());
roster.removeStudent("Bob");
console.log("After removing Bob:");
roster.printRoster();
console.log("New Average GPA:", roster.averageGPA());

Output:

JavaScriptPractice Problems

Say Hello to the World

Step-by-step instructions:

Variables About You

Step-by-step instructions:

Positive or Negative?

Step-by-step instructions:

Count to Ten

Step-by-step instructions:

Add Two Numbers

Step-by-step instructions:

Build a Student Object

Instructions:

Fruits Array

Instructions:

Grade Classifier

Instructions:

Countdown with a While Loop

Instructions:

forEach – Print with Index

Instructions:

Double With map()

Instructions:

Filter the Evens

Instructions:

Object with a Method

Instructions:

Arrow Functions

Instructions:

some() and every()

Instructions:

Chain map() and filter()

Instructions:

Array of Objects + forEach

Instructions:

Build a Class

Instructions:

Word Frequency Counter

Instructions:

Student Roster Manager

Instructions:

JavaScript
Practice Problems