Learn JavaScript Core Concept!

How JavaScript Work :

Execution Context

In JavaScript, the execution context refers to the environment in which the code is executed.

Global Execution Context: This is the default execution context. When the JavaScript code is executed, the global execution context is created in the call stack, which contains global variables and functions. It's essentially the environment where code that isn't inside any function is executed.

Function Execution Context: Every time a function is invoked, a new execution context is created for that function. It includes information about the function's arguments, local variables, and any nested functions declared within it. When a function is called, a new function execution context is pushed onto the execution stack.

• Parts of Each Execution Context :

  • Memory Component or variable environment

  • Code Component or thread of execution

• Phase of Each Execution Context :

  • Creation Phase or memory creation phase

  • Execution phase or code execution phase

Call Stack

The call stack in JavaScript is a mechanism used to keep track of the functions being executed in a program. It operates on a Last In, First Out (LIFO) basis, meaning that the last function that gets pushed onto the stack is the first one to be popped off and executed.

When a function is called in JavaScript, it's added to the call stack. As functions are executed, they are removed from the stack. If a function calls another function, the new function gets added on top of the previous one, forming a stack of function calls. When a function finishes executing, it is removed from the stack, and the control returns to the previous function in the stack.

Go to top

Function Details :

Function Declaration or Function Statement :

This is a basic way to declare a function using the function keyword. or arrow function. it's just declared as a function never call. when it's called that means it's invoked.

function greet() {
    console.log("Hello!");
}

Function Expression :

A function expression stores a function as a value in a variable.

const sayHello = function() {
    console.log("Hi there!");
};
or -----------------------------------
var greet = () => {
    console.log("Hello!");
}

<a href="#table">
    <button>Go to top</button>
</a>

Anonymous Function :

An anonymous function doesn't have a name; it's assigned to a variable without a specific name.

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

IIFE (Immediately Invoked Function Expression) :

An IIFE runs immediately after it's defined, encapsulating its scope.

(function() {
    console.log("IIFE running!");
})();

Arrow Function :

Arrow functions provide a more concise syntax for writing functions.

const multiply = (a, b) => {
    return a * b;
};

First-Class Function or Higher-Order Function :

Functions are treated as first-class citizens; they can be assigned as values, passed as arguments, and returned from other functions. or Received functions as a parameter and return a function.

function sayName(name) {
    return function () {
        console.log(`Hello, ${name}!`);
    };
}
const greeting = sayName("Alice");
greeting(); // Outputs: Hello, Alice!

Callback Function :

A callback function is passed as an argument to another function and executed after an operation is completed.

function fetchData(callback) {
    // Simulated asynchronous operation
    setTimeout(() => {
        const data = "Some data";
        callback(data);
    }, 1000);
}

function displayData(data) {
    console.log(`Data received: ${data}`);
}

fetchData(displayData); // Outputs: Data received: Some data

Parameters vs Arguments:

Parameters are variables in a function definition, while arguments are the actual values passed to the function when it's invoked.

function addNumbers(x, y) { // x and y are parameters
    return x + y;
}

const result = addNumbers(3, 5); // 3 and 5 are arguments

Go to top

JavaScript Errors

Certainly! JavaScript has various types of errors that can occur during code execution. Here's an overview of some common errors:

ReferenceError:

This error occurs when trying to use a variable that has not been declared or is not within the current scope. For instance, accessing a variable that doesn't exist will result in a ReferenceError.

console.log(x); // Uncaught ReferenceError: x is not defined
let x = 20

SyntaxError:

This error occurs when there's a mistake in the syntax of the code, making it impossible for the interpreter to parse correctly. Common examples include missing brackets, semicolons, or incorrect keywords.

TypeError:

This error occurs when a value is not of the expected type. For instance, attempting to call a method on a variable that is not a function will result in a TypeError. when you can try to mutated const declarations value will result in a TypeError instead of a TypeError.

const foo = 30;
foo = 90 // Uncaught TypeError: Assignment to constant variable.

AggregateError:

Introduced in ES2020, it's used to represent multiple errors in the context of operations like Promise.allSettled() or Promise.any(). This error aggregates several errors into a single object, allowing handling multiple errors simultaneously. ___access Errors using:___

