Functions in JavaScript
Tags: beginners, tutorial, javascript, webdev
Published: 2021-03-26 12:02:39



**Functions** are one of the fundamental building blocks of any programming language. Functions are block of code enclosed in some brackets that perform a given task. To use a function, we must define it somewhere in the scope from which we can **call/invoke** it.

Let's start by **declaring** a function:

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

We just declared a function called **hello**, in order to execute it, we need to ***call*** it.

#### What do you I mean by ***call*** the function?

In all programming languages, whenever you need to execute a function, you have to ***call*** it. No matter how many functions you have in your code, it won't be executed until you have **called** the function.

#### How to call a function?

It's simple, just add your ***function name followed by an opening and closing brackets*** 

```
hello(); //Hello World
``` 

## Assigning functions to variables:

In JavaScript, you can assign/store a function in a variable.

```
var someVariable = function(){
console.log("My Function")
}
```

Notice something, I didn't name the function.
The function is an example of **unnamed/anonymous** function.


The above function can also be written as: 

```
var justAnotherVariable= function myAnotherFunction(){
console.log("My another named Function");
}
```

To execute these functions you have to call them.

Let's call myFunction

```
someVariable(); //My function
```

Let's call the second function. 
But wait how do we call it? 
The function has been assigned to a variable. 
Should we use the variable name or function name?


In JavaScript, ***whenever you assign a function to a variable, no matter if it is a named function or anonymous(unnamed) function, to call it, you have to use the variable name followed by an opening and closing brackets.***

In the example above **someNamed** function has been stored in the variable **justAnotherVariable**, in order to call it, ***we have to use the variable name followed by parentheses.***

```
justAnotherVariable()  // My another named function
```



## Function Declaration & Function Expression

Functions are declared by using the ***function*** keyword.
Every function **declaration** must begin with the ***function*** keyword.

Let's declare a function ***foo***.

```
function foo() {
console.log("Hello from foo");
}
```

A declared function gets executed only when it is ***called***.

In order to execute **foo**, we have to ***call*** it.

```
foo(); // Hello from foo
```

In JavaScript, functions can also be defined using an ***expression*** and function expressions can be ***stored/assigned to a variable***.

Let's declare a variable ***baz*** and store a function to it. 

```
var baz = function () {
console.log("Hello from baz")
}
```

Once a function expression has been assigned to variable, in order to ***call*** the function expression we have to use the **variable**.

```
baz(); // Hello from baz
```

The main difference between a function expression and a function declaration is the **function name**, which can be ***omitted*** in function expressions to create anonymous functions.

 
## Argument & Parameters

When we declare a function, we can receive some addition information/values to the function. These additional information will be passed by us when we ***call*** the function.

These values when passed while calling the function are called **arguments** whereas in the function declaration they are called **parameters**.

#### Example: 
We receive two ***parameters*** **a** and **b** while declaring the function **bar** and pass two ***arguments*** **5** and **15** when calling it.

```
function bar(a, b){
return a+b;
}

var add = bar(5, 15); 
console.log(add); //15
```



## First Class Function, High Order Function and Callback 

JavaScript has a concept of **First class function**.

A programming language is said to have **First-class functions** when functions in that language are treated like any other variable. ***In such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable***.

We have already seen the example of a function being assigned to a variable.

Let's see an example of how a function can be passed as argument to another function and returned from a function.


**Example 1:**
Function passed to a function
```
function greet(){
console.log("Hello from greet")
}  

function doSomething(callback){
callback() // calling the passed function
}

doSomething() // Hello from greet

Calling the function doSomething  calls the callback function which is greet in our case
```

**Example 2:**

Function returned from a function

```
function add(num1,num2){
console.log("I'm number 1: "+num1);
console.log("I'm number 2: "+num2);
} 

function adder(){
return add;
}


var x = adder() 
x(10,20) //I'm number 1: 10
         //I'm number 2: 20
```

In the above example, we called the function **adder** and stored the returned function **add** to variable **x**. Since, x is now storing a function, we **call** it and pass arguments **10** and **20** respectively.


### Callback
A **Callback** is just an identifier for a function that is passed as argument to another function. In the above examples, the function ***greet*** is a callback. 


### High Order Function 

Any function that ***takes a function as an argument or returns a function*** is called a **high order function**. In the examples, both the functions ***doSomething*** and ***adder*** are high order functions.


### Conclusion:

Functions are the building blocks in JavaScript. Functions can perform complex operation, take input values, process and return values. In JavaScript, functions can also return a function from a function, store a function to a variable, pass a function to another function.

If you liked the post then do share your feedback. 
I'd love to hear from you. Connect with me @ [Twitter]("https://twitter.com/debarshib13")


#### References: 
[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)