Advanced JavaScript Concepts | Revised Version for Jr Dev's
Syed Muhammad Ali Raza

Syed Muhammad Ali Raza @syedmuhammadaliraza

About: Software Engineer React js I Angular I Next js | Material Ui | Tailwind Css | Frontend Developer I Web Designer and Developer I Google Research Pro I Freelancer I Ajax I jQuery I TypeScript I Web3

Location:
US
Joined:
Aug 12, 2019

Advanced JavaScript Concepts | Revised Version for Jr Dev's

Publish Date: Sep 29 '24
125 15

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

Comments 15 total

  • Brysen-Rom
    Brysen-RomSep 29, 2024

    very informative

  • master029009
    master029009Sep 29, 2024

    why we use IIFI?

    • Abraham
      AbrahamSep 30, 2024

      Sometimes a block of code can only neatly exist inside a function, and immediately thereafter require execution. You see this often in reactjs. Where an async function needs to be executed inside a sync function

  • Jan Mykhail Hasselbring
    Jan Mykhail HasselbringSep 30, 2024

    Damn, did AI write this?

  • АнонимSep 30, 2024

    [hidden by post author]

  • Rene Kootstra
    Rene KootstraSep 30, 2024

    I do not fear AI if this is the quality it produces. For the 'author' do not post on topics you do not understand. As clearly the example code is wrong.

  • Tori Ningen
    Tori NingenSep 30, 2024

    permit keyword is my second favorite after kermit keyword.

    • Pradeep Kumar
      Pradeep Kumar Oct 2, 2024

      Permit keyword works ?
      And Kermit keyword uses?

  • click2install
    click2installSep 30, 2024

    Advanced concepts in how not to write an article.

  • Johnson
    JohnsonSep 30, 2024

    Bro forgot the parenthesis in the first example. Swear this was js not python 🤣

    100% AI generated

    I have reported the user for using AI tooling to write non professional articles, please do the same so we can sort out the garbage from actually useable posts.

  • Philip J Cox
    Philip J CoxSep 30, 2024

    Some good points. Closure, can also be created and maintained from within a function, not only outside variables. Async could have also been added to this list.

  • DiegoSt23
    DiegoSt23Sep 30, 2024

    Please don't make posts about things you don't understand.

    What a useless and misleading article.

  • Zunaid Alam
    Zunaid AlamSep 30, 2024

    Coding is !hard. 😃

  • Christopher Winter
    Christopher WinterSep 30, 2024

    What the...

  • razmi0
    razmi0Oct 1, 2024

    Advanced author tip : close your eyes and copy paste that code

Add comment