Functions in JavaScript

You can create functions in different ways in Javascript. Now a function in JavaScript works similar to any other language where it allows you to break out of the normal flow of your code, and then run a separate block of code.

Calling a JavaScript Function

Calling a JavaScript function is the same as it is for many languages. You need to call it by its name and then pass any optional parameters within parentheses.

JavaScript functions can be found in external files you load in, such as a library or framework, or it can be a separate file that you create.

foo(); // calling a function without parameters
goo(19); // passing a parameter to a function that you call
let answer = loo(); // assigning a value returned from a function call

Functions can even be called within a function parameter list. The function in the parameter list will be called first, then the outer function.

goo(loo()); // the return of a function being passed as a parameter to another function

Function Declarations

The most typical way is with the keyword function, followed by the function name, the optional parameter list, and the function body.

It will look similar to a Java or C/C++ style function. However, there is no prototype like in C/C++, and there is no return type since variables are dynamically typed in JavaScript.

The general form would look something like the following:

function functionName([optional,parameter,list]) {
    // function body goes here
}

Actual examples of what you might see would be:

function displayHello() {
    console.log("Hello");
}

function displayWord(word) {
    console.log(word)
}

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

Default Parameters

Earlier versions of JavaScript didn’t support default parameters, so you would have to test for undefined.

function raiseToAPower(x,y) {
  if(y === undefined) {
    y = 2;
  }
  return Math.pow(x,y);
}

Of course, with the nullish coalescing operator, it’s a little simpler.

function raiseToAPower(x,y) {
  y = y ?? 2; // check for null/undefined.
  
  return Math.pow(x,y);
}

Now, however, since 2015, you can set a default value. This makes your code much cleaner and easier to read.

function raiseToAPower(x,y = 2) {
  return Math.pow(x,y);
}

As with all other languages, once you start defining a default value in your parameter list, you must define a default value for all of them.

Assigning a Function to a Variable

A common thing in JavaScript, that most other languages don’t support, is assigning a function to a variable, like you see below.

const add = function(1,b) { return a + b; }

Technically, the function() is an anonymous function in JavaScript, that is then assigned to the constant add. It is called like:

result = add(5,6);

Passing a Function to another Function

Now you might ask, what’s the point of passing a function to another function? Well, the more important aspect is being an anonymous function. These functions are often used in libraries, where you can pass the function to another function, and that function can then be called within the first function. This allows more complex possibilities within a function, with no overloading.

Anonymous functions, and the idea that a function can be stored in a variable and later called, allow us to pass functions to another function to be operated on.

This is useful in several situations, such as if we don’t want a regular sort for an array. JavaScript provides an array object, with a sort feature. But if I have an array of Students, and I want to sort by major then name, or some other combination, I need to have my own sorting algorithm. Instead of writing the whole algorithm, I can simply tell JavaScript how I want them organized, by saying which is which. I can use the built in algorithm for primitive values like strings, numbers, etc.

I also use the passing of a function when I use various other array based iteration functions, such as .map(), .filter(), and .forEach().

Functions in JavaScript was originally found on Access 2 Learn