JavaScript Functions – Explained with Examples for Beginners

While coding in JavaScript, we might need to perform a certain action multiple times, e.g., two numbers. We can either do it repetitively in the program or just make a function that takes two numbers as an input, adds them, and returns the answer. This function can then be called whenever there is a need to add two numbers in the program.

What are functions:

Functions are subprograms in a program that consists of blocks of code used to perform certain tasks. Generally, functions take a value as a parameter, process it, and then return an output.

Functions help us reuse blocks of code and avoid repetitiveness. They can be used for dividing complex problems into smaller chunks. They increase code readability and reduce its size as duplicate statements are replaced by a single line of code, i.e., call to the function.

Types of functions:

There are two different types of functions:

Built-in functions/Standard Library Functions
Custom/User defined Functions

Built-in functions

Most programming languages have built-in functions which help us perform certain actions using a single line of code. These actions would otherwise require complex coding. The most common built-in functions in JavaScript are:

sort()
toString()
parseInt()
isNaN()
encodeURI()

User defined function:

As the name suggests, these are custom functions created by the user. The users/programmers can create custom functions for a specific task that they need to perform.

Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:

Use the F12 key in Chrome and other chromium-based browsers.
Use CTRL + SHIFT + K keyboard shortcut keys for Mozilla.
Use Option + ⌘ + C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ +, and in Advanced tab check “Show Develop menu in menu bar”).

How to declare a function in JavaScript:

First of all, we need to declare the function before we can start using it. In JavaScript, the function keyword is used to declare a function. It is followed by the name of the function along with parameters in parentheses. The parameters are optional and are separated by commas.

We then need to define the body of the function. We can put any code in a function; a function can have a single or multiple lines of code depending upon the purpose of that particular function.

functionfunction_name(parameter1, parameter2, ........, parametern)
{
Statements;
}

In this example, we will declare and define a function that squares the value of the given number:

functionsquare(number)
{
let sq = number * number;
return sq;
}

In the example given above, the function square takes a number as a parameter. Then it multiplies the number with itself and stores it in a variable named sq. The function then returns the value that is present inside the variable sq.

The sq variable is a local variable of function square and will not work outside of this function. The variables that are declared and defined in a function are that function’s local variables. On the other hand, the variables declared in the main program are global variables and can be accessed from anywhere in the program.

Now we will use another example which will take two different parameters and multiply them:

functionmultiply(number1, number2)
{
letans = number1 * number2;
returnans;
}

The function given above is taking two different numbers as parameters. It then multiplies them with each other and stores the value in the variable ans. Then it returns the value of the variable ans to where it was called.

How to call a function:

Declaring and defining a function specifies what the function will do when it is called.

Functions can be called by their names along with parameters (separated by commas) in parenthesis. Following is the example of the syntax which can be used to call a function in JavaScript.

function_name(parameter);

In the example given below, we will call the above-mentioned function square, and we will pass number 5 as a parameter to it:

square(5);

The function will square the number 5 and return 25. We can verify this by calling the function inside the console.log() method:

console.log(square(5));

If a function is returning a value, it returns that value to where it was called. As seen in the above example, when we called the function inside the console.log() method, the output was 25, which is the returning value of the function.

We can use any variable or number in place of the parameter. A Function can be called from inside of any other function as well. We can use functions as conditions for if and loop statements as well.

Conclusion

Functions are individual blocks of code that are written in order to perform specific actions. They are the most fundamental building blocks of almost all major programming languages.

As mentioned above, all major programming languages have built-in functions. These functions help developers perform complex tasks using a single line of code. Developers also have the option to write their own functions according to the requirements of their code.

In this post, we have discussed what functions are and how to declare them. Moreover, we also learned to call the declared functions.