# JavaScript Functions

## **What is a function?**

A function is a **set of statements that performs a task or calculates a value.** [\[MDN\]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#:~:text=A%20function%20in%20JavaScript%20is,the%20input%20and%20the%20output.)

## **Declaring a function**

```javascript
function hello(){
    console.log("Hello!");
}
```

we use the "function" keyword to declare a function followed by the function name ("hello"). The body of the function is written inside curly braces. The () are for passing parameters in our case we didn't need one.

**ES6 Way**

```javascript
const hello = () => {
    console.log("Hello");
}
```

This is a compact alternative to the traditional function declaration.

## **Calling a function**

```javascript
function hello(){
    console.log("Hello!");
}
hello(); // prints Hello!
```

**Passing parameters to a function**

```javascript
function add(a,b){
    console.log(a+b);
}
add(2,3); // prints 5
```

passed two 2 numbers separated by "," as a parameter.

## How do functions work?

```javascript
function isOdd(x){
    if(x&1){
        return "Odd!"
    }else{
        return "Even!"
    }
}
let n = 6;
let res = isOdd(n);
console.log(res);
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672380466865/3efbb6ec-28e2-4c1d-a45d-3de3df6d59e6.png align="center")

<mark>Javascript is a synchronous single-threaded language</mark>

which means it will execute one line at a time and will move to the next line only when it is finished executing the current line.

Internally we have **2** components in the **execution context** (EC). This entire box is called execution context. We have a memory part and a code part.

Initially, javascript scans all the lines and put them in memory.

Initially, variables are made **undefined** and functions are assigned **whatever is inside the function** as shown in the diagram above.

**<mark>The execution starts after this point</mark>**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672381078017/426fbfc8-07bf-483d-8b01-fac254104280.png align="center")

After the code starts executing it starts with **line 1** which is a **function** that it **skips** because the function will be executed when it is called then it moves to the next line where the function ends and sees n=6 it assigns value 6 to variable n in the memory. It moves to the next line and sees a function call now it **creates another EC inside the current EC** to execute this function. It again initializes **x = undefined** and then starts execution. It sees value 6 has been assigned to x so it initialises x = 6 and then runs the condition and returns the result. After it returns "Even!" this **EC is deleted** and moves back to the previous EC to execute the remaining code after which it prints "Even!" and this **EC is also deleted**.

Whenever javascript encounters a function call it creates another EC to execute that function.

For creation

## Scope

the scope can be defined as the current context of execution where **values or expressions are visible.**

We have **3** types of scope in javascript

1. **Global Scope**: If a variable is in global scope it can be accessed from anywhere in the code.
    
2. **Module Scope**: When we want to use some variable from another module then we need to export them explicitly before importing them to be able to use them
    
3. **Function Scope**: Variables or expressions are only accessible within the function.
    

additionally, when we use let and const they have **Block Scope**

**Block scope** is created with {...} curly brackets.

## **Types of functions**

1. **Named Function**
    
    A named function is a normal function we write that has some name.
    
    ```javascript
    function add(a,b){
        console.log(a+b);
    }
    add(2,3); // prints 5
    ```
    
2. **Anonymous Function**
    
    An anonymous function doesn't have a name associated with it. It can only be accessed by a variable where it is stored as a value.
    
    This is how we write the anonymous function.
    
    ```javascript
    function(){
        console.log("Anonymous funcion");
    }
    ```
    
    Here's a working example
    
    ```javascript
    const superman = function(){
        console.log("superman!");
    }
    superman(); // prints superman!
    ```
    
    we call the function by invoking superman().
    
3. **Immediately Invoked Function**
    
    These functions **run as soon as it is encountered** and are unaffected by code which appears down in the script.
    
    ```javascript
    (()=>{})() // arrow function
    (function(){})() // normal function
    ```
    
    ```javascript
    ((a,b)=>{
      console.log(a+b);
    })(10,20);
    ```
    
4. **First-class functions**
    
    The ability of a function to be:
    
    1. Assigned to a variable.
        
    2. Passed as an argument to another function.
        
    3. Returned from another function.
        
    
    are called first-class functions. These first-class functions are also called **first-class citizens.**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672317727842/2362b525-137f-4397-9add-c57b213f7fb1.png align="center")
    
5. **Higher Order Function (HOF)**
    
    HOF take function as an **argument or returns a function**.
    
    for example, **map, reduce, and filter** all these take function as an argument so they're higher-order functions.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672328048211/463cc242-7162-468b-aafc-73ee593b06e4.png align="center")
    
    In the above example calculate function takes the diameter or area function depending on what is being called an argument thus acting as a higher-order function. This also helps to write clean and less code otherwise we would have to define logic inside each function.
    
    Below is the output.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672328076056/31d99c22-2454-45fa-bd2c-8143c537627a.png align="center")
    

That concludes this article thanks for reading any feedback is welcomed.

**THANK YOU**