WDD 131: Dynamic Web Fundamentals

W03 Learning Activity: JavaScript Functions

Overview

Functions in JavaScript are common programming control structures. They are blocks of code that can be called by name multiple times throughout a program to perform specific tasks. Functions can receive input data and return output data back to the caller.

Prepare

• Read Functions – MDN

  Focus on how to define functions and how to call functions:

  • Function declaration
  • Function expression
  • Arrow function expression
  • Calling Functions

Check Your Understanding

Given the following code snippet:

let firstName = 'Antonia';
let lastName = 'Francesca';

• Write a function declaration / definition named fullName that has two parameters named first and last. The function's purpose is to combine those two string parameters together to return one combined string (a 'full' name) with a space between the first and last variables.
  Answer

  function fullName(first, last) {
    return `${first} ${last}`;   // string concatenation first + ' ' + last (not preferred)
  }

• Use an anonymous function expression to do the same thing where the function is assigned to a variable named fullName.
  Answer

  const fullName = function (first, last) {
    return `${first} ${last}`;
  }

• Use an arrow function expression to do the same thing where the function is assigned to a variable named fullName.
  Answer

  const fullName = (firstName, lastName) => `${firstName} ${lastName}`;

• Write an expression that calls the fullName function declaration and writes the result to an existing HTML element's text node with the ID of fullName
  Answer

  document.querySelector('#fullName').innerHTML = fullName(firstName, lastName);