JavaScript Function Fundamentals: Understanding the Anatomy of a Function.

Function is a very important concept in JavaScript. It helps us to write reusable, concise and easy to maintain code.

Understanding function in JavaScript is very important as it serve as the foundation for structuring our applications. It determines how data is being managed and it also helps to promote code usability.

In this article, we will learn about some of the built in functions in JavaScript and how we can use them. We will also learn how to create our own functions and how to use this functions we create.

Prerequisites

Before we begin, you'll need a good understanding of the following concepts:

• Variables
• Data types
• Operators
• Control flow statements
• Variable scope

What is a Function?

A function is a set of instruction written to perform a specific task or operation. Think of it this way, whatever task you want to perform, you can write the steps or procedure to achieving this within a function. The function will execute this task when it is called.

In JavaScript, there is a lot of built in functions. Some of this functions you might have used without identifying them as functions. console.log(), alert(), prompt() are some of the functions in JavaScript.

There are several ways to create or define a function. In this article, we will look at three ways. Function declaration, function expression and arrow function.

Function Declaration Without Parameters.

I know. You are probably asking yourself what I mean by parameters. Every function has what is called a function parameter. Function parameters are variables created within a function during function definition. This parameter contain values that the function is expected to receive when it is called or invoked.

The diagram below is a simple diagram of a function anatomy. The variables width and height inside the parenthesis in the below image are the parameters of the function.

Using the above diagram as example, function declaration is made of the following:

• Function keyword
• Function name
• Function parameter
• Function body
• Return statement

Let us look at a code example.

I want you to take note of two things from our example. In line 5, after our function name (addToCount), the parenthesis has no parameters unlike our function anatomy diagram. In line 17, we called or invoked our function. When we call or invoke our function just like you can see in line 17, we see the value or the output of the function. In this case, the value of the function is displaying in line 15.

Let's look at another example.

In this example, we called the sayHello() function in line 6. You can agree with me that there is no parameters in the sayHello() function.

Function Declaration With Parameters.

We have already learned what a function parameter is. Let us take a look at the below code example with parameters. The function displayName() took two parameters when it was defined in line 2, firstname and lastname. I want you to take note of something, in line 7 and 8, when we called the function displayName(), we passed in a value of "John", "Doe". We are able to pass this value because this function already has parameters in line 2. The value we are passing in here in line 7 and 8 when calling the function is called argument.

From the above explanation, I know you already have an idea of what an argument is. An argument is a value equivalent of the function parameter that is being passed into a function upon invoking of the function.

Here is another example.

Function Declaration With Return Statement.

Before we looked at how to define a function with function expression, I want us to take a look at function return statement. Every function should have a return statement. Without a return statement, the value of our function is undefined. Whatever we return become the value of our function.

Here is an example.

Function Expression

Function expression is also called a named function. Unlike the previous function we have looked at, function expression assigns the function to a variable upon definition.

Here is an example of what a function expression looks like. From the above example, in line 2, sayHello variable was assigned a value. This value is a function. This makes sayHello() a function which we can invoke in line 6 to get a value.

The major difference between a function expression and function declaration aside from saving our function in a variable upon definition is that function declaration can be invoked before declaration. This is not the same with function expression and arrow function. Function expression and function declaration follows a top-to-bottom control flow mode of execution.

Here is an example

In line 2, we invoked the multiply function before we declared the function in line 5. We can only do this with function declaration.

Another example of function expression.

Arrow Function

Arrow function is another way of writing a function in JavaScript. It allows us to write shorter and more cleaner code. The function keyword in both the function declaration and function expression is removed and replaced with the (=>) symbol.

Here is an example. You notice how the above example looks like a function expression. This is because of the assignment of the function to a variable. You also notice that unlike function expression, the function keyword is replaced with this => symbol. This make it an arrow function.

Arrow functions that span a single line, the curly braces that contains the function body is omitted.

Here is the syntax.

Here is another example

Conclusion

We have learned what a function is, and how to create a function. We have also learned about some terminologies associated with functions and their meaning like function parameters, arguments, and return statement.

If you want to perform different tasks, you can achieve this by creating your functions and writing your logic within the function body.

I hope you enjoyed reading this article and have learned a thing or two. Do leave me a comment as I would love to hear what you are currently learning