JavaScript

JavaScript (JS) is the world's most popular lightweight and powerful programming language. it is also known as a scripting language for web pages. It can be used for Client-side as well as Server-side developments and it's very versatile and beginner-friendly.

You should have a good grasp of JavaScript Before learning any JS library or framework or Obviously, the more JavaScript you know, the easier it will be to learn Reacr.js and Node.js It’s because it's easy to build any kind of application and learn any framework and libraries if the fundamentals are clear

A lot of concepts are confusing and overwhelming for developers but a good knowledge of these concepts will help you in the long run. These are the Main concepts you should understand if you want to get started with Web development.

• Hoisting
• Scopes
• Closures
• Callback
• Promises

Hoisting

Hoisting is a weird phenomenon in JS in that you can access variables and functions even before initializing them and you won't get an error. The reason behind this is hoisting where the Javascript interpreter always moves the variables and function declaration to the top of the current scope before the code execution.

Example:

SayHello();

function SayHello() {
  console.log("Hello World");
}

// Output 
Hello World

The above code will not give an error and you get the output Hello World This Is Hoisting in Javascript.

Scopes

It can be defined as the accessibility of Variables in Javascript. There are two kinds of scope-global scope and local scope. Variables defined inside a function are in the local scope while variables defined outside of a function are in the global scope. Each function when invoked creates a new scope.

Example:

// Initialize a global variable
var name = "RDJ";

function transform() {
  // Initialize a local, function-scoped variable
  var name = "Tony";
  var name2 = "Iron man";
  console.log(name);
}

// Log the global and local variable
console.log(name);
transform();
console.log(name);

//will get an error name2 is not defined
console.log(name2);

// Output
RDJ
Tony
RDJ

In this example, we create a global name variable and it can be accessed anywhere in the whole program and also in the function scope so we changed the name from RDJ to Tony but the name2 variable is defined in the function scope we can't access it outside the scope.

Closures

Closure basically means a function bound together with its lexical environment. In other words, a function along with its lexical scope forms a Closure. To use a closure, define a function inside another function and expose it.

Example:

function first() {
  var name = "Tony";
  function displayname() {
    console.log(name);
  }
  displayname();
}
first();

// Output
Tony

When a function is returned from another function, they still maintain lexical scope, They remember where they were actually present and that's why the display name was able to print the name Tony.

Callbacks

In simple a Callback is a function passed into another function as an argument to be executed later This technique allows a function to call another function A callback function can run after another function has finished.

Example:

function add(a, b) {
  return `the sum of numbers is ${(sum = a + b)}`;
}

function print(callback) {
  var a = 2;
  var b = 3;
  console.log(callback(a, b));
}

print(add);

//Output
the sum of numbers is 5

As you can see function print take a callback function print and use it to print the sum of two variables a and b.

Promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises are useful in asynchronous javascript operations when we need to execute two or more back-to-back operations Promises resolve the issue of ‘callback hell’ which is nothing but a recursive structure of callbacks

A promise may be in three possible states

- Fulfilled: When the operation is completed successfully.

- Rejected: When the operation is failed.

- Pending: When the Operation is neither fulfilled nor rejected.

Example:

var promise = new Promise(function (resolve, reject) {
  const x = 1;
  const y = 1;
  if (x === y) {
    resolve();
  } else {
    reject();
  }
});

promise
  .then(function () {
    console.log("Promise Resolved");
  })
  .catch(function () {
    console.log("Some error has occurred");
  });

//Output
Promise Resolved

Promises can be consumed by registering functions using the .then and .catch methods. In this example create a promise and if the promise got fulfilled the First function is Executed and prints Promise Resolved and if the promise got an error the Second function is executed and prints Some error has occurred.