Introduction

One of the most emphasized coding principles is the DRY principle, which is the need to as practicable as possible, avoid repeating codes. In simple terms, reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. It is on this premise that functions find their most important application. It is therefore necessary to understand how to write and use functions as beginner developers as this will help to a great deal reduce repeated codes.

This article will cover the basics of JavaScript functions, types and syntax with simple examples.

What is a function?

A function is a block of code that can be called many times for use. Functions could be mistaken for procedures except that while functions take an input and return an output where there is some obvious relationship between the input and the output, procedures do not necessarily return an output or have a relationship between statements. Functions allow the code to be called many times without repetition, basically performing similar actions in many places of the script.

While we can write our own functions, there are numerous examples of built-in functions in JavaScript meant for different purposes. These include but are not limited to the prompt( ), alert( ), and confirm( ) functions. However, these are not the focus of this article. This article is meant to help beginners create basic functions and understand the types of functions and their syntax.

Naming conventions for functions

Since functions are supposed to perform an action, they are usually named as verbs, and the advisable methods of naming variables which also applies here. The names should be brief and should describe what action it is meant to perform this is for code readability by other developers. It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes. Typical examples: get, calc, create, check and show.

Types of Functions Syntax

There are four types of functions and these are as listed below.

1. Built-in JavaScript Functions
2. Function Declaration
3. Function Expression
4. Arrow Functions

Our focus in this article will be on the three other functions asides the built-in JavaScript functions.

Function declaration:

The function declaration (function statement) defines a function with the specified parameters.

Syntax for Function declaration

Without parameters

function functionName( ){
Statement //code to be executed
}

By default a function will return undefined and no value unless it is called. For the function to return a value we need to call it by writing the syntax, the functionName followed by parenthesis as seen below:

functionName( )

While we can declare functions without parameters, sometimes, we list variables in a function as parameters. Parameters are used just like variables as placeholders for information or data that will be passed to the function when it is called. We declare the functions stating their parameters, then call them passing arguments. These parameters allow functions to accept input(s) and perform a task using the input(s).

With parameters

function functionName (parameter1, parameter2…) {
Statement //code to be executed
};

functionName(parameter1, parameter2…);

Example

function sub (a, b) {
    console.log(a-b) 
};

sub(5, 2);

// Outputs 3;

Function Expression

There is not much difference between the syntax of a function expression and function declaration and this is as seen below:

Syntax for Function Expressions

const  functionName = function( ) {
Statement //code to be executed
};

functionName( );

The syntax in a function expression and a function declaration are different just because of the function name, which can be left out in function expressions to create anonymous functions. A function expression can be used as an Immediately Invoked Function Expression (IIFE) which runs as soon as it is defined.

functionName( )

Example

const sub = function (a, b) {
    console.log(a-b)
};

sub(5, 2); 

// Outputs 3;

Arrow Functions

One benefit of using arrow functions is shorter syntax. They are often used for short line of code or to execute single liners functions:

Syntax for Arrow functions

(parameters) => { statements// code to be executed };

The parameters parenthesis can be left empty if there are no parameters.

Example

const sub = (a, b) => console.log (a-b); 

sub (5, 2);

// Outputs 3;

Note that the expression a - b can still be put in square bracket { } and the statement will still be executed:

let sub = (a, b) => {console.log(a-b)};

sub(5, 2)

// Outputs 3;

Conclusion

The importance of functions can not be overstated as they help us write better readable and reusable line of codes and although this article provides the basics of JavaScript functions and types, there is a whole lot more to functions and its applications in programming which stretches beyond this scope.

For further reading, please refer to the Mozilla Docs and JavaScriptInfo.

I hope you found this brief overview useful in your developer journey. Please, leave a comment if you have any great resources on the subject for others to explore. Kindly follow me on Twitter as I share useful information on programming.

Thank you for reading!