JavaScript.

var is function-scoped, while let and const are block-scoped. const also stops the variable from being reassigned.

var can be redeclared and updated. It is hoisted and starts as undefined, so reading it before its line gives undefined instead of an error.

let can be updated but not redeclared in the same scope. It is hoisted but not initialized, so reading it before its declaration throws a ReferenceError.

const can be neither updated nor redeclared, and it must be initialized where it is declared. It fixes the binding, not the value, so an object held in a const can still change.

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

Hoisting means JavaScript sets up a scope's declarations before it runs any code in that scope. The code then behaves as if the declarations moved to the top, although nothing moves in the source.

Variables declared with var are hoisted and initialized with undefined. Variables declared with let and const are hoisted but not initialized, so reading one before its declaration throws a ReferenceError. That stretch is called the temporal dead zone. Function declarations are hoisted whole, so you can call them before the line that defines them.

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

"use strict" turns on strict mode, which makes JavaScript throw errors for mistakes it would otherwise ignore and blocks a few unsafe actions. You put it at the top of a script or a function.

In strict mode:

• Assigning to an undeclared variable throws instead of creating a global.
• Duplicate parameter names are a syntax error.
• this is undefined in a plain function call, not the global object.
• Deleting a variable, a function or arguments is not allowed.

These rules make code safer and easier for engines to optimize. Modules and class bodies are strict automatically, with no directive needed.

The main ways are a function declaration, a function expression and an arrow function. The Function constructor also works but is rarely used.

• A declaration is hoisted whole, so you can call it before its line.
• An expression assigns a function to a variable, so it exists only after that line runs.
• An arrow function is a shorter expression that takes this from the surrounding code.
• The Function constructor builds a function from a string at runtime.

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

JavaScript has 7 primitive data types. A primitive is a value that is not an object, and it cannot be changed once it is created.

1. Number, for integers and floating-point numbers.
2. String, for text.
3. Boolean, which is true or false.
4. Undefined, the value of a variable that was declared but not assigned.
5. Null, an intentional absence of value.
6. Symbol, a unique identifier added in ES6.
7. BigInt, for integers beyond Number.MAX_SAFE_INTEGER, added in ES2020.

Arrays, functions and every other value are objects. typeof null returns "object", a legacy bug kept for compatibility.

undefined means a value was never assigned, while null is an explicit "no value". JavaScript produces undefined on its own, and null comes from your code or from APIs such as document.getElementById() when nothing matches.

A variable that is declared but not assigned is undefined, and so is a function parameter the caller did not provide. A missing object property and a function with no return also give undefined. null is an intentional assignment that marks a value as empty.

The two are loosely equal but not strictly equal, so null == undefined is true and null === undefined is false. typeof undefined is "undefined", but typeof null is "object", a legacy quirk.

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

Use typeof for primitives and functions, Array.isArray() for arrays, and instanceof to check whether an object came from a given constructor or class.

typeof returns a string such as "number", "string" or "function". It has two traps. typeof null is "object", and so is typeof of any array, which is why arrays need Array.isArray(). To test for null itself, compare with === null.

instanceof walks the prototype chain, so it fails for objects created in another frame or window.

The most reliable general check is Object.prototype.toString.call(value), which returns labels such as "[object Date]" or "[object Null]".

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

=== compares value and type with no conversion, while == converts both sides to a common type and then compares. That conversion is called type coercion.

With loose equality, 5 == "5" is true because the string becomes a number first. With strict equality, 5 === "5" is false because a number and a string are different types. A special case is null == undefined, which is true, while null === undefined is false.

The coercion rules are hard to predict, so use === by default. The one common exception is value == null, which checks for null and undefined together.

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

The usual way is an object literal, such as { name: "John" }. You can also call new Object(), use Object.create() to choose the new object's prototype, or call a constructor function with new.

