> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-2/day-2-functions-and-event-handlers/functions.md).

# 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.

```javascript
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

```javascript
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:

```javascript
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>