try{

}catch(e){
    console.error(err.error);
}

These errors can be caught using try...catch blocks in JavaScript to handle exceptional cases gracefully. Each type of error provides specific information that can be helpful for debugging, allowing developers to identify and fix issues in their code effectively.

Go to top

JavaScript Scope & Scope Chain

Before learning about scope , scope chain , or even closures , you need to understand the Lexical Environment .

What is Lexical Environments?

English “Lexical” means connection from outside in a certain order.

A function’s “Lexical Environment” includes the function’s local memory plus its parent’s “Lexical Environment”.

For example, the above function y is nested inside the function x ( y is a child of x ), and the function x is inside the global scope ( x is a child of global ).

Also called y is lexically inside the x function. x is lexically inside global .

As soon as an “Execution Context” is initialized, a “Lexical Environment” is also initialized.

Let’s see the corresponding parent’s lexical environment in the example above:

Now, lets go to deep drive on Scope and Scope chain, What is Scope? Scope can be defined as the space in which variables and statements are accessible. In JavaScript we have three types of scope:

• Global scope,

• Function/local scope (Script)

• Block scope.

Global scope :

• The default scope

• There is only one global scope in the program

• It is the top scope that englobes the entire code

• The declarations inside this space can be accessed anywhere in the code

  

Block scope :

• The space between a pair of curly braces (if block, for block, etc.)

• Applicable to let and const

• Declarations are only accessible inside the block

{ //block start
    statement1;
    statement2;
    // ... more statements
} // block end

In the example below we are able to print the variable msgOne but not constant msgTwo. As mentioned before const and let are block scoped so they are only visible inside the block, in this case inside the if statement.

On the other hand var is function scope so can be accessed within the function.

let's talk about scope chaining............

SCOPE CHAIN

Looking at the image, can you see how the program looks up the values ​​of the variable?

The search order will be from the purple ring of Y to the purple ring of x and then to the purple ring of global and still not found, it will encounter null and end this search.

Assuming c does not exist at the violet ring x as above, the program will continue to look for the purple rings y , then global .

If it is still not found, an error will be reported. If it is found somewhere first, then the local value will be used.

These are the things that JS Engine looks for from the inside out, called Scope Chain .

Or to put it more simply, the Scope Chain is the chain of the Lexical Environments.

Note: If the variable is not found in the local memory of the execution context , it will search the lexical environment until the end of the string.

Go to top

Variable Shadowing , let const [Solve memory leak problem]

at first, need to understand why needs let const variables. what is the problem in var keyword let's see the code below,

var x = 90
{
 var x = 80 //global x pointer point same memory location
 console.log(x)
}
console.log(x)

output:
 80
 80

 // why output same for the different variables scope. it's memory leak issue.
 here x shadows the global x variables

When you declare a variable using var within a block (like within {}), it doesn't create a new block scope; instead, it modifies the existing variable of the same name in the outer scope. This behavior can lead to unexpected results, as you rightly pointed out.

The introduction of let and const in ES6 provides a solution to this problem by introducing block-scoped variables:

• let allows the variable to be reassigned within its scope but doesn't allow redeclaration within the same scope.

• const also creates block-scoped variables but doesn't allow reassignment after declaration.

By using let or const, you can avoid variable shadowing and prevent unintentional modification of variables in outer scopes.

In your example, using let or const instead of var would resolve the issue:

let x = 90; // or const x = 90; if it's not meant to be reassigned
{
    let x = 80; // This x is in a different scope
    console.log(x); // Outputs 80
}
console.log(x); // Outputs 90

This way, the variable x within the block has its own scope and doesn't affect the outer x variable, thereby preventing unintended behavior and potential memory leaks.

let const and var

Block Scope Shadowing with let or const:

let a = 10;
{
    let a = 20; // This is legal and creates a new 'a' variable within this block scope
    console.log(a); // Output: 20
}
console.log(a); // Output: 10 (Global 'a' remains unaffected)

Function Scope Shadowing with var:

