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: 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: 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); }); }
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: 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: 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.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: const numbers = [1, 2, 3, 4, 5]; 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
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: 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.
