Share
Explore

JavaScript lab workbook for maps, sets, filters, and reducers:

Lab 1: Maps and Sets

In this lab, you will learn how to use Maps and Sets in JavaScript to organize and manipulate data.
Create a new JavaScript file and define an array of numbers:
javascriptCopy code
Create a Map that maps each number to its square:
const squareMap = new Map();
for (const number of numbers)
{ squareMap.set(number, number * number); } console.log(squareMap);
Create a Set that contains only the even numbers:
const evenSet = new Set(); for (const number of numbers) { if (number % 2 === 0) { evenSet.add(number); } } console.log(evenSet);
Use the forEach method to iterate over the values of the Map and Set:
squareMap.forEach((value, key) => { console.log(`${key} squared is ${value}`); }); evenSet.forEach((value) => { console.log(`${value} is even`); });
Use the size property to get the number of elements in the Map and Set:
console.log(`The squareMap has ${squareMap.size} entries.`); console.log(`The evenSet has ${evenSet.size} entries.`);

Lab 2: Filters and Reducers

Link to Great Lakes Data as JavaScript Objects:
In this lab, you will learn how to use filter and reduce to manipulate arrays in JavaScript.
Create a new JavaScript file and define an array of numbers:
const numbers = [1, 2, 3, 4, 5];
Use the filter method to create a new array that contains only the even numbers:
const evenNumbers = numbers.filter((number) => { return number % 2 === 0; }); console.log(evenNumbers);
Use the reduce method to calculate the sum of the numbers:
const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }); console.log(sum);
Use the filter and reduce methods together to calculate the sum of the even numbers:
const sumOfEvens = numbers.filter((number) => { return number % 2 === 0; }).reduce((accumulator, currentValue) => { return accumulator + currentValue; }); console.log(sumOfEvens);
Use the every and some methods to test whether all or some of the numbers meet a certain condition:
javascriptCopy code
const allEven = numbers.every((number) => { return number % 2 === 0; }); console.log(allEven); const someEven = numbers.some((number) => { return number % 2 === 0; }); console.log(someEven);

Lab 3: Async and Await

In this lab, you will learn how to use async and await to write asynchronous code in JavaScript.
Create a new JavaScript file and define a function that returns a Promise:
javascriptCopy code
function wait(ms) { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); }); }

Here's the rest of the lab workbook for async and await:
Define an async function that waits for 1 second and then returns a string:
javascriptCopy code
async function getString() { await wait(1000); return 'Hello, world!'; }
Call the getString function and log the result to the console:
getString().then((result) => { console.log(result); });
Define an async function that uses Promise.all to wait for multiple Promises to resolve:
javascriptCopy code
async function getStrings() { const strings = await Promise.all([ getString(), getString(), getString() ]); return strings; }
Call the getStrings function and log the result to the console:
javascriptCopy code
getStrings().then((result) => { console.log(result); });
Define an async function that catches errors using try and catch:
javascriptCopy code
async function getStringWithError() { try { await wait(1000); throw new Error('Something went wrong!'); } catch (error) { console.log(error.message); } }
Call the getStringWithError function and log any error messages to the console:
javascriptCopy code
getStringWithError();
Define an async function that uses Promise.race to wait for the first Promise to resolve:
javascriptCopy code
async function getFastestString() { const strings = await Promise.race([ wait(2000).then(() => 'Slow string'), wait(1000).then(() => 'Fast string') ]); return strings; }
Call the getFastestString function and log the result to the console:
javascriptCopy code
getFastestString().then((result) => { console.log(result); });
Congratulations, you have completed the async and await lab! This is just a basic example, and there are many more advanced features and use cases that you can explore with async and await in JavaScript.JavaScript lab workbook for maps, sets, filters

Lab 1: Maps and Sets

In this lab, you will learn how to use Maps and Sets in JavaScript to organize and manipulate data.
Create a new JavaScript file and define an array of numbers:
javascriptCopy code
const numbers = [1, 2, 3, 4, 5];
Create a Map that maps each number to its square:
javascriptCopy code
const squareMap = new Map(); for (const number of numbers) { squareMap.set(number, number * number); } console.log(squareMap);
Create a Set that contains only the even numbers:
const evenSet = new Set(); for (const number of numbers) { if (number % 2 === 0) { evenSet.add(number); } } console.log(evenSet);
Use the forEach method to iterate over the values of the Map and Set:
squareMap.forEach((value, key) => { console.log(`${key} squared is ${value}`); }); evenSet.forEach((value) => { console.log(`${value} is even`); });
Use the size property to get the number of elements in the Map and Set:
console.log(`The squareMap has ${squareMap.size} entries.`); console.log(`The evenSet has ${evenSet.size} entries.`);

Lab 2: Filters and Reducers

In this lab, you will learn how to use filter and reduce to manipulate arrays in JavaScript.
Create a new JavaScript file and define an array of numbers:
const numbers = [1, 2, 3, 4, 5];
Use the filter method to create a new array that contains only the even numbers:
const evenNumbers = numbers.filter((number) => { return number % 2 === 0; }); console.log(evenNumbers);
Use the reduce method to calculate the sum of the numbers:
const sum = numbers.reduce((accumulator, currentValue) => { return accumulator + currentValue; }); console.log(sum);
Use the filter and reduce methods together to calculate the sum of the even numbers:
const sumOfEvens = numbers.filter((number) => { return number % 2 === 0; }).reduce((accumulator, currentValue) => { return accumulator + currentValue; }); console.log(sumOfEvens);
Use the every and some methods to test whether all or some of the numbers meet a certain condition:
const allEven = numbers.every((number) => { return number % 2 === 0; }); console.log(allEven); const someEven = numbers.some((number) => { return number % 2 === 0; }); console.log(someEven);

Lab 3: Async and Await

In this lab, you will learn how to use async and await to write asynchronous code in JavaScript.
Create a new JavaScript file and define a function that returns a Promise:
function wait(ms) { return new Promise((resolve) => { setTimeout(() => { resolve(); }, ms); }); }
Define an async function that waits for 1 second and then returns a string:
async function getString() { await wait(1000); return 'Hello, world!'; }
Call the getString function and log the result to the console:
getString().then((result) => { console.log(result); });
Define an async function that uses Promise.all to wait for multiple Promises to resolve:
async function getStrings() { const strings = await Promise.all([ getString(), getString(), getString() ]); return strings; }
Call the getStrings function and log the result to the console:
getStrings().then((result) => { console.log(result); });
Define an async function that catches errors using try and catch:
async function getStringWithError() { try { await wait(1000); throw new Error('Something went wrong!'); } catch (error) { console.log(error.message); } }
Call the getStringWithError function and log any error messages to the console:
javascriptCopy code
getStringWithError();
Define an async function that uses Promise.race to wait for the first Promise to resolve:
async function getFastestString() { const strings = await Promise.race([ wait(2000).then(() => 'Slow string'), wait(1000).then(() => 'Fast string') ]); return strings; }
Call the getFastestString function and log the result to the console:
getFastestString().then((result) => { console.log(result); });
Congratulations, you have completed the async and await lab! This is just a basic example, and there are many more advanced features and use cases that you can explore with async and await in JavaScript.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.