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))

Comments

[ironydelerium]

On promises: it's also worth noting that 'then' and 'catch' both also return promises.

The return value of the function passed to then or catch (or, if they return a promise, the final state of that promise) is the value of the promise; if they throw, it becomes the rejection reason.

[Kushan Joshi]

Hey I think there’s a small typo in your last code snippet. I believe it should be .catch instead of .error👌

[Miguel Ruiz]

Right on. Thanks so much Kushan!