Functions

• List all the functions you already know (hint: anything with () at the end)

  • prompt, console.log, document.getElementById, parseInt, array.toUpperCase

• Part of the magic of programming is reuse! You can write your own functions and then use them many times.

function addKitten() {
  const container = document.getElementById("container");
  const kittenImg = document.createElement("img");
  kittenImg.src = "http://placekitten.com/g/200/300";
  container.appendChild(kittenImg);
}

addKitten();
addKitten();
addKitten();

What happens if...?

• I don't call the function at all?

• I forget the ()?

• I call the function before defining it?

Parameters and return values

Function parameters + return values

function shoutify(text) {
  return text.toUpperCase();
}

const lyrics = "Whoa, I'm halfway there!";
console.log(lyrics);

// Can store the returned value in a variable
const shoutyLyrics = shoutify(lyrics);

// Can use the result without storing it in a variable
console.log(shoutify(lyrics));
document.getElementById("songlyrics").textContent = shoutify(lyrics);

Extend this example:

• If no parameter is passed in, return ARRRGHHH!!! instead.

Let's do another example:

function biggerOf(num1, num2) {
  if (num1 > num2) {
    return num1
  } else {
    return num2
  }
}

console.log(biggerOf(3, 20))
console.log(biggerOf(300, 20))
const biggerNum = biggerOf(23 * 4, 13 * 14))
console.log(biggerNum)

What happens if...

• I don't have a return at all in the function?

• I try to console.log(num1) outside the function? After the function? After the function is called?

• What if I use const or let to create a variable inside the function?

• How many parameters can I have?

• What happens if I put some code after the return?

• How do I return multiple bits of information?

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions