12. JavaScript Functions

What you will learn

• How to create and call a function
• Parameters, arguments, and return values
• Default parameters
• Arrow functions

What is a function?

A function is a named block of code you can run whenever you need it. Write it once, use it many times, and keep your program organised.

Declaring and calling

<p id="demo"></p>

<script>
  function sayHello() {
    document.getElementById("demo").textContent = "Hello from a function!";
  }

  sayHello();   // call the function
</script>

Declaring a function does nothing by itself. The code inside runs only when you call it with parentheses.

Parameters and arguments

Parameters are the names in the declaration. Arguments are the actual values you pass in when calling.

<p id="demo"></p>

<script>
  function greet(name, city) {
    return "Hello " + name + " from " + city + "!";
  }

  document.getElementById("demo").innerHTML =
    greet("Sam", "Lahore") + "<br>" + greet("Ali", "Dubai");
</script>

Return values

return sends a value back to where the function was called and ends the function. A function with no return gives back undefined.

<p id="demo"></p>

<script>
  function add(a, b) {
    return a + b;
  }

  const total = add(5, 7);
  document.getElementById("demo").textContent = "5 + 7 = " + total;
</script>

Default parameters

Give a parameter a fallback value for when the caller leaves it out.

<p id="demo"></p>

<script>
  function welcome(name = "friend") {
    return "Welcome, " + name + "!";
  }

  document.getElementById("demo").innerHTML =
    welcome("Sam") + "<br>" + welcome();
</script>

Function expressions and arrow functions

A function can be stored in a variable. Arrow functions are a shorter way to write them.

<p id="demo"></p>

<script>
  // function expression
  const double = function (n) {
    return n * 2;
  };

  // arrow function
  const triple = (n) => n * 3;

  // arrow function with several lines
  const describe = (n) => {
    const isEven = n % 2 === 0;
    return n + (isEven ? " is even" : " is odd");
  };

  document.getElementById("demo").innerHTML =
    double(4) + "<br>" + triple(4) + "<br>" + describe(7);
</script>

With one expression, an arrow function can skip the braces and return. Arrow functions are very common as short callbacks, which you will meet with arrays and events.

Functions as callbacks

A function can be passed to another function. You already did this with addEventListener:

<p id="demo">Click the button.</p>
<button id="btn" type="button">Count clicks</button>

<script>
  let clicks = 0;

  function countClick() {
    clicks++;
    document.getElementById("demo").textContent = "Clicks: " + clicks;
  }

  document.getElementById("btn").addEventListener("click", countClick);
</script>

Notice countClick has no parentheses here. We pass the function itself, and the browser calls it on each click. Writing countClick() would run it immediately instead.

Common mistakes

• Declaring a function but never calling it.
• Forgetting return and getting undefined.
• Writing addEventListener("click", myFunction()) with parentheses.
• Putting code after return. It never runs.
• Making one huge function that does many unrelated jobs.

<p id="demo"></p>

<script>
  function rectangleArea(width, height) {
    return width * height;
  }

  document.getElementById("demo").textContent =
    "Area: " + rectangleArea(6, 4);
</script>

Summary

• Functions package code you can call again and again.
• Parameters take values in, and return sends a value out.
• Arrow functions and callbacks are used everywhere in modern JavaScript.