JavaScript Functions

A JavaScript function is a group of instructions that together perform a task; it is defined once and can be used (i.e. called) as many times as needed.

Declaring a function

A function is declared via the `function` keyword:

function sayHello(name) {
  return "Hello " + name;
}

Using a function

Here is how to call our sayHello function, using "Paul" as value for the name parameter:

sayHello("Paul");  // returns: "Hello Paul"

Returned value

A function always returns a value; if nothing is specified, undefined is returned. In the example below, we're printing "Hello Paul" to the console but not return a value. The second console.log will show undefined as the result of calling sayHello("Paul")

function sayHello(name) {
  console.log("Hello " + name);
}
console.log(sayHello("Paul"));  // prints: undefined

Default arguments

Let's see what happens if we "forget" to send an argument to the function:

function sayHello(name) {
  return "Hello " + name;
}
console.log(sayHello());  // prints: "Hello undefined"

Notice that undefined is appended to the "Hello " string before being returned.

We can, however, specify a default value to be used for a parameter:

function sayHello(name = "World") {
  return "Hello " + name;
}
console.log(sayHello());  // prints: "Hello World"

Anonymous functions

A typical JavaScript function has a name and parameters:

function sayHello(name) {
  return "Hello " + name;
}

Just as the name implies, an anonymous JavaScript function is a function without a name. The simplest example is assigning a function to a variable:

let sayHello = function(name) {
  return "Hello " + name;
}

Whilst the function doesn't have a name, because we've assigned it to a variable, we can use still call it when required:

console.log(sayHello("Paul"));  // prints: "Hello Paul"

Functions as parameters

A very common use-case for anonymous functions are as arguments for JavaScript functions, for example `setTimeout`:

setTimeout(function sayHello() {
  console.log("Hello World");
}, 1000);

setTimeout takes 2 arguments: a function to execute, and an interval in miliseconds after which the function is executed. In the example above, we've passed a function named sayHello, but, even though we've given it a name, the function won't be available to use:

sayHello();  // ReferenceError: sayHello is not defined

Arrow Functions

ES6 introduced a new syntax for functions - our example can be written more concise as:

let myArray = [1, 4, 42, 11, 79];
let doubleArray = myArray.map( item => {
  return item * 2;
});
console.log(doubleArray);  // prints: [2, 8, 84, 22, 158]

However, arrow functions come with some limitations:

  • no own bindings - this or super is not available
  • yield cannot be used insite them

Manage DOM elements

An area that benefited massively from this new syntax was DOM elements manipulation and actions. For example, triggering actions when a button is clicked is now as simple as:

let signupButton = document.getElementById("signup");
signupButton.click(event => {
  console.log(`New signup: ${signupButton}`);
});