Javascript Functions Demystified - The Basics

Introduction

A lot of programming beginners have a hard time understanding what functions are, how to use them, and when to use them. I also had some issues grasping the concept of functions when I first started programming, but it is not a hard concept if you take the right approach to understanding how it works. This article will be a multi-part one, in which we go over the concepts of functions from basic to advanced. Code samples will be provided in this article to help aid our understanding of the concept.

What are Functions?

A function is simply a block of code that performs a particular task. Functions are like containers that contain instructions to execute a particular task. They are blocks of codes we write once and can be used in many places. Every programming language has functions. Some programming languages may refer to them as methods and some procedures. The idea is the same in all programming languages including javascript.

Below is an example of a function in Javascript

function printHello(){
    console.log("Hello World");
}

The code block above is a simple javascript function to print out the string "Hello World" Before I explain the code block, let us examine the importance of functions in Javascript.

Importance of Functions

1. Functions allow us to create a block of code that can be reused multiple times throughout our program. Instead of duplicating the same code in different parts of our codebase, we can define a function once and call it whenever needed. This concept is known as DRY in programming. "Don't Repeat Yourself"

2. Functions enhance the modularity and organization of our code. By breaking down complex tasks into smaller, self-contained functions, we can improve the readability of your codebase. Each function can have a specific purpose, making it easier to understand and reason about the code.

3. Functions help in organizing code into logical units, making it easier to navigate, understand, and maintain.

4. Functions enable collaboration in large projects by allowing developers to work on different functions independently. The independent functions can then be brought together to create a whole application

While these are some of the importance of using functions, there are many more benefits of using functions as it makes the development process smoother and more organized.

Anatomy of Functions - Syntax and Declaration

Let's consider the function below:

function printHello(){
    console.log("Hello World");
}

In the function, above, we have some words like "function", "printHello", the opening and closing parenthesis, and the pair of curly braces. All of this stuff is the components that comprise a function in javascript.

To define a function in javascript, we use the function keyword. This tells javascript "Hey, we are trying to create a function here". The function keyword is then followed by the name of the function we are trying to create. The function name can be anything but must follow the same rules for naming variables. The function name is then followed by parenthesis (). The code block to perform the task expected of the function is then placed in between curly braces {}.

Functions can include parameters that are comma-separated in the parenthesis. Parameters are variables that allow us to pass values into a function when using the function.

function greetPerson(name){ // name here is a function parameter
    console.log("Hello", name); // This prints out Hello and the value of name
}

In the function above, we have a function parameter called name. A value will be passed into the greetPerson function whenever we want to use it and that value will replace "name" wherever it is encountered in the function block.

Anatomy of Functions - Invoking a function

When defining the functions, we said they are code blocks that perform a task, and can be used in multiple places. We have talked about how to declare a function above. We should talk about how to use them now. The process of using a function is known as "Invoking the function". Another name for this is Calling the function.

To call a function, you call the function name and then add parentheses to the front. Let us see this in action. Using the greetPerson function we created above, let us invoke it.

// Invoking the function
greetPerson("John Doe"); // prints Hello John Doe

To invoke the function is as simple as the one line of code above. We had to pass in the name of the person because remember, the greetPerson function that we created expects a name parameter when we are calling the function.

Another way to pass the name to the function is to create a variable that stores the value of the name and then pass the variable as the parameter to the function. Let's do this now.

let name = "John Doe";
greetPerson(name); // Prints Hello John Doe.

Invoking the function the way we just did still works the same way and is a very useful approach as most times, we don't want to hardcode the parameters in our functions. The function we created can now be used in multiple places where we want to use the specific code block embedded in it; greet somebody.

What Next?

We have just discussed the fundamentals of functions in Javascript. In future series of this article, I'll delve more into more use cases of functions and advanced functions in Javascript. I hope you enjoyed reading.

Thank you