JS Fundamentals | Javascript Hindi Course For Beginners ( 2023 ) #15

 

What is Javascript Engine ?

A JavaScript engine is a computer program that executes JavaScript code. JavaScript is a high-level, dynamic, interpreted programming language that is widely used for developing web applications. JavaScript engines are embedded in web browsers and server-side environments such as Node.js to interpret and execute JavaScript code.
When you run JavaScript code in a browser, the browser's JavaScript engine takes the JavaScript code and converts it into machine-readable instructions that the computer can execute. The engine parses and compiles the JavaScript code, optimising it for performance, and then executes it.
notion image
 

What is Interpreter ?

  • An interpreter translates the code line by line, executing each line as it is encountered.
  • It does not produce an executable file.
  • It is typically slower than a compiler, as it needs to interpret each line of code as it runs.
  • It can detect errors in the code as it interprets it, allowing for quicker debugging.
  • Interpreted code is platform-independent.
 

What is Compiler ?

  • A compiler translates the entire code into machine-readable form before execution, creating an executable file.
  • It can optimise code for better performance.
  • It typically takes longer to compile code than it takes to interpret it, but the resulting executable code can be run repeatedly without the need to recompile.
  • It can detect some errors during compilation but may not catch all errors until runtime.
  • Compiled code is typically platform-dependent.
 

Javascript Uses which translation ?

JavaScript is an interpreted language, meaning that JavaScript code is executed by an interpreter without being compiled into machine code. When you run JavaScript code in a web browser or server-side environment like Node.js, the JavaScript engine parses and executes the code directly, without creating an executable file. However, modern JavaScript engines use advanced techniques like Just-In-Time (JIT) compilation to optimise the execution of JavaScript code for better performance. So, even though JavaScript is an interpreted language, it employs some compiler-like techniques to improve performance.
 
 
notion image

Memory Heap

In JavaScript, the memory heap is a region of memory where dynamic memory allocation occurs. The heap is where objects, arrays, and other complex data types are stored.
Whenever you create a new object or array in JavaScript, the JavaScript engine allocates space for it on the heap. When the object or array is no longer needed, the engine deallocates the memory so that it can be used for other purposes.
Managing the memory heap is important in JavaScript because inefficient memory usage can lead to performance problems and even crashes. To optimise memory usage, it's important to use data types and algorithms that minimise memory usage and to avoid memory leaks by releasing memory when it's no longer needed.
 

What is Garbage Collector ?

In JavaScript, the garbage collector is a built-in mechanism that automatically manages the memory heap, freeing up memory that is no longer being used by the program.
JavaScript uses automatic memory management, which means that the programmer does not need to explicitly allocate or deallocate memory. Instead, the JavaScript engine automatically allocates memory for new objects and data structures on the heap, and the garbage collector automatically frees up memory when it is no longer needed.
 

Memory Leak

a memory leak occurs when a program allocates memory on the heap but does not release it when it is no longer needed. Over time, these memory leaks can cause the program to consume more and more memory, eventually leading to performance problems and even crashes.
 

Call Stack

the call stack is a data structure that is used to keep track of the sequence of function calls that are currently being executed.
The call stack works on a "last in, first out" (LIFO) basis, which means that the most recently called function is executed first, and when it completes, control is returned to the function that called it.
Whenever a function is called, a new frame is added to the top of the call stack, containing information about the function call, such as its arguments and local variables. When the function completes, its frame is removed from the stack, and control returns to the function that called it.
 

Stack overflow

a stack overflow error occurs when the call stack exceeds its maximum size. This can happen when a function calls itself recursively too many times, or when there are too many nested function calls in the program.
 

What is Callback Queue and Event Loop ?

the event loop and the callback queue work together to manage the execution of asynchronous code.
When an asynchronous function is called, it is added to the callback queue instead of the call stack. The event loop then continuously checks the callback queue and moves any pending callbacks from the queue to the call stack when the stack is empty.
The event loop works by constantly checking the call stack and the callback queue. If the call stack is empty, it will check the callback queue for any pending callbacks. If there is a callback in the queue, it will be moved to the call stack for execution.
This process allows the program to continue executing other code while waiting for asynchronous operations to complete. For example, if you make an HTTP request to an API, the JavaScript engine will not wait for the response before continuing to execute other code. Instead, the callback function for the HTTP request will be added to the callback queue, and the event loop will execute it when the response is received.
The event loop and callback queue are essential to writing asynchronous code in JavaScript, as they allow the program to perform non-blocking I/O operations without freezing the user interface or blocking the main thread. However, it's important to write code that uses callbacks and event handlers efficiently to avoid performance issues and potential bugs.
 

Scopes in Javascript

  1. Global Scope: A variable declared outside of any function or block has global scope and can be accessed from anywhere in the program.
  1. Function Scope: A variable declared inside a function has function scope and can only be accessed within that function, as well as any nested functions.
  1. Block Scope: A variable declared inside a block, such as a conditional statement or a loop, has block scope and can only be accessed within that block.
 

Hoisting

Hoisting is a JavaScript behaviour where variable declarations and function declarations are moved to the top of their respective scopes during the compilation phase, before the code is executed. This means that variables and functions can be used before they are declared.
However, it's important to note that only the declarations are hoisted, not the assignments. This means that if you declare a variable but don't assign a value to it until later in the code, the variable will still exist but its value will be undefined until it is assigned a value.
 
console.log(myVar); // undefined
var myVar = "Hello World";
Only Function declarations are also hoisted, which means that you can call a function before it is defined
myFunction(); // "Hello World"
function myFunction() {
  console.log("Hello World");
}
It's important to be aware of hoisting in JavaScript to avoid potential bugs and make sure that your code behaves as expected.
 

Closures

In JavaScript, a closure is a function that has access to variables in its outer (enclosing) function's scope chain, even after the outer function has returned.
Closures are created whenever a function is defined inside another function, and the inner function has access to the outer function's variables and parameters. This allows the inner function to access and manipulate variables that are not directly accessible from outside the outer function.
Closures are commonly used in JavaScript for a variety of purposes, such as:
  1. Data privacy: By using closures, you can create private variables and methods that are not accessible from outside the function.
  1. Callbacks and event handlers: Closures are often used to create callbacks and event handlers that can access variables from the outer function's scope.
  1. Memoization: Closures can be used to cache expensive calculations, by storing the results in a variable in the outer function's scope.
function outerFunction() {
  var outerVariable = "Hello";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // "Hello"
 

Call Apply Bind

 
Call Apply Bind is used to Borrow / Copy Function from other One object to another Object
const address1 = {
  city: "Patna",
  state: "Bihar",

  address: function (street, pincode) {
    console.log(`${street}, ${pincode},${this.city},${this.state}`);
  },
};
const address2 = {
  city: "Ranchi",
  state: "Jharkhand",
};
// For Call -> We are borrowing addressFn from address1 to address2 Obj
address1.address.call(address2, "Patratu", 845475);

// For Apply -> Difference betn Call and Apply ,we pass arg in array form in apply
address1.address.apply(address2, ["Patratu", 845475]);

// For Bind -> if you want to call fn later then you hold values inside some variables
// and you can call it later

const bindAddresValue = address1.address.bind(address2, "Patratu", 845475);

bindAddresValue()