Advanced JavaScript Concepts | Revised Version for Jr Dev's

Syed Muhammad Ali Raza - Sep 29 - - Dev Community

JavaScript Revised Version

1. let, var, and const

var

function test() {
  console.log(x); 
  var x = 10;
}
Enter fullscreen mode Exit fullscreen mode

let

function test() {
  console.log(x); 
  let x = 10;
}
Enter fullscreen mode Exit fullscreen mode

const

const arr = [1, 2, 3];
arr.push(4); // Works
arr = [5, 6]; 
Enter fullscreen mode Exit fullscreen mode

Image description

2. Closures

A closure is created while a function "remembers" the variables from its outer scope, even after that scope has exited. Closures are important while managing features internal different features, where the internal function keeps access to the variables of the outer function.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2
Enter fullscreen mode Exit fullscreen mode

Image description

3. Currying

Currying is a way wherein a function takes a couple of arguments one after the other, returning a new function for each argument. It transforms a feature that takes all arguments right now into one that takes them sequentially.

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

Enter fullscreen mode Exit fullscreen mode

Image description

4. Promises

Promises are used to handle asynchronous operations. A promise represents an operation that hasn't completed but but is anticipated to inside the future. It can be in one in all 3 states:

  1. Pending: Initial country, neither fulfilled nor rejected.
  2. Fulfilled: Operation finished successfully.
  3. Rejected: Operation failed.
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

myPromise
  .then((value) => console.log(value))  // "Success!"
  .catch((error) => console.log(error));

Enter fullscreen mode Exit fullscreen mode

Promises are extensively utilized in present day JavaScript to address async code in a cleanser way in comparison to callbacks.

5. Hoisting

Hoisting is JavaScript's default conduct of moving declarations to the top of their scope earlier than code execution. Only the declarations are hoisted, now not the initializations.

console.log(x); // undefined
var x = 5;

Enter fullscreen mode Exit fullscreen mode

In the case of var, the assertion is hoisted, but the fee venture takes place later. In evaluation, permit and const are not initialized till the code executes them, leading to a "temporal lifeless quarter" where they can't be accessed.

console.Log(y); 
let y = 10;
Enter fullscreen mode Exit fullscreen mode

6. IIFE (Immediately Invoked Function Expression)

An IIFE is a function that is finished straight away after it is described. IIFEs are useful for growing a private scope to avoid polluting the global scope, which was specifically essential before the arrival of modules.

(function() {
  console.log("I am an IIFE");
})();

Enter fullscreen mode Exit fullscreen mode

The feature is wrapped interior parentheses and is invoked at once after the remaining parentheses.

Image description

7. First-Class Functions (Citizen Functions)

In JavaScript, functions are great residents. This method that they can be assigned to variables, passed as arguments to other functions, and returned from other features.

const greet = function(name) {
  return `Hello, ${name}`;
};

function sayHello(greetFunction, name) {
  console.log(greetFunction(name));
}

sayHello(greet, "John"); // Hello, John

Enter fullscreen mode Exit fullscreen mode

8. Variable Functions (Function Expressions)

In JavaScript, you may outline functions in two ways: the usage of function declarations and function expressions. A function expression is while you assign a feature to a variable, permitting it to behave like every other variable.

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3)); // 5

Enter fullscreen mode Exit fullscreen mode

Function expressions allow for extra dynamic conduct in comparison to feature declarations.

9. Callbacks

A callback is a feature this is surpassed as a controversy to any other function and is achieved after a few operation is whole. Callbacks are closely utilized in JavaScript for asynchronous operations, which include dealing with user occasions or fetching information from a server.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data loaded");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // "Data loaded"
});

Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player