3 Javascript creepy concepts explained to my mom
Miguel Ruiz
Posted on September 4, 2018
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:
- We have a function called executor which will execute everything that is coming as parameter
- We call executor by passing a function as parameter
- 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))
Posted on September 4, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
October 28, 2024
September 25, 2024