JavaScript Interview Question::

1. Difference Between HTML and DOM

HTML (HyperText Markup Language)

• HTML is the static markup code written by the developer.
• It is the source document loaded from a file (index.html) or server.
• It does not change unless the file is edited manually.
• The browser reads HTML first to build the page structure.

Example:

<p id="msg">Hello</p>

This is the real markup inside the file.

DOM (Document Object Model)

• DOM is the in-memory representation of the HTML created by the browser.
• It behaves like a tree of objects (nodes).
• The DOM can change dynamically using JavaScript (add/remove/change elements).
• What you see in DevTools is the DOM, not the original HTML file.

Example:

document.getElementById("msg").textContent = "Hi!";

This changes the DOM, not the HTML file.

2.Difference between var, let and const keywords in JavaScript

var:

• Declares variables with function or global scope and allows re-declaration and updates within the same scope.

Example:

var x = 10;
var x = 20; // allowed

let:

• Declares variables with block scope, allowing updates but not re-declaration within the same block.

Example:

let y = 10;
y = 20; // allowed
let y = 30; // ❌ not allowed

const:

• Declares block-scoped variables that cannot be reassigned after their initial assignment.

Example:

const user = { name: "A", age: 20 };
user.age = 21; // ✔ allowed (modifying object)
user = {};     // ❌ not allowed

3. Function Declaration vs Function Expression

Function Declaration

• Also called function statement.
• Defined using the function keyword with a name.
• Hoisted completely, so it can be called before it is defined.
• More suited for defining functions you want available globally in a scope.

Example:

sayHello(); // ✔ Works (hoisted)

function sayHello() {
  console.log("Hello");
}

Function Expression

• A function stored inside a variable.
• Can be named or anonymous.
• Not fully hoisted → the variable is hoisted, but not the function.
• Cannot be called before the line where it is defined.

Example:

sayHi(); // ❌ Error: sayHi is not a function

var sayHi = function () {
  console.log("Hi");
}

4. == vs ===

== (Loose Equality)

• Compares values only.
• Performs type coercion if types are different.
• Converts operands to the same type before comparing.

Example:

0 == "0";       // true (string converted to number)
false == 0;     // true (boolean converted to number)
null == undefined; // true

=== (Strict Equality)

• Compares both value and type.
• No type coercion is done.
• Safer and recommended in most cases.

Example:

0 === "0";      // false (number !== string)
false === 0;    // false (boolean !== number)
null === undefined; // false

5.Difference Between Class and Object in JavaScript

Class:

• A blueprint or template for creating objects
• Defines properties and methods
• Does not occupy memory until an object is created
• Introduced in ES6
• Example: class Car {}

Object:

• A real instance created from a class
• Occupies memory
• Contains actual data values
• Created using a class or object literals
• Example: const car1 = new Car();

Example:

class Car {
  constructor(name, model) {
    this.name = name;
    this.model = model;
  }
}

const car1 = new Car("BMW", "X5");

• Car → Class (template)
• car1 → Object (instance)