Stop Reading, Start Doing: Level Up Your Skills with 10 JavaScript Exercises
100 Exercise Guide
If you’ve ever tried to learn a programming language, you know the feeling. You can read tutorials and watch videos for hours, but the moment you face a blank editor, everything you “learned” seems to vanish. It’s a common problem, and the solution is simple: you don’t learn to code by reading, you learn by doing.
The path to becoming a confident developer is paved with practice—writing code, solving small problems, and building tangible things. That’s why we’re so excited to share a new resource designed to help you on that journey.
Today, we’re giving you a preview of our comprehensive guide, “100 JavaScript Exercises.” This guide is packed with bite-sized, practical examples that cover the absolute fundamentals of JavaScript. You’ll start with the basics and progressively build your skills, turning abstract concepts into a real, working toolkit.
To show you what it’s all about, we’ve pulled 10 examples directly from the guide. Work through them and see how much you can learn by getting your hands dirty!
Part 1: The Absolute Basics (Variables & Data Types)
Every application needs to store and manage information. These first few exercises cover the bedrock of JavaScript.
1. Declaring a Variable with var
The traditional way to declare a variable. var is function-scoped.
HTML
<!DOCTYPE html>
<html>
<body>
<p id="output"></p>
<script src="script.js"></script>
</body>
</html>
JavaScript
var greeting = "Hello, World!";
document.getElementById("output").textContent = greeting;
2. Declaring a Variable with let
The modern, block-scoped way to declare a variable whose value can change.
JavaScript
let score = 100;
// score can be re-assigned
score = 150;
console.log(score); // Outputs: 150
3. Declaring a Constant with const
Used for variables whose values should never change after being assigned.
JavaScript
const pi = 3.14159;
// The line below would cause a TypeError!
// pi = 3.14;
console.log("The value of PI is approximately: " + pi);
4. String Data Type
Textual data is stored as a string, enclosed in single or double quotes.
JavaScript
let firstName = "John";
let lastName = 'Doe';
// We can combine strings (concatenation)
let fullName = firstName + " " + lastName;
console.log(fullName); // Outputs: John Doe
5. Number Data Type
Numbers can be integers or decimals.
JavaScript
let integer = 25;
let decimal = 10.5;
let sum = integer + decimal;
console.log("The sum is: " + sum); // Outputs: The sum is: 35.5
6. Boolean Data Type
Represents logical values: true or false. Essential for making decisions in your code.
JavaScript
let isStudent = true;
let isWorking = false;
console.log("Is the person a student? " + isStudent); // Outputs: Is the person a student? true
Part 2: Making Decisions and Repeating Actions
Now let’s look at how to control the flow of your programs.
7. The if...else Statement
Execute one block of code if a condition is true, and another if it is false.
JavaScript
let score = 75;
if (score >= 50) {
console.log("You passed!");
} else {
console.log("You failed. Try again.");
}
// Outputs: You passed!
8. The for Loop
Repeat a block of code a specific number of times. This loop runs 5 times.
JavaScript
for (let i = 1; i <= 5; i++) {
console.log(`This is loop iteration number ${i}`);
}
Part 3: Reusable Code and Data Collections
Functions and arrays are fundamental building blocks for organized, efficient code.
9. Function Declaration
Create a reusable block of code that performs a specific task.
JavaScript
// Define the function
function greet(name) {
return `Hello, ${name}!`;
}
// Call the function and log the result
const message = greet("Alice");
console.log(message); // Outputs: Hello, Alice!
10. Modifying Array Elements
Arrays are ordered lists of values. You can change an element by accessing its index.
JavaScript
const seasons = ["Spring", "Sumer", "Fall", "Winter"];
// The typo "Sumer" is at index 1. Let's fix it.
seasons[1] = "Summer";
console.log(seasons.join(", ")); // Outputs: Spring, Summer, Fall, Winter
Ready for the Next 90 Exercises?
Feeling more confident already? Practice is a powerful thing. These 10 examples are just the beginning. The full guide contains 100 exercises that will walk you through everything from basic operators and DOM manipulation to handling user events and working with APIs.
If you’re ready to stop reading and start doing, you can get your copy of the complete guide now.