3 Javascript creepy concepts explained to my mom
Tags: es6, javascript
Published: 2018-09-04 17:07:33

---
title: 3 Javascript creepy concepts explained to my mom
published: true
description: Closures, Callbacks and Promises clearly explained 
tags: ES6, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vcyfqyd7bzfk1ivhvwyz.jpg

---

There are some things that aren´t as easy as understand as we all would like. That´s what usually make people say “That´s a fancy language” I prefer Java because it´s easier. That was a thought of myself some years ago.

So for Oriented programming people, I believe it would be easier,I will use [ES6](http://www.slideshare.net/MiguelRuizRodriguez/internal-workshop-es62015?trk=v-feed) to catch these concepts, so [*Vamos al grano*.](http://www.linguee.com/spanish-english/translation/vamos+al+grano.html)

### Closures

Closures in JS are not easy to understand but it´s a very common interview question following the “differences between double equal and triple equal” one.

Also called **Lexical scoping** or **Static scoping,** a closures are an abstraction mechanism that allow you to separate concerns very cleanly.

The shorter and easiest definition for me is the next one:

*A closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain.*

```javascript
function foo() {
  var a = 2;
  
  function log() {
    console.log("a: " + a);
  }
  
  return log;
}
var a = 3;
var bar = foo();
bar();
console.log('Global a: '+ a);
```

Result will be:

*“a: 2”*

*“Global a: 3”*

### Callbacks

A callback is **a function that is passed to another function** **as a parameter.** This passed function will be called (or executed) within the other one.

```javascript
function executor (callback){
  if(callback){
   console.log('Result after calling your function ' + callback())
  }
  else{
    console.error('No callback received')
  }
}
executor( () => (1 + 1) )
```

The simplest case is:

1. We have a function called executor which will execute everything that is coming as parameter
2. We call executor by passing a function as parameter
3. Result will be: *“Result after calling your function 2”*

### Promises

A promise represents the eventual result of an asynchronous operation. It is a placeholder into which the successful result value or reason for failure will materialize.

#### Declaring a promise

A promise can be in one of 3 states:

- Pending → the promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.
- Fulfilled → the asynchronous operation has completed, and the promise has a value.
- Rejected → the asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a *reason* that indicates why the operation failed.

```javascript
var p = new Promise( (resolve, reject) => {  
   if (/* condition */) {
      resolve(/* value */);  // fulfilled successfully
   }
   else {
      reject(/* reason */);  // error, rejected
   }
});
```

#### Consuming a promise

The primary API for a promise is its `then` method, which registers callbacks to receive either the eventual value or the reason why the promise cannot be fulfilled.

```javascript
var prom = new Promise((resolve, reject) => resolve(5));   
prom.then((val) => console.log(val)); // 5
```

We can also check for any error in the promise execution:

```javascript
var prom = new Promise((resolve, reject) => resolve(5));   
prom
.then((val) => console.log(val))
.catch((err) => console.error(err))
```