• An object literal is the shortest form and covers most cases.
• new Object() does the same thing with more code, so it is rarely used.
• Object.create(proto) makes an object whose prototype is proto, and Object.create(null) makes one with no prototype at all, which suits a plain dictionary.
• A constructor function called with new builds many objects of the same shape, which is what the class syntax does today.

// 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 reads a property whose name is a valid identifier, while bracket notation takes any string or a variable as the key.

Use dot notation, as in obj.name, whenever the key is fixed and a valid identifier. It is shorter and easier to read. Use bracket notation, as in obj["full name"], when the key has spaces or special characters. A key that starts with a digit needs it too.

Brackets also take an expression, so obj[key] reads whatever property the variable key names at runtime. That makes bracket notation the only choice for dynamic keys, such as when looping over property names.

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

Scope decides where in the code a variable or function can be accessed. JavaScript has three main levels.

A variable in the global scope, declared outside any function or block, is accessible everywhere. A var or a parameter has function scope, accessible anywhere in its function. A let or const has block scope, accessible only inside the nearest braces. So a var inside an if block still belongs to the whole function, while a let there cannot be read once the block ends.

Scopes nest, so JavaScript resolves a name by checking the current scope first and then each outer scope. That lookup is the scope chain. Keep globals few, because every script on the page shares them and their names can clash.

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

The Document Object Model (DOM) is the programming interface for an HTML document. It represents the page as a tree of objects that JavaScript can read and change.

The browser parses the HTML and builds a node for each element, attribute and piece of text. The document object is the root of that tree. Scripts start from it to find and change nodes, or to add and remove them, and the screen updates to match.

The DOM is not the HTML source. It reflects the page as it is now, including every change made by scripts.

Use querySelector() for the first element that matches a CSS selector, and querySelectorAll() for every match. The older getElementById(), getElementsByClassName() and getElementsByTagName() each select by one thing.

querySelector() returns the first match, or null if nothing matches. querySelectorAll() returns a static NodeList that does not change afterwards. Both accept any CSS selector, such as #myId .myClass, which makes them the most flexible choice.

getElementById() is the direct way to find a single element by its ID. getElementsByClassName() and getElementsByTagName() return a live HTMLCollection, which updates by itself as the DOM changes. That can surprise you in a loop that adds or removes matching elements.

// 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 and sets HTML markup, textContent gets and sets raw text, and innerText gets and sets only the text a user can see.

• innerHTML parses what you assign as HTML, so '<b>Bold</b>' renders as bold text. Never assign untrusted input to it, because that opens the page to cross-site scripting.
• textContent treats everything as plain text, so the same string shows the tags literally. It ignores styling and returns the text of every node, including hidden elements and <script> content.
• innerText respects CSS, so it skips hidden elements. Reading it forces the browser to calculate layout, which makes it slower.

For plain text, textContent is the safe default.

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

Create the element with document.createElement(), set its content and attributes, then insert it with append(), appendChild() or insertAdjacentElement(). Until you insert it, the element exists only in memory.

• appendChild() adds one node as the last child and returns that node.
• append() is newer and takes several nodes or plain strings at once, but returns nothing.
• insertAdjacentElement() takes a position such as 'beforeend', so you can place the element before, inside or after the target.

Set text with textContent rather than innerHTML, so user data is never parsed as HTML. When adding many elements, build them in a DocumentFragment and insert it once.

// 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);

There are three ways: an inline HTML attribute such as onclick, a DOM property such as button.onclick, and addEventListener(). Use addEventListener() in modern code.

An inline attribute mixes JavaScript into the HTML as a string, and a strict Content Security Policy (CSP) blocks it. A DOM property keeps the code in JavaScript, but each element holds only one handler per event, so assigning a second one replaces the first.

addEventListener() lets you attach many listeners to the same event. It also accepts options such as once and passive, supports the capture phase, and pairs with removeEventListener() for cleanup.

<!-- HTML attribute -->
<button onclick="handleClick()">Click</button>

// DOM property
button.onclick = function() { };
// addEventListener (recommended)
button.addEventListener('click', function() { });