US https://www.amazon.com/dp/B0D345LCHS
CAN https://www.amazon.ca/dp/B0D345LCHS
“JavaScript Coding Examples” is an indispensable guide crafted meticulously by Laurence Svekis, a veteran web developer and educator with over two decades of experience. This book serves as both a learning tool and a practical reference for JavaScript enthusiasts, from beginners to seasoned programmers. The core of this resource is its structured compilation of 350 meticulously chosen coding examples that span a diverse range of topics, concepts, and difficulties within JavaScript programming.
Contents
The book commences with basic concepts like variables, data types, and control structures, gradually moving into more complex topics such as functions, objects, arrays, and DOM manipulation. Each section is designed to build on the skills developed in the preceding chapters, with snippets that apply directly to real-world programming challenges.
- Basic Programming Constructs: Learn the foundations of JavaScript with examples on syntax, operators, and data types.
- Functions and Scoping: Dive deep into functions, exploring their declaration, invocation, and scopes.
- Data Handling: Manipulate data using arrays, objects, and structures for complex data management.
- DOM Interaction: Engage with the Document Object Model (DOM) to create interactive web pages.
- Event Handling: Learn to manage user inputs and actions through comprehensive event handling techniques.
- Advanced Topics: Tackle advanced subjects such as asynchronous programming, closures, and web APIs.
Benefits of This Approach
- Hands-On Learning: Each example encourages active engagement, helping readers understand and remember JavaScript concepts through practical application.
- Immediate Feedback: By working through the examples, readers can immediately see the results of their code, fostering a deeper understanding of how JavaScript operates in different scenarios.
- Diverse Challenges: The wide range of examples ensures that programmers of all skill levels will find material that challenges them and expands their abilities.
- Real-World Application: The examples are designed not only to teach JavaScript but also to demonstrate its application in solving real-world problems.
For Whom is This Book?
“JavaScript Coding Examples” is perfect for:
- Beginners seeking a comprehensive and understandable introduction to JavaScript.
- Intermediate developers looking to deepen their understanding and refine their skills.
- Advanced programmers who want a reference filled with practical examples.
- Educators and trainers needing a resource for teaching JavaScript in classrooms or workshops.
Additional Resources
The book includes access to a GitHub repository where all the code snippets are available, allowing readers to download, modify, and use the code in their own projects. It also links to a companion website where readers can find further readings and additional exercises.
Author’s Expertise
Laurence Svekis has taught over a million students worldwide, and his teaching style is praised for its clarity and practical focus. His expertise shines in this book, making complex JavaScript concepts accessible and engaging.
Conclusion
“JavaScript Coding Examples” by Laurence Svekis is more than just a book; it’s a comprehensive toolkit that empowers its readers to master JavaScript through direct, hands-on learning. Whether you aim to start your journey in web development or enhance your programming skills, this book will serve as a crucial resource on your path to becoming a proficient JavaScript developer.
Introduction to Coding Examples
Benefits of code snippets:
- Hands-on Learning: Direct engagement with code through snippets ensures that readers learn by doing, which is crucial for retaining programming concepts.
- Diverse Challenges: From simple calculations to complex functions, these snippets cover a wide range of JavaScript functionalities, preparing readers for various programming needs.
- Immediate Feedback: By experimenting with code snippets, readers can see immediate results of their coding, helping them understand the impact of each line of code.
Benefits of learning with examples and challenging exercises:
- Contextual Learning: Examples provide context to abstract concepts, making it easier for learners to understand how JavaScript is used in real applications.
- Skill Enhancement: Challenging exercises push learners to apply what they’ve learned, enhancing their problem-solving skills and preparing them for real-world programming tasks.
- Engagement and Motivation: Completing exercises gives a sense of achievement that motivates learners to continue exploring more advanced topics.
Source Code at:
https://github.com/lsvekis/JavaScript-Code-Snippets-Book
Learn More at:
Exploring JavaScript Fundamentals
Learning JavaScript Through Examples
In this chapter, we embark on a journey to understand the basics of JavaScript programming through practical examples and straightforward explanations. Each section introduces a fundamental concept of JavaScript, followed by an illustrative example that applies these concepts in real-world scenarios. This approach not only clarifies the theoretical aspects of JavaScript but also enhances your practical coding skills. Here’s what you’ll learn:
Hello, World!
We start with the quintessential “Hello, World!” program, a rite of passage for all new programmers. This example will introduce you to the console.log() function, demonstrating how to output text to the console. It’s a simple yet powerful way to begin our exploration of JavaScript.
Basic Arithmetic Operations
Next, we’ll build a simple calculator that performs basic arithmetic operations like addition, subtraction, multiplication, and division. This section will help you understand how functions work in JavaScript and how to perform calculations and display results.
Working with Arrays
Moving on, you’ll learn how to manipulate arrays — from creating and adding elements to traversing them. This example uses methods like .push() and loops through arrays to display each element, providing a solid foundation in handling lists of data.
Conditional Logic
We’ll then delve into conditional logic to evaluate different scenarios. You’ll write a program that checks if a number is positive, negative, or zero using if, else if, and else statements. This is crucial for making decisions in code based on various conditions.
Using Functions
Understanding functions is key to effective programming. You’ll learn to create a function that calculates the area of a rectangle, which illustrates how to encapsulate code into reusable blocks and how functions can return values.
String Concatenation
We will also explore string manipulation, particularly how to concatenate strings to create meaningful messages. This is essential for any program that handles text.
Checking Even Numbers
Additionally, you’ll learn how to determine if a number is even, emphasizing the use of the modulus operator and boolean values — fundamental concepts in programming that are used to evaluate conditions.
Looping Over an Array
We’ll further enhance your understanding of loops and arrays by printing each element of an array using the .forEach() method, demonstrating a different approach to iterating through data.
Object Properties
Then, you’ll create and manipulate an object that represents a car, learning how to access and display its properties. This example introduces objects, a core aspect of JavaScript programming.
Basic User Input
Handling user input is next, where you’ll prompt users to enter their name and respond with a personalized greeting. This example is vital for interactive applications.
Reverse a String
You’ll write a function to reverse a string, which not only shows string manipulation but also introduces more complex operations on arrays.
Find the Largest Number in an Array
Finally, we’ll conclude with a function that finds the largest number in an array, using JavaScript’s built-in Math functions and the spread operator to handle arrays efficiently.
By the end of this chapter, you will have a solid foundation in JavaScript, equipped with both the knowledge of syntax and practical programming strategies to tackle real-world problems.
Hello World
Objective: Write a JavaScript program to display “Hello, World!” in the console.
Code:
console.log(“Hello, World!”);
Explanation: console.log() is a function used to print any message you want to display to the console. In this case, it outputs the string “Hello, World!”.
Basic Arithmetic Operations
Objective: Create a simple calculator to add, subtract, multiply, and divide two numbers.
Code:
function simpleCalculator(num1, num2) {
console.log(“Addition: ” + (num1 + num2));
console.log(“Subtraction: ” + (num1 – num2));
console.log(“Multiplication: ” + (num1 * num2));
console.log(“Division: ” + (num1 / num2));
}
simpleCalculator(5, 3);
Explanation: This function, simpleCalculator, takes two numbers as arguments.
It performs addition, subtraction, multiplication, and division on these numbers.
Each operation’s result is displayed using console.log.
Working with Arrays
Objective: Write a JavaScript program to create an array, add elements to it, and display each element.
Code:
let fruits = [“Apple”, “Banana”];
fruits.push(“Orange”);
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Explanation: fruits is an array containing two initial elements: “Apple” and “Banana”.
.push(“Orange”) adds “Orange” to the end of the array.
The for loop iterates through the array, and console.log displays each element.
Conditional Logic
Objective: Write a program that checks if a number is positive, negative, or zero.
Code:
function checkNumber(num) {
if (num > 0) {
console.log(num + ” is positive”);
} else if (num < 0) {
console.log(num + ” is negative”);
} else {
console.log(num + ” is zero”);
}
}
checkNumber(2);
checkNumber(-5);
checkNumber(0);
Explanation: The function checkNumber evaluates if the passed number (num) is greater than, less than, or equal to zero.
It uses if, else if, and else statements to handle different conditions and outputs the result.
Using Functions
Objective: Write a function that calculates the area of a rectangle given its width and height.
Code:
function rectangleArea(width, height) {
return width * height;
}
console.log(“Area of the rectangle is: ” + rectangleArea(5, 3));
Explanation: The function rectangleArea calculates the area of a rectangle using the formula . Area=width×height. It returns the result which is then printed to the console.
String Concatenation
Objective: Write a JavaScript program to concatenate two strings with a space in between.
Code:
function concatenateStrings(string1, string2) {
return string1 + ” ” + string2;
}
console.log(concatenateStrings(“Hello”, “World”));
Explanation: This function concatenateStrings takes two strings as parameters.
It returns these strings joined together with a space in between using the + operator.
The result, “Hello World”, is then printed to the console.
Checking Even Numbers
Objective: Create a function to check if a number is even and return a boolean value.
Code:
function isEven(num) {
return num % 2 === 0;
}
console.log(isEven(4)); // true
console.log(isEven(5)); // false
Explanation: The function isEven calculates the remainder when the number (num) is divided by 2.
If the remainder is zero (using the modulus operator %), the function returns true; otherwise, it returns false.
Looping Over an Array
Objective: Write a program to loop through an array and print each element to the console.
Code:
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
Explanation: numbers is an array of integers.
.forEach() is a method that executes a provided function once for each array element.
The anonymous function inside forEach() receives each element as number and prints it.
Object Properties
Objective: Create an object representing a car with properties like make, model, and year, then print each property.
Code:
let car = {
make: “Toyota”,
model: “Corolla”,
year: 2021
};
console.log(“Make: ” + car.make);
console.log(“Model: ” + car.model);
console.log(“Year: ” + car.year);
Explanation: car is an object with three properties: make, model, and year.
Each property is accessed using the dot notation (e.g., car.make) and printed out.
Basic User Input
Objective: Write a JavaScript program to prompt the user to enter their name and greet them with their name.
Code:
let userName = prompt(“Enter your name:”);
alert(“Hello, ” + userName + “!”);
Explanation: prompt(“Enter your name:”) displays a dialog box asking the user to enter their name, storing the input in userName. alert() then uses this input to greet the user with a personalized message.
Reverse a String
Objective: Write a JavaScript function to reverse a given string.
Code:
function reverseString(str) {
return str.split(”).reverse().join(”);
}
console.log(reverseString(“hello”)); // Output: “olleh”
Explanation: The split(”) method converts the string str into an array of characters.
reverse() then reverses the array elements.
join(”) reassembles the reversed array back into a string.
This function returns the reversed string.
Find the Largest Number in an Array
Objective: Create a function that returns the largest number from an array.
Code:
function findMax(arr) {
return Math.max(…arr);
}
console.log(findMax([1, 3, 2, 5, 4])); // Output: 5
Explanation: Math.max() returns the largest of the zero or more numbers given as input.
Using the spread operator (…) allows Math.max() to take an array as an argument.
The function returns the highest number found in the array.
Mastering JavaScript Functions
Essential JavaScript Functions: From Basics to Advanced
In this chapter, we delve into various essential JavaScript functions that cater to a broad spectrum of programming needs, from simple arithmetic calculations to advanced data manipulations. Each section of this chapter introduces a different function, providing the code and a detailed explanation of how it works. By the end of this chapter, you will have a comprehensive understanding of how to implement and utilize JavaScript functions for practical and efficient programming. Here’s what you’ll learn:
Simple Interest Calculator
We begin by learning how to calculate simple interest using a straightforward function that requires three parameters: principal, rate, and time. This function exemplifies how to perform basic arithmetic operations and return the calculated interest, demonstrating the practical application of mathematical concepts in programming.
Counting Vowels
Next, we explore string manipulation through a function designed to count vowels in a given string using regular expressions. This example illustrates how to handle strings and utilize regex in JavaScript, which is crucial for pattern matching and text processing.
Sum of Numbers in an Array
You will learn to use the reduce() method to sum numbers in an array, showcasing an efficient way to process and accumulate values in a list. This function is fundamental for understanding array manipulations and the power of JavaScript’s array methods.
Check for Prime Numbers
We’ll implement a function to determine if a number is prime. This section focuses on the logic behind checking prime numbers and introduces loops and conditionals in a more algorithmic context, enhancing your problem-solving skills.
Fibonacci Sequence
Generating the Fibonacci sequence up to a certain number of terms demonstrates iterative programming. This function helps you understand sequences and arrays, reinforcing the concept of loops and array indexing.
Palindrome Checker
Checking if a string is a palindrome serves as an excellent example of string reversal and comparison. This function highlights methods to manipulate and compare strings, useful for many programming tasks involving textual data.
Array Reversal
We’ll cover a function that reverses an array in place, teaching you about array manipulation and the concept of swapping elements without additional storage, which is a valuable technique in optimizing algorithms.
Factorial Calculation
Calculating the factorial of a number introduces you to recursion and iteration, fundamental concepts in understanding how to solve problems that require repetitive steps.
Counting Characters
This function demonstrates how to count occurrences of a specific character within a string, reinforcing your skills in string manipulation and iteration.
Convert Celsius to Fahrenheit
You will write a function that converts temperature from Celsius to Fahrenheit, applying a straightforward mathematical formula in a practical programming scenario, useful in various applications like weather data processing.
Generate Random Numbers
Learning to generate random numbers between specified values is crucial for games, simulations, and applications requiring random data generation, illustrating the use of JavaScript’s Math functions.
Sorting Numbers
Sorting an array of numbers will introduce you to the sort() method and how to customize it to arrange numbers in ascending order, a common task in data processing and analysis.
Checking Array Equality
You will learn to check if two arrays are identical, a function essential for validating outputs in testing and data comparison tasks.
Validate Email Format
Validating email formats using regular expressions is a practical skill for any web developer, ensuring user data integrity and functionality of email-related operations.
Sum of Digits
Calculating the sum of digits of a number teaches you to manipulate numerical strings and perform accumulative calculations, a handy skill in various coding scenarios.
Character Frequency
You’ll write a function to count the frequency of each character in a string, which is useful in data analysis, cryptography, and other fields where data characterization is necessary.
Swap Variables
Finally, swapping the values of two variables without using a temporary variable introduces you to array destructuring, a modern JavaScript feature that simplifies variable manipulation.
Through these examples, this chapter not only teaches you the syntax and basic constructs of JavaScript but also how to apply them effectively to solve real-world problems.
Simple Interest Calculator
Objective: Write a function that calculates simple interest given principal, rate of interest, and time.
Code:
function calculateSimpleInterest(principal, rate, time) {
return principal * rate * time / 100;
}
console.log(calculateSimpleInterest(1000, 5, 3)); // Output: 150
Explanation: Simple interest is calculated as (Principal x Rate x Time) / 100.
This function takes three parameters and returns the simple interest.
Counting Vowels
Objective: Create a function to count the number of vowels in a given string.
Code:
function countVowels(str) {
let count = str.match(/[aeiou]/gi);
return count ? count.length : 0;
}
console.log(countVowels(“hello world”)); // Output: 3
Explanation: The function uses the match() method with a regular expression to find all vowels in the string.
The i in the regex /[aeiou]/gi makes it case-insensitive.
It returns the number of matches found, or 0 if none are found.
Sum of Numbers in an Array
Objective: Write a JavaScript function to calculate the sum of numbers in an array.
Code:
function sumArray(numbers) {
return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sumArray([1, 2, 3, 4, 5])); // Output: 15
Explanation: The reduce() method reduces the array to a single value by adding up all elements. It takes a callback function that processes each element of the array (adding it to the accumulator acc). The second argument to reduce() is the initial value of the accumulator, which is 0 in this case.
Check for Prime Numbers
Objective: Write a function to check if a given number is prime.
Code:
function isPrime(num) {
if (num <= 1) {
return false;
}
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
console.log(isPrime(7)); // Output: true
console.log(isPrime(12)); // Output: false
Explanation: A prime number is a number greater than 1 that has no positive divisors other than 1 and itself.
The function iterates from 2 up to the square root of the number to check for divisibility.
If the number has any divisors other than 1 and itself, it’s not prime.
Fibonacci Sequence
Objective: Write a function to generate the Fibonacci sequence up to a specified number of terms.
Code:
function fibonacci(n) {
let sequence = [0, 1];
for (let i = 2; i < n; i++) {
sequence.push(sequence[i – 1] + sequence[i – 2]);
}
return sequence;
}
console.log(fibonacci(7)); // Output: [0, 1, 1, 2, 3, 5, 8]
Explanation: The Fibonacci sequence is a series of numbers where each number is the sum of the two preceding ones.
This function generates the sequence up to the specified number of terms by iteratively adding the last two numbers.
Palindrome Checker
Objective: Write a function to check if a given string is a palindrome.
Code:
function isPalindrome(str) {
const reversedStr = str.split(”).reverse().join(”);
return str === reversedStr;
}
console.log(isPalindrome(“radar”)); // Output: true
console.log(isPalindrome(“hello”)); // Output: false
Explanation: A palindrome is a word, phrase, number, or other sequence of characters that reads the same forward and backward.
The function reverses the string and compares it with the original string to determine if it’s a palindrome.
Array Reversal
Objective: Write a function to reverse an array in place.
Code:
function reverseArray(arr) {
let start = 0;
let end = arr.length – 1;
while (start < end) {
[arr[start], arr[end]] = [arr[end], arr[start]];
start++;
end–;
}
return arr;
}
console.log(reverseArray([1, 2, 3, 4, 5])); // Output: [5, 4, 3, 2, 1]
Explanation: This function swaps the first element with the last, the second with the second-to-last, and so on until the entire array is reversed.
Factorial Calculation
Objective: Write a function to calculate the factorial of a given number.
Code:
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
console.log(factorial(5)); // Output: 120
Explanation: The factorial of a non-negative integer 𝑛 is the product of all positive integers less than or equal to 𝑛. This function calculates the factorial using a simple iterative loop.
Counting Characters
Objective: Write a function to count the number of times a specific character appears in a string.
Code:
function countCharacter(str, char) {
let count = 0;
for (let i = 0; i < str.length; i++) {
if (str[i] === char) {
count++;
}
}
return count;
}
console.log(countCharacter(“hello”, “l”)); // Output: 2
Explanation: The function iterates through each character of the string str.
It compares each character with the char parameter.
Each time a match is found, the count is incremented.
The final count of occurrences is returned.
Convert Celsius to Fahrenheit
Objective: Write a function that converts temperature from Celsius to Fahrenheit.
Code:
function celsiusToFahrenheit(celsius) {
return celsius * 9/5 + 32;
}
console.log(celsiusToFahrenheit(0)); // Output: 32
console.log(celsiusToFahrenheit(100)); // Output: 212
Explanation: The formula to convert Celsius to Fahrenheit is
𝐹=𝐶×9/5+32
F=C×5/9+32.
The function takes the Celsius temperature, applies the formula, and returns the Fahrenheit equivalent.
Generate Random Numbers
Objective: Write a function to generate a random number between two specified values.
Code:
function randomBetween(min, max) {
return Math.floor(Math.random() * (max – min + 1) + min);
}
console.log(randomBetween(1, 10)); // Output: Random number between 1 and 10
Explanation: Math.random() generates a random number between 0 (inclusive) and 1 (exclusive).
Math.floor() rounds the result down to the nearest whole number.
This calculation adjusts the range to between min and max.
Sorting Numbers
Objective: Write a function to sort an array of numbers in ascending order.
Code:
function sortNumbers(arr) {
return arr.sort((a, b) => a – b);
}
console.log(sortNumbers([5, 3, 8, 1, 2])); // Output: [1, 2, 3, 5, 8]
Explanation: sort() is a method that sorts the elements of an array.
The callback function (a, b) => a – b tells sort() to arrange the numbers in ascending order.
Checking Array Equality
Objective: Write a function to check if two arrays contain the same elements in the same order.
Code:
function arraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) {
return false;
}
}
return true;
}
console.log(arraysEqual([1, 2, 3], [1, 2, 3])); // Output: true
console.log(arraysEqual([1, 2, 3], [3, 2, 1])); // Output: false
Explanation: First, the function checks if the arrays have the same length. Then, it iterates through the arrays comparing corresponding elements. If any pair of elements doesn’t match, it returns false. If all elements match in order, it returns true.
Validate Email Format
Objective: Write a function to validate if a given string is a properly formatted email address.
Code:
function isValidEmail(email) {
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailRegex.test(email);
}
console.log(isValidEmail(“example@test.com”)); // Output: true
console.log(isValidEmail(“example.com”)); // Output: false
Explanation: The function uses a regular expression to validate the email format.
emailRegex.test(email) checks if the email matches the pattern, returning true for a match and false otherwise.
Sum of Digits
Objective: Write a function to calculate the sum of all digits of a given number.
Code:
function sumDigits(number) {
let sum = 0;
let digits = number.toString().split(”);
for (let digit of digits) {
sum += parseInt(digit);
}
return sum;
}
console.log(sumDigits(1234)); // Output: 10
Explanation: Converts the number to a string and splits it into an array of digit characters.
Iterates over the array, converting each digit back to an integer and accumulating the sum.
Character Frequency
Objective: Write a function that counts the frequency of each character in a string.
Code:
function charFrequency(str) {
let freq = {};
for (let char of str) {
if (freq[char]) {
freq[char]++;
} else {
freq[char] = 1;
}
}
return freq;
}
console.log(charFrequency(“hello world”));
// Output: { h: 1, e: 1, l: 3, o: 2, ‘ ‘: 1, w: 1, r: 1, d: 1 }
Explanation: Initializes an empty object freq to store frequency of each character.
Iterates through each character in the string, counting occurrences and storing them in the object.
Swap Variables
Objective: Write a function to swap the values of two variables without using a temporary variable.
Code:
function swapValues(a, b) {
[a, b] = [b, a];
return [a, b];
}
console.log(swapValues(3, 7)); // Output: [7, 3]
Explanation: Uses array destructuring to swap the values of a and b.
This method does not require an additional variable to hold one of the values temporarily.
JavaScript Functions for Data Handling
Building Blocks of JavaScript: Fundamental Functions for Data Manipulation
This chapter delves into a collection of practical JavaScript functions aimed at handling various data types and structures, from strings and numbers to arrays and objects. Through step-by-step examples, you will learn to implement these functions effectively, enhancing your programming skills and understanding of JavaScript’s versatility in data manipulation. Each section breaks down a specific problem, offers a coding solution, and explains the logic behind it, ensuring you not only know how to write the code but also understand why it works. Here’s a glimpse of what this chapter covers:
Find the Longest Word
We begin by exploring a function that identifies the longest word in a given sentence. This task will introduce you to string splitting and array traversal, fundamental techniques in text processing.
Sum of Array Elements
You’ll learn to calculate the total sum of elements in an array. This simple yet essential function is crucial for numerical data analysis and aggregation tasks.
Finding the Average
Calculating the average of array elements demonstrates how to combine looping and arithmetic operations, a common requirement in statistical computations.
Finding the Largest Number
This section focuses on determining the maximum value in an array, teaching you about decision-making processes within loops, a key concept in data comparison operations.
Reversing a String
Here, you’ll reverse a string using array methods, showcasing JavaScript’s built-in functions for string manipulation, which are invaluable for text formatting and analysis.
Finding Common Elements
You will write a function to find intersections between two arrays, useful for data comparison and filtering tasks in more complex applications like database queries or search algorithms.
Check Leap Year
Determining whether a year is a leap year involves conditional logic based on calendar calculations, which are often used in scheduling and planning applications.
Generate Multiplication Table
You’ll generate a multiplication table, an exercise in loop-based output generation, which can help understand iterative data output processes.
Remove Duplicates from Array
Removing duplicates from an array introduces you to the concept of array uniqueness, a common task in data cleaning and preprocessing.
Validate Password Strength
This function checks password strength based on multiple conditions using regular expressions, a powerful tool for pattern matching in user input validation.
Count Words in a Sentence
Counting words helps understand string operations and is fundamental in writing summaries or readability analysis tools.
Convert Hours to Seconds
Converting hours to seconds involves simple arithmetic operations, useful in time-based calculations in various applications.
Calculate the Area of a Circle
Calculating a circle’s area introduces you to mathematical functions in JavaScript, essential for any scientific or engineering calculations.
Validate Palindromic Number
Checking if a number is a palindrome involves string manipulation techniques, reinforcing concepts used in both numerical and textual data analysis.
Create a Basic Greeting
Creating personalized greetings using template literals teaches you about string interpolation, a feature widely used in generating user-facing messages.
Filter Even Numbers
Filtering specific elements from an array based on a condition illustrates the use of higher-order functions, which are pivotal in modern JavaScript applications.
Find the Minimum and Maximum in an Array
Determining both minimum and maximum values in a single traversal teaches efficient data processing, reducing computational overhead in large datasets.
Check for Anagrams
Analyzing if two strings are anagrams involves sorting and comparison, techniques that are fundamental in text processing and cryptography.
Count the Truthy Values in an Array
This function helps understand truthy and falsy values in JavaScript, a key concept in logic-based programming and conditional flows.
Convert a String to Title Case
Converting text to title case involves manipulating strings based on word boundaries, essential for text formatting in content creation tools.
Generate a Random Hex Color
Generating random hex colors introduces randomness and custom formatting, useful in design tools or web development for dynamic styling.
Convert Number to Roman Numerals
Converting numbers to Roman numerals combines arrays, loops, and string operations to solve a problem that involves historical numbering systems, showcasing the adaptability of JavaScript to various domains.
By the end of this chapter, you’ll be equipped with a broad range of skills for manipulating data in JavaScript, preparing you for more advanced programming challenges and real-world applications.
Find the Longest Word
Objective: Write a function to find the longest word in a sentence.
Code:
function findLongestWord(sentence) {
let words = sentence.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”
Explanation: Splits the sentence into an array of words. Iterates through the array, updating longestWord whenever a longer word is found. Returns the longest word in the sentence.
Sum of Array Elements
Objective: Write a function to calculate the sum of all elements in an array of numbers.
Code:
function sumArrayElements(arr) {
let sum = 0;
for (let num of arr) {
sum += num;
}
return sum;
}
console.log(sumArrayElements([1, 2, 3, 4, 5])); // Output: 15
Explanation: This function iterates through each element of the array and accumulates the sum of all elements.
Finding the Average
Objective: Write a function to calculate the average of elements in an array of numbers.
Code:
function calculateAverage(arr) {
let sum = 0;
for (let num of arr) {
sum += num;
}
return sum / arr.length;
}
console.log(calculateAverage([1, 2, 3, 4, 5])); // Output: 3
Explanation: This function calculates the sum of all elements in the array and then divides it by the number of elements to find the average.
Finding the Largest Number
Objective: Write a function to find the largest number in an array of numbers.
Code:
function findLargestNumber(arr) {
let max = arr[0];
for (let num of arr) {
if (num > max) {
max = num;
}
}
return max;
}
console.log(findLargestNumber([1, 5, 2, 8, 3])); // Output: 8
Explanation: This function iterates through the array, updating the max variable whenever a larger number is found.
Reversing a String
Objective: Write a function to reverse a given string.
Code:
function reverseString(str) {
return str.split(”).reverse().join(”);
}
console.log(reverseString(“hello”)); // Output: “olleh”
Explanation: This function splits the string into an array of characters, reverses the array, and then joins it back into a string.
Finding Common Elements
Objective: Write a function to find common elements between two arrays.
Code:
function findCommonElements(arr1, arr2) {
let common = [];
for (let element of arr1) {
if (arr2.includes(element)) {
common.push(element);
}
}
return common;
}
console.log(findCommonElements([1, 2, 3, 4], [3, 4, 5, 6])); // Output: [3, 4]
Explanation: This function iterates through the first array and checks if each element exists in the second array using the includes() method. If it does, the element is added to the common array.
Check Leap Year
Objective: Write a function to determine whether a given year is a leap year.
Code:
function isLeapYear(year) {
if (year % 4 === 0) {
if (year % 100 === 0) {
return year % 400 === 0;
} else {
return true;
}
} else {
return false;
}
}
console.log(isLeapYear(2020)); // Output: true
console.log(isLeapYear(1900)); // Output: false
console.log(isLeapYear(2000)); // Output: true
Explanation: Leap years are divisible by 4, but years divisible by 100 are not leap years unless they are also divisible by 400.
Generate Multiplication Table
Objective: Write a function to generate a multiplication table for a given number up to 10.
Code:
function generateMultiplicationTable(num) {
for (let i = 1; i <= 10; i++) {
console.log(`${num} x ${i} = ${num * i}`);
}
}
generateMultiplicationTable(5);
Explanation: This function uses a loop to print the multiplication table of the specified number from 1 to 10.
Remove Duplicates from Array
Objective: Write a function to remove duplicate values from an array.
Code:
function removeDuplicates(arr) {
let unique = [];
for (let element of arr) {
if (!unique.includes(element)) {
unique.push(element);
}
}
return unique;
}
console.log(removeDuplicates([1, 2, 3, 2, 4, 1])); // Output: [1, 2, 3, 4]
Explanation: This function iterates through the array and adds elements to a new array only if they are not already included, effectively removing duplicates.
Validate Password Strength
Objective: Write a function to check if a password meets a set of security criteria: minimum 8 characters, at least one letter, at least one number.
Code:
function isValidPassword(password) {
const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
return regex.test(password);
}
console.log(isValidPassword(“password1”)); // Output: true
console.log(isValidPassword(“pass”)); // Output: false
Explanation: This regular expression checks for at least one letter and one number and ensures the password is at least 8 characters long.
Count Words in a Sentence
Objective: Write a function to count the number of words in a sentence.
Code:
function countWords(sentence) {
return sentence.split(‘ ‘).length;
}
console.log(countWords(“Hello world”)); // Output: 2
console.log(countWords(“This is a test sentence.”)); // Output: 5
Explanation: This function splits the sentence by spaces and returns the length of the resulting array, which corresponds to the number of words.
Convert Hours to Seconds
Objective: Write a function to convert hours into seconds.
Code:
function hoursToSeconds(hours) {
return hours * 3600;
}
console.log(hoursToSeconds(1)); // Output: 3600
console.log(hoursToSeconds(2.5)); // Output: 9000
Explanation: This function multiplies the number of hours by 3600 (the number of seconds in an hour) to convert hours into seconds.
Calculate the Area of a Circle
Objective: Write a function to calculate the area of a circle given the radius.
Code:
function circleArea(radius) {
return Math.PI * radius * radius;
}
console.log(circleArea(5)); // Output: 78.53981633974483
Explanation: This function calculates the area of a circle using the formula
Area=𝜋×radius2
Area=π×radius
2
.
Validate Palindromic Number
Objective: Write a function to check if a number is a palindrome (reads the same forward and backward).
Code:
function isPalindromeNumber(num) {
let str = num.toString();
return str === str.split(”).reverse().join(”);
}
console.log(isPalindromeNumber(121)); // Output: true
console.log(isPalindromeNumber(123)); // Output: false
Explanation: The function converts the number to a string, reverses that string, and checks if the reversed string is equal to the original string.
Create a Basic Greeting
Objective: Write a function that takes a name and returns a greeting message.
Code:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet(“Alice”)); // Output: “Hello, Alice!”
Explanation: This function uses template literals to create a personalized greeting message.
Filter Even Numbers
Objective: Write a function to filter out all even numbers from an array and return the resulting array.
Code:
function filterEvenNumbers(arr) {
return arr.filter(num => num % 2 !== 0);
}
console.log(filterEvenNumbers([1, 2, 3, 4, 5, 6])); // Output: [1, 3, 5]
Explanation: The filter() method creates a new array with all elements that pass the test implemented by the provided function. The provided function checks if the number is not even (num % 2 !== 0), thus filtering out even numbers.
Find the Minimum and Maximum in an Array
Objective: Write a function that returns both the minimum and maximum numbers from a given array of numbers.
Code:
function findMinMax(arr) {
let min = arr[0];
let max = arr[0];
for (let num of arr) {
if (num < min) {
min = num;
}
if (num > max) {
max = num;
}
}
return { min, max };
}
console.log(findMinMax([5, 7, 2, 9, 3])); // Output: { min: 2, max: 9 }
Explanation: The function initializes min and max with the first element of the array.
It then iterates through the array, updating min and max whenever a smaller or larger value is found, respectively.
Returns an object containing both the minimum and maximum values.
Check for Anagrams
Objective: Write a function to determine if two strings are anagrams of each other (contain the same letters in a different order).
Code:
function areAnagrams(str1, str2) {
const normalize = (str) => str.toLowerCase().split(”).sort().join(”);
return normalize(str1) === normalize(str2);
}
console.log(areAnagrams(“listen”, “silent”)); // Output: true
console.log(areAnagrams(“hello”, “world”)); // Output: false
Explanation: The normalize function converts a string to lowercase, splits it into an array of characters, sorts the array, and then joins it back into a string.
Compares the normalized versions of both strings to check if they are anagrams.
Count the Truthy Values in an Array
Objective: Write a function that counts how many truthy values are in an array. In JavaScript, truthy values are all the values that aren’t false, 0, “”, null, undefined, or NaN.
Code:
function countTruthy(arr) {
let count = 0;
for (let value of arr) {
if (value) count++;
}
return count;
}
console.log(countTruthy([0, 1, 2, “”, null, “hello”, undefined, 34])); // Output: 4
Explanation: The function iterates through the array, incrementing the count for every truthy value encountered.
Convert a String to Title Case
Objective: Write a function that converts a given string to title case (the first letter of each word is capitalized).
Code:
function toTitleCase(str) {
return str.toLowerCase().split(‘ ‘).map(word => word[0].toUpperCase() + word.slice(1)).join(‘ ‘);
}
console.log(toTitleCase(“hello world”)); // Output: “Hello World”
Explanation: Converts the entire string to lowercase and splits it into words.
Maps over each word, capitalizing the first letter and then concatenating the rest of the word.
Joins the words back into a single string.
Generate a Random Hex Color
Objective: Write a function to generate a random hex color code.
Code:
function generateRandomHexColor() {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
return `#${randomColor.padStart(6, ‘0’)}`;
}
console.log(generateRandomHexColor()); // Output: e.g., “#1a2b3c”
Explanation: Generates a random number between 0 and 16777215 (the decimal equivalent of FFFFFF in hex). Converts the number to a hex string using toString(16). Pads the string with zeros at the start if it’s less than 6 characters long, ensuring a valid hex color code.
Convert Number to Roman Numerals
Objective: Write a function that converts an integer to its Roman numeral equivalent.
Code:
function convertToRoman(num) {
const numerals = [
{ value: 1000, symbol: ‘M’ },
{ value: 900, symbol: ‘CM’ },
{ value: 500, symbol: ‘D’ },
{ value: 400, symbol: ‘CD’ },
{ value: 100, symbol: ‘C’ },
{ value: 90, symbol: ‘XC’ },
{ value: 50, symbol: ‘L’ },
{ value: 40, symbol: ‘XL’ },
{ value: 10, symbol: ‘X’ },
{ value: 9, symbol: ‘IX’ },
{ value: 5, symbol: ‘V’ },
{ value: 4, symbol: ‘IV’ },
{ value: 1, symbol: ‘I’ }
];
let roman = ”;
numerals.forEach(n => {
while (num >= n.value) {
roman += n.symbol;
num -= n.value;
}
});
return roman;
}
console.log(convertToRoman(1994)); // Output: “MCMXCIV”
Explanation: The function uses an array of objects representing the Roman numeral symbols and their values.
It iterates through the array, subtracting the value from the number and appending the corresponding symbol to the result string until the number is reduced to zero.
