ALAB 308H.5.2 - Array Methods and Callbacks


Learning Objectives

In this lab, you'll be completing some tasks using JavaScript array methods and callbacks in order to:

  • Demonstrate the use of callback functions.
  • Solve problems by referencing documentation when dealing with unfamiliar topics.

 CodeSandbox

This lab uses CodeSandbox as one of its tools.

If you are unfamiliar with CodeSandbox, or need a refresher, please visit our reference page on CodeSandbox for instructions on:

  • Creating an Account
  • Making a Sandbox
  • Navigating your Sandbox
  • Submitting a link to your Sandbox to Canvas

Instructions

  1. Create a Vanilla CodeSandbox and name it "JavaScript Arrays and Callbacks Lab."
  2. Solve and code answers to each of the problem statements below in the index.js file.
  3. Be sure to mark each answer with a comment above it cooresponding to the topics below.
  4. Submit the link to your CodeSandbox on Canvas when you are finished.

Deliverables

  • A link to a CodeSandbox that contains answers to the following problem statements with no errors (comment things out if they do not work).

Introduction

This lab is designed to be a review of array methods with callback functions (i.e forEach, map, filter, reduce, find, every, etc).

You may be unfamiliar with some of these methods, and that is okay! Reference the MDN documentation on Arrays for information on methods as you need it.

A few array methods use callbacks. For example .map takes each element of an array, does something to it, and returns a new array.

But what should it do? Multiply everything by 5? Capitalize everything? If .map had a hard-coded action it always did with an array, it wouldn't be very flexible.

By allowing a callback to determine what happens to each array element, we get a lot of flexibility and can do some really powerful things.

Here are two arrays you'll be working with:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 0];
const panagram = ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog'];

For each of the Array methods below:

  1. The first statement is for the numbers array.
  2. The second statement is for the string array.

Create an answer for each question within your CodeSandbox.

You don't have to write an answer to the thought questions.


Every

  1. Determine if every number is greater than or equal to 0.
  2. Determine if every word shorter than 8 characters.

Filter

  1. filter the array for numbers less than 4.
  2. Filter words that have an even length.

Find

  1. Find the first value divisible by 5.
  2. Find the first word that is longer than 5 characters.

Find Index

  1. Find the index of the first number that is divisible by 3.
  2. Find the index of the first word that is less than 2 characters long.

For Each

  1. Log each value of the array multiplied by 3.
  2. Log each word with an exclamation point at the end of it.

Thought Questions

  • What happened to the original array?
  • Can you store the values from a forEach method in a new array?

Map

  1. Make a new array of each number multiplied by 100.
  2. Make a new array of all of the words in all uppercase.

Thought Questions

  • What happened to the original array?
  • Can you store the values from a map method in a new array?

Some

  • Find out if some numbers are divisible by 7.
  • Find out if some words have the letter a in them.

Going Further

The remainder of this content is optional, but if you have the time to complete it, please do!


Reduce

  • Add all of the numbers in the array together using the reduce method.
  • Concatenate all the words using reduce.

Thought Questions

  • What happened to the original array?

Sort

  • Try to sort without any arguments, do you get what you'd expect with the numbers array?
  • Try to sort without any arguments, do you get what you'd expect with the words array?
  • Sort the numbers in ascending order.
  • Sort the numbers in descending order.
  • Sort the words in ascending order.
  • Sort the words in descending order.

Thought Questions

  • What happened to the original array?

isPanagram

Using the following array, test whether each letter a-z (case insensitive) is used at least once.

const panagram = ['The', 'quick','brown','fox', 'jumps', 'over', 'the', 'lazy', 'dog']

Working with data

Using the array of objects below:

  • Filter for products with a price that is less than 10.
  • Sort alphabetically by product name.
const products = [
      {
        "name": "allen wrench",
        "price": 2.99,
        "description": "handy tool"
      },
      {
        "name": "cornucopia",
        "price": 5.99,
        "description": "festive holiday decoration"
      },
      {
        "name": "banana",
        "price": 0.99,
        "description": "full of potassium"
      },
      {
        "name": "guillotine (cigar)",
        "price": 10.59,
        "description": "behead your stub"
      },
      {
        "name": "jack-o-lantern",
        "price": 3.99,
        "description": "spooky seasonal fun"
      },
      {
        "name": "doggie treat (box)",
        "price": 5.99,
        "description": "fido loves 'em"
      },
      {
        "name": "egg separator",
        "price": 3.99,
        "description": "it separates yolks from whites"
      },
      {
        "name": "LED lightbulb",
        "price": 6.55,
        "description": "It's super-efficient!"
      },
      {
        "name": "owl pellets",
        "price": 3.99,
        "description": "Don't ask what they used to be."
      },
      {
        "name": "flag",
        "price": 5.99,
        "description": "catches the breeze"
      },
      {
        "name": "hair brush",
        "price": 6.99,
        "description": "fine boar bristles"
      },
      {
        "name": "iridium (one gram)",
        "price": 19.36,
        "description": "corrosion-resistant metal"
      },
      {
        "name": "quark",
        "price": 0.01,
        "description": "Very small"
      },
      {
        "name": "turtleneck",
        "price": 19.99,
        "description": "available in black and slightly-darker black"
      },
      {
        "name": "kaleidoscope",
        "price": 8.25,
        "description": "tube with moving plastic pieces inside"
      },
      {
        "name": "mitt (leather)",
        "price": 15,
        "description": "regulation sized"
      },
      {
        "name": "nothing",
        "price": 10,
        "description": "Hey, if you pay us, we won't ask any questions."
      },
      {
        "name": "violin",
        "price": 2000,
        "description": "Talk about a JS fiddle..."
      },
      {
        "name": "yoyo",
        "price": 1,
        "description": "We had to pull some strings to get this one in."
      },
      {
        "name": "pincushion",
        "price": 1.99,
        "description": "You'll get 'stuck' on it"
      },
    ]

Copyright © Per Scholas 2024