JavaScript Functions

In JavaScript, functions are subprograms in the code that can be called by other code that is either internal or external to the function. A function comprises of a sequence of statements called the function body. Values can be fed to a function as parameters and the feedback given is a value. Functions can be forwarded to other functions, given as feedback by other functions, and can be assigned to variables. Their difference from objects is that they can be called.

Let's decipher functions.

Functions occur in different forms. They include;

• Function declarations.
• Function expressions.
• Arrow Functions.

Function Declarations.

Function declarations are function statements that consist of;

• The function keyword.
• The function's name
• The list of parameters to the function in parentheses and separated by commas.
• JavaScript statements that define the function, placed in curly brackets {}.

Here is an example of a simple function named area:

function area(number)
 {return number*number};}

The function is used to calculate the area of a square. It takes only one parameter, which is the length of one side called number The function is made up of one statements that returns the parameter of the statement which is the number multiplied by itself. The return statement shows the value to be returned by the function.

You can pass parameters to other functions by value. It means that once a new value is assigned to a parameter that was passed to a function, the change is not reflected in the code that called that function. On the other hand, when you pass an object as a parameter, the change can be seen outside the function. When you pass arrays as parameters, a change in values is also visible outside the functions.

Note that you can quote function declarations before declaring them.

function calcAge (yearofBirth) 
{return 2023 - yearofBirth;}
const age = calcAge (1980);
console.log(age);
// returns 43

In the example above you should note that the function declaration creates a variable that uses the same name as the function. It shows that function declarations can be referred to by their name in the scope of code that they are defined in, and also in their own body.

It is recommended that you use strict mode when using function declarations. In strict mode, block-level function declarations are scoped to the block and are hoisted to the top of the block hence allowing their use before declaration.

Function Expression

A function expression differs from a function declaration in that the function name can be omitted creating anonymous functions. They can be used as Immediately Invoked Function Expressions which run immediately they are defined. You can use function expressions to define functions inside expressions. On the other hand, you can define function expressions by using the function constructor and a function declaration. Function expressions cannot be referred to before they are created since they do not support hoisting.

When referring to the current function inside the function body, you must create a named function expression. The name used is local to the function's scope. It doesn't change its name is allocated to a variable. If you choose to omit the function name, it uses the variable (implicit) name. If you name the function, it will use the function (explicit) name.

const age = function () {};
age.name; 
// "age"

const age0 = age;
age0.name; 
// "age"

const age1 = function newAge () {};
age1.age; 
// "newAge"

console.log(age === age0); 
// true
console.log(typeof newAge); 
// undefined
console.log(age1 === newAge)
// false (error since newAge == undefined)

The examples above show you how you can name function expressions at different positions and their differences in output.

You can create anonymous functions that are unnamed. In the example given below, the function is assigned to const. The function returns the age after inputting the person's yearofBirth.

const calcAge0 = function (yearofBirth)
{return 2023 - yearofBirth;}
const age0 = calcAge0 (1980);
console.log(age0);
// output; 43

Arrow Function Expressions

Arrow functions are a more advanced alternative to function expressions. To better understand it, let's start with an example of how you can change a function expression into an arrow function.

// an anonymous function expression
(function) (age) {return 2021-yearofBirth;});

// Replace the Keyword "function" with an arrow placed
// between the argument and the opening body bracket

(age) => {return 2023 - yearofBirth;};

// Eliminate the body braces and the keyword "return". 

(age) => 2023 - yearofBirth;

// eliminate the parameter parentheses

age => 2023 - yearofBirth;

The example above is an illustration of instances where both parentheses around the parameter and the braces can be omitted. They can only be omitted if the function has only one simple parameter. If there are multiple parameters, no parameters, or default parameters, the parentheses around the parameter list are required. If the function is used to return an expression, braces can be omitted. When the body has additional lines of processing, the return keyword and the braces are required since arrow functions cannot decide whether you want to return or not.

// Anonymous function
(function (x, y) 
{const unit = 8;
return x + y + unit;
});

// Arrow function
(x, y) => {
const unit = 8;
return x + y + unit;
};

Note that arrow functions are always unnamed. If an arrow function needs to call itself, you should use a named function expression or the arrow function can be assigned to a variable so it has a name.

Calling functions

When you define a function, you specify what it does once it is called. Calling a function performs the instructed actions with the given parameters.

area (9);

The example above calls the area function with the argument that the length of one side is 9. The function is executed and returns the value 81. You must place functions in scope when they are called, but remember that function declarations can be hoisted.

Conclusion

You need to understand how functions work to be a good JavaScript programmer since it is essential in writing efficient code. I hope you have learnt something from the article. If you would like to contact me directly, find me on twitter @devdenis_.