JavaScript concepts you must know

JavaScript one of the popular language on internet now a days, millions of webpages around world is using JavaScript.

Let's discuss some basic concepts of JavaScript, which can be useful in your project.

Scope

Scope determines the accessibility of variables, objects and functions. In other words, the current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. In JS we have 3 types of scope:

• Block scope
• Function scope
• Global scope

Closures

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state. In other words, Closure means that an inner function always has access to the variable of its outer function, even after the outer function has returned.

function init() {
var name = 'Dev'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();

Callbacks

A callback function can be defined as a function passed into another function as a parameter.

// function
function greet(name, callback) {
  console.log('Hi' + ' ' + name)
  callback();
}

// callback function
function callMe() {
  console.log('I am a callback function');
}

// passing function as an argument
greet('Peter', callMe);

Promises

Promises is a good way to handle asynchronous operations. In other words, a Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.

This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation was completed successfully.
• rejected: meaning that the operation failed.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(value => { return value + ' and bar'; })
  .then(value => { return value + ' and bar again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { console.log(value) })
  .catch(err => { console.log(err) });

Async and Await

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

const showPost = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
}

showPost();

Hope you find this post useful. Do share this post and follow me for more such informative posts.