Functions: Function Declarations And Function Expressions

Functions are used in order to be able to perform the same action in your code while avoiding repetitions. After declaring a function, you can call it in other parts of your script by simply typing its name(). There are two ways of creating a function:

1. Function declaration:

function functionName(optionalParameterList) {
... ; // functionBody
}

2. Function expression:

let functionName = function optionalName(optionalParameterList) {
... ; // functionBody
}

Unlike function expressions, function declarations need a name identifier on them. Even though function expressions can be anonymous, however, it is recommended to name them in order to have readable, self-documenting code, to easily reference the function itself in a nested call, and to make your debugging operations less complicated.

While function declarations can be used in your whole script (or block, depending on where they are declared), function expression can only be used after being read and executed: in the latter case the creation of the function happens at a later time, preventing said function to be called (utilised) until it has been defined. This is why function declarations are usually preferable.

A variable can either be declared within a function or outside of a function: this is the main difference between local variables and global variables. Closures are defined as functions that have an environment of their own, and that are able to access and remember outer variables. In JS all functions are closures, and they all use a special hidden property, [[Environment]], to recall where they were created.

Functions may or may not have parameters (arguments): when a function has one or more parameters, their initial values won’t be found within the function’s block, but will be given with each call of the function. If you don’t specify a function’s parameter its value will be “undefined”, but to avoid that you can set a default value, to be used in case the parameter is missing. Extra parameters are usually ignored.

Constructor functions are regular functions that are used to create multiple objects. Their name must begin with a capital letter, and they have to be called with new; for instance: let functionName = new Funct(){}. Whenever you execute a constructor function, you automatically create a new empty object {} which - unless overwritten - is assigned to this.

Important things to note:

1. In JS functions are considered to be values (representing actions). Each function should be limited to perform a single action, and its name should generally begin with a verb suggesting said action (create, get, calc, etc) while being short yet descriptive.
2. Function declarations cannot be called immediately. Function expressions, on the other hand, can be called immediately using parenthesis around them.
3. In JavaScript, you can encapsulate blocks of code into anonymous function expressions wrapped in brackets that are evaluated immediately (called IIFEs, Immediately Executed Function Expressions), like so: (function () {})();. This strategy allows you to create modularised scripts, to hide the variables within the enclosed code from the outer (parent) scope, and to prevent you from overwriting existing variables. Trying to access said variables will give you a ReferenceError: this will therefore allow you to only expose some parts of your code while, at the same time, hiding the “sensitive” elements (“Principle of Least Authority”).