JavaScript Functions — Part 1
The first time that I encountered functions in JavaScript, I was confused because coming from a background in Java which had methods that were always attached to classes (objects); seeing JavaScript functions that could exist on their own without being attached to objects took some getting used to. I could easily see advantages in this after a while though because the benefits of being able to abstract functionalities for reuse into functions without the extra overhead of creating objects cannot be overstated.
Functions in Mathematics are defined as a relation or expression involving one or more variables. A function is also defined as a process that associates to each element of a set X, a single element of a set Y. This technical jargon mostly means that a function maps inputs to outputs.
Functions are one of the fundamental building blocks in JavaScript and MDN defines a function as “a JavaScript procedure — a set of statements that perform a task or calculates a value”.
The concept of functions in mathematics still applies to some extent in programming.
To use a function in JavaScript, the function must have been created at some point which is accessible within the scope it is to be called. JavaScript provides various mechanisms for creating functions:
- Function Declarations
- Anonymous Functions
- Function Expressions
- Arrow Functions
- Function Object Constructors
Function Declarations
A function declaration consists of the “function” keyword followed by the name of the function and zero or more parameters separated by commas and enclosed in parentheses. The body of the function is enclosed in curly braces immediately after the parameter list.
JavaScript’s hoisting is especially useful in function declarations because it makes the function available for use even before it is declared in the code as long as the calling line of code is within the same scope as the declaration. Calling the function involves using the function name followed by the corresponding values (arguments) for parameters still enclosed in parentheses.
add (1, 2)When this function is called, the current lexical context (this) would refer to the global object (window in the browser and global in node.js). If an object instance is created from a function using the new keyword, the current lexical context would refer to the function environment.
Functions create a function scope (lexical environment) and variables declared within this function using either var, let or const will be local to the function and cannot be accessed outside the function. This can be seen in the snippet below:
Anonymous Functions
Anonymous functions as the name implies are unnamed function expressions. They hold no meaning on their own and have to be used within any of the following scenarios:
- The anonymous function can be assigned to variables to create Function Expressions.
- Passed as arguments to other functions.
- Returned from other functions or
- Used in Immediately Invoked Function Expressions.
Function Expressions
The difference between a function expression and a function declaration is that the function name is optional for function expressions and the expression is assigned to a valid identifier. Function expressions are possible because functions being first-class citizens in JavaScript are just like any other value types and can be assigned to variables.
For Function expressions, Hoisting involves moving the assigned identifier (variable) into memory. The same principles of hoisting for variables (defined with var, let or const) applies here. Check my article on VAR, LET and CONST -Hoisting, and Scope to learn more about hoisting.
Arrow Function Expressions
Arrow function expressions can be seen as a short form for defining anonymous functions that do not create their own internal context.
According to MDN; “An arrow function expression is syntactically a compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords”. Arrow function expressions are ill-suited as methods, and they cannot be used as constructors.
The syntax for defining arrow functions consist of zero or more parameters enclosed within parentheses followed by the symbol; => and then the body of the function enclosed withing curly braces immediately after the parameter list. The enclosing braces are optional if the function body is a single line and the last expression is implicitly returned from the arrow function.
Arrow functions do not create their own bindings for the keywords; this, arguments, super, or new.target. This implies that the bindings for these keywords created by the parent context of the arrow function will always be available within the arrow function. It also means that object instances cannot be created from arrow functions by calling the new keyword.
Function Constructors
JavaScript provides a Function object (however rarely used) from which functions can be constructed. The functions are created by instantiating the Function object and passing the function body (a string) as the last argument to the Function Constructor. All arguments before the function body argument would be taken as the parameter list to the function. The syntax for this can be seen below;
Immediately Invoked Function Expressions (IIFE)
The term Immediately Invoked Function Expressions (IIFE) leaves no room for ambiguity and according to MDN; “an IIFE is a JavaScript function that runs as soon as it is defined”. It’s also known as a Self-executing anonymous function. They are useful in scenarios where you want to protect the global scope and restrict accessing of variables to just within the IIFE.
You would find that the function is defined and called at the same time with parameters that the function may expect being passed into it.
Function Arguments Object (arguments)
Every function scope has an arguments variable which is an array-like object that contains the arguments passed into that function. Its values can be accessed just like a regular array using zero-based indexing. The arguments object is sorted in the order that the parameters are passed to the function. Arrow functions do not create their own bindings for the arguments object.
JavaScript has no strict sense of function signatures and an arbitrary number of arguments can be passed when calling a function as shown by the example above.
Rest Parameters
Rest parameters (not to be confused with the spread syntax) allow an indefinite parameter list to be represented as an array. They allow accessing an arbitrary number of arguments being passed to a function. The rest parameter can only be the last parameter in a function's definition and it is defined as the variable name prefixed with triple dots (…). A key difference between rest parameters and the arguments object is that while the arguments object contains all the arguments passed into a function, rest parameters is an array of only the arguments that haven’t been given a separate name.
Function bindings
Functions have a context (this) which refers to the object that the function belongs to. It might be the global object or a custom object that the function is attached to. Arrow functions do not provide their own bindings to the “this” keyword. JavaScript provides built-in methods to explicitly set the context that a function would use. The methods are:
- Call
- Apply
- Bind
Function.call
The call method on functions immediately calls a function with the given context supplied as the first argument to the “call” method and the regular arguments to the initial function passed as the rest arguments after passing the context.
Function.apply
The only difference between the “call” and the “apply” methods is in the way the function arguments are being passed. Both of the methods have the context as the first argument. For “apply” the regular function arguments are an array passed as the second parameter to the function.
Function.bind
The “bind” method attached to functions creates a new function with a new context passed in as the first argument to “bind”. According to MDN, “the bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called”. What this means is that both the “this” keyword and preceding regular arguments can be bound to a function using the bind() method. This makes it especially useful in partial functions because you can defer passing of some arguments to a later time.
This is part one in a two-part series going in-depth into the definitions of functions in JavaScript. Concepts related to functional programming, recursion, parameter behaviour would also be discussed in the second part.
So yeah this article would be updated sometime in the near future with the link to the second part. Cheers.
