JavaScript is a powerful and versatile programming language that forms the backbone of modern web development. Whether you're a beginner looking to solidify your foundational knowledge or an experienced developer aiming to sharpen your skills, regular practice is key to mastering JavaScript. In this comprehensive guide, we'll explore a series of JavaScript exercises designed to challenge your abilities and enhance your problem-solving skills.
1. Reverse a String
Let's start with a classic programming exercise: reversing a string. This problem tests your ability to manipulate strings and use basic array methods.
function reverseString(str) {
return str.split('').reverse().join('');
}
console.log(reverseString("Hello, World!")); // Output: "!dlroW ,olleH"
In this example, we split the string into an array of characters, reverse the array, and then join it back into a string. This method is concise but may not be the most efficient for very large strings.
For a more performant solution, especially with longer strings, consider using a loop:
function reverseStringEfficient(str) {
let reversed = '';
for (let i = str.length - 1; i >= 0; i--) {
reversed += str[i];
}
return reversed;
}
console.log(reverseStringEfficient("JavaScript is awesome!")); // Output: "!emosewa si tpircSavaJ"
This loop-based approach avoids the overhead of creating intermediate arrays, making it more efficient for larger strings.
2. Find the Longest Word in a String
This exercise challenges you to work with strings and arrays while implementing basic logic.
function findLongestWord(str) {
const words = str.split(' ');
let longestWord = '';
for (let word of words) {
if (word.length > longestWord.length) {
longestWord = word;
}
}
return longestWord;
}
console.log(findLongestWord("The quick brown fox jumped over the lazy dog")); // Output: "jumped"
This function splits the string into an array of words, then iterates through each word, keeping track of the longest one encountered.
💡 Pro tip: You can make this function more robust by handling punctuation and case sensitivity:
function findLongestWordAdvanced(str) {
const words = str.toLowerCase().match(/[a-z]+/g);
return words.reduce((longest, word) => word.length > longest.length ? word : longest, '');
}
console.log(findLongestWordAdvanced("What is the longest word in this sentence?")); // Output: "sentence"
This advanced version uses a regular expression to match only alphabetic characters and converts everything to lowercase for fair comparison.
3. Implement a Basic Calculator
This exercise tests your ability to work with functions, conditional statements, and basic arithmetic operations.
function calculator(num1, num2, operator) {
switch(operator) {
case '+':
return num1 + num2;
case '-':
return num1 - num2;
case '*':
return num1 * num2;
case '/':
if (num2 === 0) {
return "Error: Division by zero";
}
return num1 / num2;
default:
return "Error: Invalid operator";
}
}
console.log(calculator(5, 3, '+')); // Output: 8
console.log(calculator(10, 2, '*')); // Output: 20
console.log(calculator(15, 0, '/')); // Output: "Error: Division by zero"
This calculator function uses a switch statement to determine which operation to perform. It also includes error handling for division by zero and invalid operators.
To make this calculator more advanced, you could add support for more complex operations:
function advancedCalculator(num1, num2, operator) {
const operations = {
'+': (a, b) => a + b,
'-': (a, b) => a - b,
'*': (a, b) => a * b,
'/': (a, b) => b !== 0 ? a / b : "Error: Division by zero",
'^': (a, b) => Math.pow(a, b),
'%': (a, b) => a % b
};
return operations[operator] ? operations[operator](num1, num2) : "Error: Invalid operator";
}
console.log(advancedCalculator(2, 3, '^')); // Output: 8
console.log(advancedCalculator(17, 5, '%')); // Output: 2
This version uses an object to store operations as functions, allowing for easy addition of new operations.
4. Check for Palindromes
A palindrome is a word, phrase, number, or other sequence of characters that reads the same backward as forward. This exercise tests your string manipulation skills and logical thinking.
function isPalindrome(str) {
// Remove non-alphanumeric characters and convert to lowercase
const cleanStr = str.toLowerCase().replace(/[^a-z0-9]/g, '');
// Compare the string with its reverse
return cleanStr === cleanStr.split('').reverse().join('');
}
console.log(isPalindrome("A man, a plan, a canal: Panama")); // Output: true
console.log(isPalindrome("race a car")); // Output: false
This function first cleans the input string by removing non-alphanumeric characters and converting it to lowercase. It then compares the cleaned string with its reverse to determine if it's a palindrome.
For a more efficient solution, especially for very long strings, we can use a two-pointer approach:
function isPalindromeEfficient(str) {
const cleanStr = str.toLowerCase().replace(/[^a-z0-9]/g, '');
let left = 0;
let right = cleanStr.length - 1;
while (left < right) {
if (cleanStr[left] !== cleanStr[right]) {
return false;
}
left++;
right--;
}
return true;
}
console.log(isPalindromeEfficient("Do geese see God?")); // Output: true
console.log(isPalindromeEfficient("Hello, World!")); // Output: false
This version avoids creating a reversed string, making it more memory-efficient for very long inputs.
5. Find the Missing Number
This exercise tests your problem-solving skills and understanding of mathematical concepts in programming.
function findMissingNumber(arr) {
const n = arr.length + 1;
const expectedSum = (n * (n + 1)) / 2;
const actualSum = arr.reduce((sum, num) => sum + num, 0);
return expectedSum - actualSum;
}
console.log(findMissingNumber([1, 2, 4, 6, 3, 7, 8])); // Output: 5
console.log(findMissingNumber([1, 2, 3, 4, 6, 7, 8, 9])); // Output: 5
This function uses the formula for the sum of consecutive integers (1 to n) to calculate the expected sum, then subtracts the actual sum of the array to find the missing number.
💡 Pro tip: For very large arrays, you might want to consider using bitwise XOR to solve this problem without the risk of integer overflow:
function findMissingNumberXOR(arr) {
let xor = 0;
const n = arr.length + 1;
// XOR all numbers from 1 to n
for (let i = 1; i <= n; i++) {
xor ^= i;
}
// XOR with all numbers in the array
for (let num of arr) {
xor ^= num;
}
return xor;
}
console.log(findMissingNumberXOR([1, 2, 4, 6, 3, 7, 8])); // Output: 5
This XOR-based solution is particularly useful when dealing with very large numbers or when you need to avoid potential arithmetic overflow issues.
6. Implement a Queue using Stacks
This advanced exercise tests your understanding of data structures and your ability to think creatively about implementing one data structure using another.
class Queue {
constructor() {
this.stack1 = [];
this.stack2 = [];
}
enqueue(x) {
this.stack1.push(x);
}
dequeue() {
if (this.stack2.length === 0) {
if (this.stack1.length === 0) {
return "Error: Queue is empty";
}
while (this.stack1.length > 0) {
this.stack2.push(this.stack1.pop());
}
}
return this.stack2.pop();
}
}
const q = new Queue();
q.enqueue(1);
q.enqueue(2);
q.enqueue(3);
console.log(q.dequeue()); // Output: 1
console.log(q.dequeue()); // Output: 2
q.enqueue(4);
console.log(q.dequeue()); // Output: 3
This implementation uses two stacks to simulate a queue. The enqueue operation simply pushes onto stack1. The dequeue operation is more complex: if stack2 is empty, it pops all elements from stack1 and pushes them onto stack2, effectively reversing their order. Then it pops from stack2.
7. Implement Debounce Function
Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, making it useful in scenarios like search box suggestions, text-field auto-saves, and more.
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Example usage:
const expensiveOperation = () => console.log("Expensive operation executed!");
const debouncedOperation = debounce(expensiveOperation, 1000);
// Simulate rapid firing of the function
debouncedOperation();
debouncedOperation();
debouncedOperation();
// Only one execution will occur after 1 second
This debounce function takes a function and a delay as arguments. It returns a new function that, when called, will delay the execution of the original function until the specified delay has passed without any new calls.
💡 Pro tip: You can enhance this debounce function to support immediate execution on the leading edge:
function advancedDebounce(func, delay, { leading = false } = {}) {
let timeoutId;
return function(...args) {
const shouldCallNow = leading && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
if (!leading) {
func.apply(this, args);
}
timeoutId = null;
}, delay);
if (shouldCallNow) {
func.apply(this, args);
}
};
}
// Example usage:
const immediateOperation = () => console.log("Immediate operation executed!");
const debouncedImmediate = advancedDebounce(immediateOperation, 1000, { leading: true });
// This will execute immediately
debouncedImmediate();
// These will not execute
debouncedImmediate();
debouncedImmediate();
This advanced version allows for immediate execution on the first call if the leading option is set to true.
Conclusion
These JavaScript exercises cover a wide range of programming concepts and challenges. By working through these problems, you'll improve your ability to manipulate strings, work with arrays, implement basic algorithms, and even tackle more advanced concepts like debouncing and data structure implementation.
Remember, the key to improving your JavaScript skills is consistent practice. Try to solve these exercises on your own before looking at the solutions, and don't be afraid to experiment with different approaches. As you become more comfortable with these concepts, you'll find yourself better equipped to tackle real-world programming challenges in your projects.
Keep coding, stay curious, and happy learning!
