JavaScript

Functions in Javascript | Explained for beginners

JavaScript, like any other programming language, offers us functions that are very helpful as functions give us the ability to reuse our code and the code becomes clean i-e less congested with the implementation of modularity.

If you are a beginner in JavaScript, don’t worry as in this post, we will hold your hand and walk you step by step to make you master functions in JavaScript.

What is a function

A function is a collection of statements or commands wrapped in a block, kept and maintained separately from the main program to perform some specific task. Functions are very helpful as a developer can reuse that code again and again without needing to write the whole code again.

Now that we know what a function is, let us go through the syntax of a function:

function functionName(arguments) {

// some statements or code

return;

}

A function is declared with the keyword function followed by the name of the function which should be unique and it is a good practice to follow camelCase naming convention; the first word will be in lowercase and the words after that should have the first letter capitalized e.g myFunctionName. Right after the name comes the parenthesis () where parameters are received. We write the function code inside the curly brackets which comes after the parenthesis (). However, it should be noted that when you are working with classes in JavaScript then functions are defined without the keyword function.

We open and close the function with curly brackets {} and all the code goes inside these curly brackets. The function takes input as an argument and returns the output via the keyword return. By default, a function in JavaScript returns undefined if there is nothing to return.

Declaring and calling function

Let’s declare a proper function that will show an alert of Hello!

function myFunc() {

alert("Hello!")

}

Now that we have declared the functions with the name of myFunc let us call the function which can be done by writing the name of the function followed by ():

function myFunc() {

alert("Hello!")

}

// call function

myFunc();

We will see the following output on our browser:

Example 1

Now that we know how to declare and call a function, let us play with the arguments of the function. In this example, we will provide two arguments to the function and display their sum:

function myFunc(num1, num2) {

console.log(num1+num2);

}

// call function

myFunc(2,3); // 5

myFunc(5,5); // 10

In the above code, first, we declared a function and the respective function is receiving two paramters. Next, we console log by adding both numbers. Outside the function, we invoked myFunc twice by providing different arguments. The result of the output is given below:

Example 2

In this example, we will change the above code a little bit by providing default values to the parameters which mean if no value was provided when the function was invoked then the default value will be processed. We will also return the sum in this example:

function myFunc(num1=1, num2=1) {

return num1+num2;

}

// call function

var sum=myFunc();

console.log(sum); // 2

The returned value is stored in the variable sum and we console log the value of the sum variable. As we didn’t provide any values when we invoked the myFunc function hence the function will process the default values which were 1 and 1 whose sum will be 2:

Conclusion

A function is a set of statements put together under a specific name inside curly braces that is executed once we call the function name with round brackets. A function may take multiple arguments as input and return an output. A function helps in reusing the same code as well as it improves debugging and makes our code look clean by helping us implement the concept of modularity(a specific task is inside one block).

In this post, first, we described what a function is and what its syntax is. Then we declared and called the function. After that, we provided examples to fully grasp the concept of functions in Javascript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.