2 minute read
Functions in JavaScript
A function is a block of instructions that performs a task. The code inside the function usually only executes when the function is called. To use a function, it must first be defined somewhere in the scope (local or global) from which it needs to be called.
Input parameters are declared in parentheses. There are none in this example
Declaring functions
A function is declared by providing a name, a list of input parameters, and a block of code enclosed in curly brackets. A value can be returned by the function by using the “return” statement.
Name of the function
Outputs the result of the getFirstName() function to the console log
var firstName = "John"; function getFirstName() { return firstName;
} Code to be executed
console.log(getFirstName());
Simple function definition
Once a function has been defined, it can be called many times from elsewhere in the code.
Function statement vs function expression
In JavaScript, a function will behave differently depending on how it was declared. Function statements can be called before the function has been declared, while function expressions must be declared before they can be used.
Input parameters for the function getFullName()
Function statement
A function statement begins with the word “function” followed by the function name, the input parameters, and then the code block in curly brackets.
function getFullName(firstName, lastName) { return `${firstName} ${lastName}`; } console.log(getFullName("John","Smith"));
The template literal notation `${variable}` returns a string with the variable value embedded in place
Function expression
A function expression begins with a variable declaration and then assigns a function to the variable.
var fullName = function getFullName(firstName, lastName) { return `${firstName} ${lastName}`;
} Variable declaration
console.log(fullName("John","Smith"));
Nested functions
It is also possible to nest a function within another function. The inner function, however, can only be called by its outer function. The inner function can use variables from the outer function, but the outer function cannot use the variables of the inner function.
Why use nested functions?
Nested functions are only accessible from inside the parent function. This means that the inner function contains the scope of the outer function.
A function expression declaration A nested function expression declared inside the car function
These variables are only accessible within the self-executing function
var car = function (carName) { var getCarName = function () { return carName; } return getCarName(); } console.log(car("Toyota"));
The nested function getCarName() can access the variable carName from the parent car function
Self-executing functions
Normally a function needs to be called in order to execute its code. However, a function that is surrounded by a self-executing function will run as soon as it is declared. Self-executing functions are often used to initialize the JavaScript application by declaring a global scope variable counter.
(function getFullName() { var firstName = "John"; var lastName = "Smith"; function fullName() { return firstName + " " + lastName; } console.log(fullName()); })();
Using self-executing functions
Variables and functions declared in a self-executing function are only available within that function. In this example, the nested function fullName() can access the variables firstName and lastName from the parent function getFullName().
