• var: Function-scoped, can be redeclared and updated, hoisted with undefined
• let: Block-scoped, can be updated but not redeclared, hoisted but not initialized
• const: Block-scoped, cannot be updated or redeclared, must be initialized at declaration

var a = 1;     // Function scoped
let b = 2;     // Block scoped
const c = 3;   // Block scoped, immutable binding

Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope during compilation. Variables declared with var are hoisted and initialized with undefined, while let and const are hoisted but not initialized (temporal dead zone).

console.log(x); // undefined (not error)
var x = 5;
console.log(y); // ReferenceError
let y = 10;

"use strict" enables strict mode, which catches common coding mistakes and prevents certain actions. It makes JavaScript more secure and optimized by:

• Preventing use of undeclared variables
• Disallowing duplicate parameter names
• Making this undefined in functions (not global object)
• Preventing deletion of variables, functions, or arguments

// Function declaration
function myFunction() { }
// Function expression
const myFunction = function() { };
// Arrow function
const myFunction = () => { };
// Function constructor (rarely used)
const myFunction = new Function('return 1');

JavaScript has 7 primitive data types:

1. Number: Integers and floating-point numbers
2. String: Text data
3. Boolean: true or false
4. Undefined: Variable declared but not assigned
5. Null: Intentional absence of value
6. Symbol: Unique identifier (ES6)
7. BigInt: Large integers beyond Number.MAX_SAFE_INTEGER (ES2020)

• undefined: Variable has been declared but not assigned a value, or function parameter not provided
• null: Intentional assignment representing "no value" or "empty"

let a; // undefined
let b = null; // null
typeof undefined; // "undefined"
typeof null;      // "object" (legacy quirk)

typeof variable;           // Returns string representation
Array.isArray(variable);   // Check if array
variable instanceof Constructor; // Check instance type
Object.prototype.toString.call(variable); // Most reliable method

• == (loose equality): Performs type coercion before comparison
• === (strict equality): Compares both value and type without coercion

5 == "5";    // true (coercion)
5 === "5";   // false (different types)
null == undefined;  // true
null === undefined; // false

// Object literal
const obj1 = { name: "John", age: 30 };
// Object constructor
const obj2 = new Object();
obj2.name = "John";
// Object.create()
const obj3 = Object.create(null);
// Constructor function
function Person(name) { this.name = name; }
const obj4 = new Person("John");

Dot notation: Used with valid identifiers
Bracket notation: Used with dynamic keys, spaces, or special characters

const obj = { name: "John", "full name": "John Doe" };
obj.name;           // Dot notation
obj["full name"];   // Bracket notation
obj[variable];      // Dynamic access

Scope determines the accessibility of variables and functions in different parts of code. JavaScript has:

• Global scope: Variables accessible everywhere
• Function scope: Variables accessible within function
• Block scope: Variables accessible within block (let/const)

• Global scope: Variables declared outside any function/block
• Function scope: Variables declared inside a function (var, parameters)
• Block scope: Variables declared inside {} blocks (let, const)

var globalVar = "global";
function example() {
  var functionScoped = "function";
  if (true) {
    let blockScoped = "block";
    const alsoBlock = "block";
  }
}

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.

// By ID
document.getElementById('myId');
// By class
document.getElementsByClassName('myClass');
document.querySelector('.myClass');
document.querySelectorAll('.myClass');
// By tag
document.getElementsByTagName('div');
// By CSS selector
document.querySelector('#myId .myClass');

• innerHTML: Gets/sets HTML content including tags
• textContent: Gets/sets text content, ignores styling
• innerText: Gets/sets visible text content, respects styling

element.innerHTML = '<b>Bold</b>';    // Renders as bold
element.textContent = '<b>Bold</b>';  // Shows literal text
element.innerText = 'Visible text';   // Respects CSS display

// Create element
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'my-class';
// Append to DOM
document.body.appendChild(div);
// or
document.body.append(div);
// or
document.body.insertAdjacentElement('beforeend', div);

// HTML attribute
<button onclick="handleClick()">Click</button>
// DOM property
button.onclick = function() { };
// addEventListener (recommended)
button.addEventListener('click', function() { });