ALAB 308H.5.1 - JavaScript Functions


Learning Objectives

In this lab, you'll be completing some challenges using JavaScript functions to test and reinforce your ability to:

  • Demonstrate the difference between function declarations and function expressions.
  • Create functions that solve a specific task.

 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 Functions Lab."
  2. Define and code 6 of the 10 functions below in the index.js file.
  3. Define the functions using the approach as specified (either as a function expression or declaration).
  4. Be sure to number each function with a comment above it cooresponding to the numbers below.
  5. After each function, call it at least once and console.log the results.
  6. Submit the link to your CodeSandbox on Canvas when you are finished.

For example, here's the first function, our gift to you:

// 1.
function maxOfTwoNumbers(x, y) {
  if (x >= y) {
    return x;
  } else {
    return y;
  }

  // or more "elegantly" using the fantastic ternary expression!
  // return  x >= y ? x : y;
}

console.log(maxOfTwoNumbers(3, 9));

// 2.
...

Deliverables

  • A link to a CodeSandbox that contains at least six completed functions from the following problem statements, along with console.log statements that test their results.

Problem Statements

Here are the functions:

  1. (completed above) Define a function, as a function declaration, maxOfTwoNumbers that takes two numbers as arguments and returns the largest of them. If they are the same, return that number. Use the if...else construct or a ternary expression - the Math.max method is not allowed.
  2. Define a function, as a function expression, maxOfThree that takes three numbers as arguments and returns the largest of them. Again, the Math.max method is not allowed.
  3. Define a function, as a function declaration, isCharAVowel that takes a character as an argument and returns true if it is a vowel, false otherwise.
  4. Define a function, as a function expression, sumArray that takes an array of numbers and returns the sum of those numbers. For example, sumArray([2, 4, 5]); would return 11.
  5. Define a function, as a function declaration, multiplyArray that takes an array of numbers and returns the product of those numbers. For example, multiplyArray([2, 4, 5]); would return 40.
  6. Define a function, as a function expression, numArgs that returns the number of arguments passed to the function when called.
  7. Define a function, as a function declaration, reverseString that takes a string, reverses the characters, and returns it. For example, reverseString('rockstar'); would return the string "ratskcor".
  8. Define a function, as a function expression, longestStringInArray that takes an array of strings as an argument and returns the length of the longest string.
  9. Define a function, as a function declaration, stringsLongerThan that takes an array of strings and a number as arguments; and returns an array of the strings that are longer than the number passed in. For example, stringsLongerThan(['say', 'hello', 'in', 'the', 'morning'], 3); would return ["hello", "morning"].
  10. Define a function, as a function expression, addList that accepts any quantity of numbers as arguments, adds them together, and returns the resulting sum. Assume all parameters will be numbers. If called with no arguments, return 0 (zero).

Bonus

If you have time, feel free to complete more than 6 of the above 10 functions. More practice is always better!


Additional Resources

MDN Functions

Copyright © Per Scholas 2024