3 Javascript creepy concepts explained to my mom

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 to catch these concepts, so Vamos al grano.

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.

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.

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.

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.

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:

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