var b = 15;
function example() {
    var b = 25; // This is legal and creates a new 'b' variable within this function scope
    console.log(b); // Output: 25
}
example();
console.log(b); // Output: 15 (Global 'b' remains unaffected)

Illegal Variable Shadowing:

Block Scope Illegal Shadowing let/const with var:

let c = 30;
{
    var c = 40; // Illegal - 'var' cannot shadow 'let' or 'const' within the same scope
    console.log(c); // This will cause an error
}
console.log(c);

JavaScript Scoping and Variable Declaration: Understanding Block Scope and Shadowing

{
    let x = 90;

    {
        let y = 50;
        console.log(x); // 90
        {
            console.log(y); // 50
            const x = "Happy Day";
            {
                console.log(x); // happy day
            }
        }
    }
    console.log(x); // 90
}
//Output:
Happy Day;
90;
50;
Happy Day;
90;

Remember, JavaScript follows lexical scoping rules, where inner scopes have access to variables defined in outer scopes, but redeclaring variables within inner scopes creates new variables that only exist within those inner scopes.

Is variable shadowing good or bad? If we already had some variable and we shadowed it inside another scope, we are losing access to the original variable and will not receive the output we need inside another scope. Shadowing can lead to unneeded bugs and results and will be harder to debug when you have many variables.

That’s why it’s always better to name variables in a more explanatory way

Go to top

JavaScript Hoisting Concept

When the JS engine gets our script, the first thing it does is setting up memory for the data in our code. No code is executed at this point, it’s simply just preparing everything for execution. The way that function declarations and variables are stored is different. Functions are stored with a reference to the entire function.

see image below

after setting up memory then go to execute patch

All done! 🎉 Quick recap:

• Functions and variables are stored in memory for an execution context before we execute our code. This is called hoisting.

• Functions are stored with a reference to the entire functions, variables with the var keyword with the value of undefined, and variables with the let and const keyword are stored uninitialized.

[!IMPORTANT]

function outer() {
    let b = 1;
    function inner() {
        return b;
    }
    return inner;
}
let get_func_inner = outer(); //here create closure outer function

/* how can access b after returning a outer function.
normally it's could not be access b because outer function return
then it's not stay in call stack and memory.
but it's still accessible because of javaScript closure*/
console.log(get_func_inner());

function x() {
   for (var i = 0; i <= 10; i++) {
       setTimeout(function () {
           console.log(i);
       }, i * 1000);
   }
}
x()
output:
10
10
10
10
.
.
.
its not working, because of closure. var x point all setTimeout function same memory location.

function x() {
   for (let i = 0; i < 10; i++) {
       setTimeout(function () {
           console.log(i);
       }, i * 1000);
   }
}
x()

output:
1
2
3
4
.
.

console.log(num); // ReferenceError: num is not defined
let x = 23;

let a;
console.log(a); // Output will be 'undefined'

Create a myoOwn MyBind method
let info = {
    name: "Muhib Khan",
    age: 12,
};

let printName = function (birthday, university, hello) {
    console.log(
        `${hello} My name is ${this.name} and age is ${this.age}. my birthday ${birthday}. my university name is ${university}`
    );
};

let printMyInfo = printName.bind(info, "21/04/1997", "BUBT");
printMyInfo("Hi");

Function.prototype.myBind = function (...arg) {
    console.log("arg:", arg);
    let obj = this;
    let params = arg.slice(1);
    console.log("params:", params);
    return function (...arg2) {
        obj.apply(arg[0], [...params, ...arg2]);
    };
};

let printMyInfo2 = printName.myBind(info, "21/04/1997", "BUBT");
printMyInfo2("Hello");

let count = 0;
const doNetwork = () => {
    console.log("network calling..", count++);
};

const debouching = function (fn, delay) {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            doNetwork.apply(this, arguments);
        }, delay);
    };
};

const batterFunction = debouching(doNetwork, 600);

function throttle(func, limit) {
    let inThrottle;
    return function (...args) {
        if (!inThrottle) {
            func(...args);
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}

const handleScroll = throttle(() => {
    // Update element positions based on scroll here
    console.log("Updating scroll position");
}, 200);

window.addEventListener("scroll", handleScroll);