# Callbacks

In JavaScript, functions can be treated like any other variable. So, it can be passed into a function and returned from a function.

> A callback function is a function passed into another function as an argument.

Let's look at an example.

```javascript
// callback function
const double = x => x * 2
// callback function
const half = x => x / 2

const arr = [1, 2, 3]
console.log(arr.map(double)) // prints [ 2, 4, 6 ]
console.log(arr.map(half)) // prints [ 0.5, 1, 1.5 ]
```

This example is a synchronous callback, and it allows us to keep the DRY principle.

> Callbacks are often used to continue execution after an asynchronous execution.

An example of asynchronous callback is event handlers. Event handlers are a function that will be called on an event, not right away.

```xml
<div id="container">
    <h1 id="id">not modified</h1>
</div>
```

```javascript
// Function to change contents of h1
function toggleModify() {
  const el = document.getElementById("id");
  if (el.firstChild.nodeValue === "not modified") {
  	el.firstChild.nodeValue = "modified"
  }
  else {
    el.firstChild.nodeValue = "not modified"
  }
}

// Add event listener to 
const el = document.getElementById("container");
el.addEventListener("click", toggleModify, false);
```

Oftentimes, callbacks become nested and they are difficult to understand and maintain. To avoid this problem, we can use a promise. A promise allows us to attach callbacks and do more than just a callback.

> Callback functions also form closures, since it has references to its surrounding state!