Understanding Javascript functions as a Beginner.

Functions are one of the very important and essential parts of JavaScript and programming in general. They are among the fundamental concepts a beginner needs to learn and understand before moving ahead with others.

This article answers four (4) questions beginners like myself frequently ask about functions. As we take the questions one after the other, you are bound to come across unfamiliar terms which will all be explained as we further down the article.

The first question, What is a Function?

A function is a reusable piece of code or a subprogram that performs a particular task. Now, to make this very simple and literal, a function is a set of code you write to perform a task and whenever you want to perform such tasks again on your website or application, you do not need to rewrite the same code again, you only go back and reuse the code you wrote to perform the same task before. It's can be likened to delegating duties in a workplace, when you want a task to be done, you call the office in charge of the said work instead of assigning duties again.

A function accepts Values, values are what the function will work with, for instance, if the task you want your function to perform is calculations, the numbers you want to calculate will be the values in this case.

Now that we understand what a function is, we'll move on to the next question which is How do I define a function?

There are different ways of defining a function, in this article, we will cover three and they are:

-Function Declaration

-Function Expression

-Arrow Function

Function Declaration.

To define a function using function declaration, you have to note the syntax which includes:

• the function keyword.

• the name of the function you’re creating, it is advisable you use a descriptive name, say you want to write a function that calculates, your function name should be something like "add Number".

• a parenthesis, which can be empty () or take parameters like this(parameters).

• the body of the function enclosed in curly braces, this is the code that will run or perform the said task when the function is called.

  The example below shows how everything looks when put together.

To further explain the function declaration, the illustration below is a function that adds numbers using function declaration syntax.

Function Expression.

This way of defining a function allows us to either name a function or have an unnamed function, in other words, an anonymous function. In function expression, functions are assigned to a value or variable, that is setting the function equal to a variable.

Arrow Function.

This is another way of defining a function, it is a function expression written in a shorter and cleaner syntax. Like the name, the syntax looks somewhat like an arrow thus: ()=>{} The parenthesis for parameters, the arrow symbols replacing the function keyword, and the curly braces for the statement (work to b done with the function).

The illustration below shows how we used the arrow function to rewrite the same addNumbers function.

Having read that a function will only execute when you call it, the next question I asked was how do I call a function?

Firstly, the process of calling a function to execute is known as invoking the function. A function is invoked when you write the function name with open and closed parenthesis behind it. Simple and short. Pay attention to the parameters when working with functions as functions with empty parameters are called with empty parenthesis while those with parameters are called with the arguments added in the parentheses.

The first illustration below is an example of the addNumbers function invoked with empty parenthesis.

This second illustration is an example of the addNumbers function invoked with arguments.

What are Parameters and Arguments?

We mentioned parameters earlier when we talked about defining functions and what goes into the parenthesis after the function name. Parameters and Arguments might seem a bit confusing here so let me clear the confusion. Parameters are values added into the parenthesis when functions are first defined, they hold the place for the actual values to be used when you start working with the function declared. In our addNumbers function, number1 and number2 are the parameters we used when declaring the function. Parameters can be more than one as seen in our case, and they must be separated with commas. Arguments on the other hand are the actual values you’re working with when you need the function to perform a task. In our addNumbers function, the numbers 2 and 4 are the arguments we want to add together.

The above illustration is an arrow function with two parameters while the one below is a function invoked with two arguments.

As a beginner, I knew how difficult it was to grasp concepts and to fully understand what they entail, so, this article tries to simplify Javascript functions and help other beginners out there to be able to navigate the different ways of defining a function and build projects with functions.