Explore

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

Peter Sigurdson

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:

⁠

https://github.com/computationalknowledge/GreakLakesJavaScriptObjects.js⁠

⁠

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); });

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.