Functions

In JavaScript all functions are objects. You can pass them around, store them in variables and arrays, and pass them as parameters to other functions.

Create a named function like this:

function sayHello() {
  alert("hello function!");
}

Functions assigned to variables

Because functions are objects, we commonly leave them unnamed and jus assign them to variables:

const sayHello = function () {
  alert("hello function!");
};

This might seem strange, but in JavaScript it is totally normal. Functions in JavaScript are datatypes just like numbers, arrays, strings or objects. We can treat them just like any other datatype, assign them to variables, pass them as parameters to other functions, even wrap them in objects and call them methods. In JavaScript, code is data.

Note that I used the keyword const to create the sayHello variable. This is normal, as usually you won’t want to redeclare a variable with a function in it.

Functions are objects

If I console.log a function, I see that function literal printed to the console:

console.log(sayHello); // prints the function itself, not the return value of the function

The console is creating a representation of the function object.

As objects, functions have methods and attributes. I can call

sayHello.toString();

and I will see a string representing the function.

Functions are objects of type Function

I can actually create a function using the Function constructor like so:

const sayHello = new Function('alert("hello function!")');

As you can imagine, creating runnable code from a string is a bit of a problem, so many sites block this using a Content Security Policy (CSP).

Being objects, functions can have attributes and even methods of their own:

sayHello.toString(); // prints the content of the function as a string

Calling Functions

If you save a function in a variable, you can call it using braces as you’d expect, like this:

const sayHello = function () {
  alert("hello function!");
};
sayHello();

Passing Parameters

Pass parameters to functions between the braces in the usual way:

const sayHello = function (name) {
  alert("hello " + name);
};

sayHello("Dave"); // alerts 'hello Dave'

If you pass too many parameters, additional ones will be discarded.

sayHello("Dave", "Mike", "Dan");
// alerts 'hello Dave'

If you pass too few, unassigned parameters will get the value undefined.

sayHello();
// alerts 'hello undefined'

Fat Arrow Functions

Fat arrow functions were introduced a few years back to give us a tighter syntax, and fix a few issues with the this keyword that we will get to in a bit. They are sugar for a regular function, with a value of this stored in a closure. More on this later.

A fat arrow function looks like this:

const sayHello = () => {
  alert("hello");
};

If my function has only one line, curly braces are optional:

const sayHello = () => alert("hello");

If my function recieves exactly one value, I can omit the round braces too:

const sayHello = (name) => alert(`hello ${name}`);

A fat arrow function will automatically return the last evaluated value, so you rarely need a return statment:

const sayHello = (name) => `hello ${name}`;

console.log(sayHello("dave"));

Fat arrow functions are sugar on top of regular functions, we’ll see more on this once we reach the section on closures and this.