Guide to Callbacks & Higher-Order Functions in JavaScript.
Published: 2021-04-27 16:09:45

**Callbacks and Higher Order functions** are some of the most misunderstood concepts in JavaScript. During this post, we will become familiar with them to write pro-level code as JavaScript engineers.

Before continuing, let's ask ourselves a question.

**Why do we even have functions**

Let’s see why…

Create a function 10 squared
* Takes no input
* Returns 10*10

**tenSquared**

```javascript
function tenSquared() {
 return 10*10;
}
tenSquared() // 100
```

#####What about a 9 squared function?

**nineSquared**

```javascript 
function nineSquared() {
 return 9*9;
}
nineSquared() // 81
```

_And an 8 squared function? 125 squared?_

What principle are we breaking? **DRY (Don’t Repeat Yourself )**

####👉 We can generalize the function to make it reusable.

```javascript
function squareNum(num){
 return num*num;
}
squareNum(10); // 100
squareNum(9); // 81
squareNum(8); // 64
```

**Generalizing functions**

`Parameters (placeholders)` mean we don’t need to decide what data to run our functionality on until we run the function. Then provide an actual value `(argument)` when we run the function. `Higher-order functions` follow this same principle, we may not want to decide exactly what some of our functionality is until we run our function.

Now suppose we have a function `copyArrayAndMultiplyBy2`.

```javascript
function copyArrayAndMultiplyBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] * 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndMultiplyBy2(myArray)
```

What if want to copy the array and divide it by 2?

```javascript
function copyArrayAndDivideBy2(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] / 2);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndDivideBy2(myArray)
```

Or add 3?

```javascript
function copyArrayAndAdd3(array) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(array[i] + 3);
 }
 return output;
 }
const myArray = [1,2,3];
const result = copyArrayAndAdd3(myArray);
```

What principle are we breaking? **DRY (Don’t Repeat Yourself )**

👉 We could generalize our function, so we pass in our specific instruction only when we run `copyArrayAndManipulate`!

```javascript
function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) { return input * 2; }
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);
```

###How was this possible?

`Functions in javascript = first-class objects`. In addition to this, let's highlight some of the other features of functions:

* They can co-exist with and can be treated like any other javascript object
* Assigned to variables and properties of other objects
* Passed as arguments into functions
* Returned as values from functions

Consider this piece of code

```javascript
function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) {return input * 2;}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

```

####Which is our Higher Order Function ☝?

The outer function that takes in a function is our higher-order.

####Which is our Callback Function

The function we insert is our callback function.

**Higher-order functions**

Takes in a function or passes out a function. Just a term to describe these functions - `any function that does it we call that -` but there's nothing different about them inherently.

**Why do we need to master these two concepts**

* Callbacks and Higher-Order Functions simplify our code 
and keep it `DRY`.

* **Declarative readable code:** Map, filter, reduce - the most readable way to write code to work with data.

* **Codesmith & pro interview prep:** One of the most popular topics to test in an interview both for [Codesmith](https://codesmith.io/) and other mid/senior-level job interviews.

* **Asynchronous JavaScript:** Callbacks are a core aspect of `async JavaScript`, and are under the hood of `promises`, `async/await `.

**Conclusion**
What's more, there we have it. If you made it here thank you for reading! I hope this post will help you get started with writing pro-level JavaScript codes.

👋**Let's be friends!** Follow me on [Twitter](https://twitter.com/graphicblessing) and [instagram](https://instagram.com/blessingartcreator) for more related content. Don't forget to follow me also here on [Dev](https://dev.to/blessingartcreator) as well to get updated for new content.

Cheers!