Share
Explore # JavaScript lab workbook for maps, sets, filters, and reducers: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. 