What is JavaScript?

JavaScript (JS) is a high-level, interpreted programming language primarily used to make web pages interactive and dynamic.

Key Features:

1. Client-side scripting: Runs in the browser to manipulate HTML, CSS, and respond to user actions.
2. Dynamic and versatile: Can change content, validate forms, create animations, and more.
3. Event-driven: Responds to events like clicks, hover, or keypress.
4. Interpreted language: No compilation needed; browser executes JS code directly.
5. Supports object-oriented and functional programming.
6. Used in full-stack development with Node.js for backend.

Example:

document.getElementById("myBtn").addEventListener("click", function() {
  alert("Button clicked!");
});

In short:

JavaScript is the language of the web that makes websites interactive, dynamic, and responsive. It works alongside HTML and CSS to build modern web applications.

Difference between var, let, const

Example:

// var
var x = 10;
var x = 20; // redeclaration allowed
x = 30;     // reassignment allowed

// let
let y = 10;
// let y = 20; // Error: redeclaration not allowed
y = 30;      // reassignment allowed

// const
const z = 10;
// const z = 20; // Error: redeclaration not allowed
// z = 30;      // Error: reassignment not allowed

Key Points:

• Use let for variables that change.
• Use const for constants and objects whose reference won’t change.
• Avoid var in modern JS because of scope issues.

In short:

var = function-scoped & redeclarable, let = block-scoped & reassignable, const = block-scoped & constant.

Hoisting

Hoisting in JavaScript is when variable and function declarations are moved to the top of their scope during compilation. var variables are hoisted and initialized as undefined, let and const are hoisted but cannot be accessed before declaration (temporal dead zone), function declarations are fully hoisted, while function expressions are not.

What is closure?

A closure in JavaScript is a function that remembers and can access variables from its outer (enclosing) scope even after that outer function has finished executing.

Key Points:

• Enables data privacy.
• Useful for callbacks, event handlers, and factory functions.

Example:

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    }
}
const counter = outer();
counter(); // 1
counter(); // 2

Summary:

Closures allow a function to retain access to its outer scope variables, even after the outer function ends.

Event bubbling and capturing

Concept:

• Event Capturing: The event is handled from outermost element to the target element.
• Event Bubbling: The event is handled from target element back up to the outer elements.

Key Points:

• By default, most events use bubbling.
• Use addEventListener(type, fn, true) for capturing and false for bubbling.

Example:

document.querySelector('#child').addEventListener('click', () => {
  console.log('Child clicked');
}, false); // bubbling

Summary:

Event capturing goes top-down, bubbling goes bottom-up, determining the order events are handled.

What is event delegation?

Event delegation is a technique where a single parent element handles events for its child elements, instead of attaching separate event listeners to each child.

Key Points:

• Improves performance with many child elements.
• Uses event bubbling to catch events.
• Allows dynamic elements to be handled without extra listeners.

Example:

document.querySelector('#parent').addEventListener('click', (e) => {
  if(e.target && e.target.matches('button.child')) {
    console.log('Button clicked:', e.target.textContent);
  }
});

Summary:

Event delegation uses one parent listener to manage events for multiple child elements efficiently.

Difference between == and ===

Key Points:

• == checks value only, converts types if needed.
• === checks value and type, no conversion.

Summary:

Use === for strict comparison to avoid unexpected type coercion.

What is scope?

Scope determines where a variable or function is accessible in the code.

Types:

• Global Scope: Accessible anywhere in the code.
• Local/Function Scope: Accessible only inside the function.
• Block Scope: (let/const) Accessible only within { }.

Example:

let globalVar = "I am global";

function test() {
    let localVar = "I am local";
    console.log(globalVar); // accessible
    console.log(localVar);  // accessible
}

console.log(globalVar); // accessible
console.log(localVar);  // Error

Summary:

Scope defines the visibility and lifetime of variables and functions in JavaScript.

Call, apply, bind

These methods are used to set the this value of a function explicitly.

| --- | --- | --- |

Example:

const person = { name: "Rohan" };
function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

greet.call(person, "Hi");         // Hi, Rohan
greet.apply(person, ["Hello"]);   // Hello, Rohan
const greetPerson = greet.bind(person);
greetPerson("Hey");               // Hey, Rohan

Summary:

call and apply invoke immediately, bind returns a new function with this set.

What is this keyword?

What is promise?

Promise vs async/await

What is callback hell?

What is fetch API?

What is JSON?

LocalStorage vs sessionStorage

What is debounce?

What is throttle?

Explain prototype

Prototype chain