Functions in JavaScript
Tags: javascript, beginners, programming
Published: 2022-11-09 20:02:21

Another essential part of programming is function. So…

## What is a function?

The function is a set of statements that are executed when the function is called.

Let’s first understand how a function is constructed and what it means to **call** a function.

To create a function, we will use a new keyword - **function**. This will tell that what comes after it is a function. Then we need to **name** our function. The same rules work here for naming a function, except that you _can have multiple functions with the same name_. Just the thing is, the program will consider the _last one_ only. After the name, we have parenthesis, in which we write **arguments** for our function(there may be _none_). Then we open curly brackets, which identify the **body** of the function. When the function is called, whatever is in its body gets executed. Now let’s get into details.

```
function ExampleWithNoArguments(){
    //do something
}

//calling the function with no arguments
ExampleFunctionWithNoArguments(); 

function ExampleWithMultipleArguments(a, b, c){
    //add a, b and c, and return the value
    var sum = a + b + c;
    if(sum > 0){ 
        return(sum); 
    } else {
        return(-sum);
    }
}

var Sum = ExampleWithMultipleArguments;
//type of Sum will be a function, since we assigned a function to it
//aka you can call "Sum" just the way you call 
ExampleWithMultipleArguments

var sumOfNums = ExampleWithMultipleArguments(-5, -6, -8); 
//type of sumOfNums will be number since function RETURNS number

function ExampleFunction(argument){
    var message = "My argument: " + argument;
    console.log(message);
    return message;
}
ExampleFunction("some random string");

```

Let’s consider the last one.

The **function** is the keyword, “ExampleFunction” is the name of our function, what is inside brackets is the **argument**, and in curly brackets is the **body**, which will be executed when called. 

In the following line, the function is called with a string argument with a value of _“some random string.”_ To call a function, we simply write its name, open brackets, and write inside of its arguments if we have any. And that’s it. The body of the function will be executed. 

As one of my beloved teachers once explained: _function is like a factory, you give it raw materials, and it works on them and then returns a result to you._

In our case argument is _the raw material_. When we call this function, a variable with the name of “_argument_” is created, and it takes the value which we give in parenthesis (in our case, _“some random string”_). The important thing is this variable is **local** to the function it belongs to, which means you cannot use this parameter _outside of the function’s body_. So, ExampleFunction takes the argument and prints in the console “My argument: “ + “some random string” (as our argument has this value). 

Functions may have _many parameters_ and may have _none_ as shown in the example. It is not recommended to have many parameters for a single function to avoid messing things up. Also, they _may_ and _may not_ return a value.


## Returning value from a function
In JavaScript, functions are variables, which means you can create a variable and assign a function to it. If you do this without calling the function, the variable will take the reference to that function.

```
function ExampleWithMultipleArguments(a, b, c){
    //add a, b and c, and return the value
    var sum = a + b + c;
    if(sum > 0){ 
        return(sum); 
    } else {
        return(-sum);
    }
}

var Sum = ExampleWithMultipleArguments;
//type of Sum will be a function, since we assigned a function to it
//aka you can call "Sum" just the way you call 
ExampleWithMultipleArguments

var sumOfNums = ExampleWithMultipleArguments(-5, -6, -8); 
//type of sumOfNums will be number since function RETURNS number
//output: 19

```

And if you return something, your variable will take that as a value.


I keep repeating, “return a value.” Returning a value means giving the result of some actions, as shown in the factory example. You gave arguments (_raw material_) to the function (_the factory_) and got a value returned (_result_). After **returning** function stops its execution, which means you cannot have _more than one return statement_ in a function, as _only the first one_ will give away the result and stop the execution of the function. However, you may say, how come we have two return statements in the example? The answer is inside the if statement, so if we had a negative number, the program would ignore the first brackets and jump to the second one. In the end, **only one** of those statements will be executed. 

## !Note.
 The function's return value is the value of the called function.



## Function inside of a function
Since the function is just a variable that does some operations to get its value, it can be declared inside a function. You can have multiple functions created inside of a function.

```

//takes two arguments, gives their product's absolute value 
//as a result
function ProductOfAbsolutes(x, y){

    //is a function, with argument x, which has the value 
   //of x's absolute
    var absoluteOfNumber = function(a){

        //returns (value) absolute of x
        return Math.abs(a);
    }

    //is a function, with 2 arguments a and b, returns 
//their product
    var product = function(a, b){

        //gives the value of a times b
        return a * b;
    }

    //this is return statement for "ProductOfAbsolutes" function
    //first it calls the function "absolteOfNumber" 
    //with argument x, then with y

    //then puts their outputs as arguments to function "product"
    //returns the product
    return product(absoluteOfNumber(x), absoluteOfNumber(y));
}

console.log(ProductOfAbsolutes(2.5, -5)); // output: 12.5
```

Here’s an example of that. Just remember, what’s declared inside the body, stays in the body(most of the time). (Body is { inside of these }).


## Additional
Just to give an idea of why we need functions, we can always write things when they need to be executed. This helps A LOT with repetitions. If you need to multiply two numbers, then find the square root of the result, then take the negative of that number and divide by 5 for some reason, and you need to do this more than once, you may find it exhausting to write that over and over again, making it complicated not only for you but for the computer as well. Here come the functions. If you need a neater code, or you have some part that will be repeated multiple times (like playing some sound when a user clicks a button), the functions come in handy. They make your project more understandable, easier to navigate, and in the end, have a beautiful structure. 

Thank you for bearing with me this far! If you have any questions, leave a comment, I will answer as soon as I see.))