Intro: Why are functions important?

Functions are really important when it comes to writing clean code. 

They help you organize your code and make it easier for you and others to understand the code. In addition, including functions in your project will help it be more maintainable! If you want to add some new features to your project, you'll have to add some new functions. Even if you want to edit some existing features in the project you're working on, you'll only have to edit the needed functions, the rest of your code will be unaffected.

Without further ado, let's get right into it!

How to Define a Function?

It is practically easy, let's start with an example.

function func(number1, number2)
{
     let result = number1 + number2;
     return result;
}

So what does this code snippet do exactly? Let's break it down!

1. To define/declare a function in JavaScript, you need to use the word "function" followed by the name of the function. (you can choose any name you like, I named mine func!)

2. (number1, number2) refers to the parameters that this function takes, you can pass to the function as many parameters as needed. You could also leave the parentheses empty if you wish to not pass any parameters to the function. The important thing is, the parameters must be separated by commas.

     -The parameters are passed to the function by value which means that any 

      changes made to these parameters will not reflect in the global scope and will only 

      apply to the function. 

    -Function parameters can be strings, numbers, and objects.

3. The curly braces define the code that is going to be run when the function is called.

4. Then the addition of variables number1 and number2 are stored in the variable result.

5. The final line is the return statement. The return statement simply returns the value stored in the variable result to the caller of the function. A return statement is not a necessity when creating functions. A function can return nothing, in that case, do not include the return statement in your function.

That's it, that is the most basic way of defining a function in JavaScript. There are most certainly other ways such as Function Expressions but we can explore those later.

Calling a Function

What is the point of declaring a function if you are not going to call it? Calling a function is the only way to execute the code inside of it. Let's learn how with an example.

We'll use the function we declared above, the one named "func" for demonstration.

var firstValue = 1;
var secondValue = 5;
var calculation = func(firstValue, secondValue);

This is how you call a function, the calculation variable will store the value returned by the function which is going to be the addition of the variables "firstValue" & "secondValue" (the function parameters). 

A function can also be called like this if it does not include a return statement:

func(1,5);

In addition, you can skip the part of storing the return value of a function and call the function inside the console.log()! Like this:

console.log(func(1,5));

A function can call itself!

Let me show you how with the following example:

function countDown(value)
{
     console.log(value);
     if(value != -1)
     {
         countDown(value-1);
     }
}

This function will print any value you send to it and then count down till it reaches 0.

Function Scope

Just like a function variable can not be accessed outside the function's curly braces, the same thing can apply to functions themselves and the variables they can access.

A function can access variables that are defined in the global scope if it is also defined in the global scope. Like this:

var animal = "Lion", animal2 = "Monkey";
function zooAnimals() 
{
    console.log(animal + " " + animal2);
}

On the other hand, if functions are nested then the nested function can only access the variables of its parent because that is the scope that this function is defined in.

See the following example for a demonstration:

function schoolSubjects()
{
     var subject1= "Math, subject2 = "Biology";
     function printSubjects()
     {
        var str = "The school has the following subjects: "
        console.log(str + subject1+ "& " + subject2 + ".");
     }
     printSubjects()
} 

The output of the above code snippet will be: 

The school has the following subjects: Math & Biology.

The function printSubjects accessed the variables in it's parent function because that is the scope that it was defined in. Also, the function printSubjects can not be accessed outside its parent function schoolSubjects.

Conclusion

Functions can be very handy, help you organize your code and make it more readable. We've only scratched the surface with functions but these are the fundamentals that can get you started with functions in JavaScript.

In this blog you have learned:

- How to define a function in JavaScript.

- How to call a function.

- What is the scope of a function and how it can change.