varVariable with function-level scope.
1. Variables
  1. What it is: The "var" keyword in JavaScript declares a variable with function-level or global scope.
  2. What it's for: It creates and initialises variables in JavaScript, allocating memory to store values.
  3. When to use it: It can be used to declare variables, but in modern JavaScript "let" or "const" are generally preferable, for better control over scope.
letVariable with block-level scope.
1. Variables
  1. What it is: The "let" keyword in JavaScript declares a variable with block-level scope.
  2. What it's for: It declares variables that are confined to the scope of the block they are declared in (inside a loop or an if statement, for...
  3. When to use it: Use "let" when you need a variable that can be reassigned and that should only be visible inside a particular block of code.
constVariable with block-level scope and a constant value.
1. Variables
  1. What it is: The "const" keyword in JavaScript declares variables whose value cannot be reassigned after initialisation.
  2. What it's for: It declares block-scoped variables whose value is constant and cannot be changed once assigned.
  3. When to use it: Use "const" when you need variables that must not be reassigned, such as constants or references to objects and arrays that do not change...
numberNumeric data type representing both integers and floating-point numbers.
2. Data types
  1. What it is: "number" in JavaScript is a primitive data type representing numeric values, both integers and floating-point numbers.
  2. What it's for: It represents and manipulates numeric values in JavaScript, allowing mathematical and arithmetic operations.
  3. When to use it: Whenever you need to work with any kind of numeric value, whether whole or decimal.
StringRepresents a sequence of text characters, immutable, used for handling text.
2. Data types
  1. What it is: The `String` data type in JavaScript represents a sequence of text characters.
  2. What it's for: Strings represent and manipulate text.
  3. When to use it: Use the `String` type whenever you need to work with textual data: names, descriptions, sentences or words.
booleanBoolean data type, with two possible values: true or false.
2. Data types
  1. What it is: A boolean data type in JavaScript represents a logical value that can only be "true" or "false".
  2. What it's for: It represents binary values (true or false), typically in logical operations, conditionals, loops and other control structures.
  3. When to use it: The boolean type is used whenever you need to test a condition — in conditionals (if, else, while and so on) — or to represent the...
objectComplex data type representing collections of properties.
2. Data types
  1. What it is: In JavaScript, an "object" is a complex data type that lets you store collections of properties and values.
  2. What it's for: Objects represent complex data structures: entity models, database records, or configuration.
  3. When to use it: Objects are used when you want to represent collections of related properties, or complex data models.
arrayComplex data type for storing an ordered collection of items
2. Data types
  1. What it is: An array in JavaScript is a complex data type that lets you store an ordered collection of items, which may be of any type (numbers, strings,...
  2. What it's for: Arrays handle lists of items or related data — lists of names, numbers or objects — making that data easier to reach and manipulate...
  3. When to use it: Arrays are used when you need to work with a set of ordered data or a sequence of items, where each item can be identified by an...
FunctionData type representing a function — a block of executable code that can be called.
2. Data types
  1. What it is: In JavaScript, the `function` data type represents a function: a block of code that can be defined and later called to perform an operation...
  2. What it's for: Functions organise code, making it reusable and modular.
  3. When to use it: Functions are used when you need to perform a specific operation, or a group of operations, repeatably, or when you need to abstract and...
undefinedThe default value for variables that are uninitialised or absent.
2. Data types
  1. What it is: `undefined` is a primitive data type in JavaScript representing the value of a variable that has been declared but not initialised, or of a non-existent property.
  2. What it's for: It signals the absence of an initial value in a variable, or that an object or a property does not exist.
  3. When to use it: `undefined` is assigned automatically to variables that are declared but not initialised, and may also be returned when you try to reach properties that do not...
nullAn intentional value representing the absence of an object or a value.
2. Data types
  1. What it is: `null` is a primitive data type in JavaScript that intentionally represents the absence of a value or of an object.
  2. What it's for: It explicitly signals that a variable or property has no value assigned, or that an object is empty.
  3. When to use it: Use `null` when you want to state explicitly that an object or a value is absent — when you clear a reference to an object, or when a value is not...
symbolPrimitive data type used for unique identifiers.
2. Data types
  1. What it is: `symbol` is a primitive data type introduced in ECMAScript 6 (ES6) that represents a unique identifier.
  2. What it's for: `symbol` values are mainly used as unique keys for an object's properties, avoiding conflicts with other properties or keys, especially when working with...
  3. When to use it: Use `symbol` when you need unique identifiers for an object's properties, or when you want to avoid collisions between object keys.
BigIntData type for representing very large integers.
2. Data types
  1. What it is: `BigInt` is a primitive data type introduced in ECMAScript 2020 (ES11) that lets you represent integers larger than those that can be represented with the...
  2. What it's for: It is used when you need integers larger than 2^53 − 1, the maximum for JavaScript's `Number` type.
  3. When to use it: Use `BigInt` when you have to work with very large or very small integers, beyond the safe limit of `Number` (±2^53 − 1).
MapData structure storing key-value pairs, where the keys may be of any type.
2. Data types
  1. What it is: The `Map` data type in JavaScript is a data structure storing key-value pairs.
  2. What it's for: `Map` stores data associated with keys more powerfully than objects do.
  3. When to use it: Use a `Map` when you need to handle a collection of data with keys that may be of any type, or when you want to preserve the order of...
SetData structure storing unique values, with no duplicates allowed.
2. Data types
  1. What it is: The `Set` data type in JavaScript is a data structure that lets you store **unique values** of any type, with no duplicates.
  2. What it's for: A `Set` is useful when you need to store a collection of unique values, with no duplicates.
  3. When to use it: Use a `Set` when you need to keep a collection of items with no duplicates, or when you want to remove duplicates from a structure such as an...
DateData type used for working with dates and times in JavaScript.
2. Data types
  1. What it is: The `Date` data type in JavaScript is an object used to represent and handle **dates and times**.
  2. What it's for: The `Date` object creates, manipulates and formats dates and times.
  3. When to use it: Use the `Date` type when you need to work with date and time information: managing calendars, scheduling events, calculating...
RegExpRepresents a regular expression, used for searching and manipulating text patterns.
2. Data types
  1. What it is: The `RegExp` data type in JavaScript represents a regular expression: a sequence of characters defining a search pattern.
  2. What it's for: Regular expressions search, validate and manipulate patterns within strings.
  3. When to use it: Use the `RegExp` type when you need to identify or operate on complex text patterns: finding repeated characters, validating user input...
WeakMapData structure similar to `Map`, with a few differences.
2. Data types
  1. What it is: `WeakMap` is a JavaScript data structure storing key-value pairs, where the keys must be objects and the references to those keys are weak.
  2. What it's for: `WeakMap` is used when you want to attach extra information to objects without preventing them being removed from memory once they are no longer in use...
  3. When to use it: Use `WeakMap` when you want to store data tied to objects without affecting how their memory is managed.
WeakSetData structure similar to `Set`, storing only objects as values, and with weak references.
2. Data types
  1. What it is: `WeakSet` is a JavaScript data structure similar to `Set`, but it stores only objects as values, and the references to those objects are weak.
  2. What it's for: `WeakSet` stores objects in such a way that they can be removed from memory automatically once they are no longer in use.
  3. When to use it: Use `WeakSet` when you need a set of objects in which memory management is automatic.
Template literalsStrings with backticks and interpolation
2. Data types
  1. What it is: Template literals are strings delimited by backticks that let you insert variables and write text across several lines.
  2. What it's for: They compose dynamic strings readably, inserting expressions with the `${expression}` syntax instead of concatenating with `+`.
  3. When to use it: When you need to build text containing variables or expressions, or strings spanning several lines.
split()Splits a string into an array
2. Data types
  1. What it is: The string method `split()` divides a string into an array of substrings, using a separator.
  2. What it's for: It breaks text into parts — separating the words of a sentence, or the values in a CSV row.
  3. When to use it: When you need to turn a string into a list, as in `"a,b,c".split(",")`.
replace()Replaces part of a string
2. Data types
  1. What it is: The string method `replace()` returns a new string in which a portion of text (or a pattern) has been substituted.
  2. What it's for: It changes a string's content; with a regular expression and the `g` flag it replaces every occurrence.
  3. When to use it: When you need to correct or transform parts of a text; to replace every occurrence simply, there is also `replaceAll()`.
trim()Removes whitespace from both ends
2. Data types
  1. What it is: The string method `trim()` returns a new string with the leading and trailing whitespace removed.
  2. What it's for: It cleans stray spaces out of user input before comparing or storing it.
  3. When to use it: When you process text typed into a form, to avoid errors caused by accidental spaces.
toUpperCase() e toLowerCase()Change upper and lower case
2. Data types
  1. What it is: The methods `toUpperCase()` and `toLowerCase()` return the string converted entirely to upper or lower case respectively.
  2. What it's for: They normalise text — for comparisons that should ignore case, for instance.
  3. When to use it: When you compare or normalise strings such as emails or keywords.
startsWith() e endsWith()Check the start or the end of a string
2. Data types
  1. What it is: The methods `startsWith()` and `endsWith()` return `true` or `false` according to whether a string begins or ends with a given text.
  2. What it's for: They check prefixes and suffixes readably.
  3. When to use it: To check a file's extension, for instance, or whether a URL starts with `https`.
parseInt() e parseFloat()Convert a string to a number
2. Data types
  1. What it is: The functions `parseInt()` and `parseFloat()` read a string and extract from it a whole number or a decimal number respectively.
  2. What it's for: They convert text into a number — a value taken from an input, for example.
  3. When to use it: When you receive numbers in string form; if the conversion fails they return `NaN` (Not a Number).
Number(), String() e Boolean()Explicit type conversion
2. Data types
  1. What it is: The functions `Number()`, `String()` and `Boolean()` explicitly convert a value into a number, a string or a boolean respectively.
  2. What it's for: They give you control over type conversion instead of relying on JavaScript's implicit — and sometimes unpredictable — coercion.
  3. When to use it: When you want to be certain of a value's type, as in `Number("42")` or `Boolean(0)`.
MathObject holding mathematical functions
2. Data types
  1. What it is: `Math` is a built-in object gathering mathematical constants and functions, such as `Math.round()`, `Math.random()` and `Math.max()`.
  2. What it's for: It performs common calculations: rounding, random values, powers, minimum and maximum.
  3. When to use it: When you need mathematical operations — `Math.floor(Math.random() * 10)` for a random number, for instance.
AddizioneOperator that adds two operands, or concatenates strings.
3. Operators
  1. What it is: The addition operator (`+`) in JavaScript adds two numbers together, or concatenates two strings.
  2. What it's for: It performs arithmetic on numbers, or concatenates strings.
  3. When to use it: Use the addition operator to add numbers, or to join (concatenate) strings.
SottrazioneArithmetic operator for subtracting numeric values.
3. Operators
  1. What it is: The subtraction operator (-) in JavaScript is a binary arithmetic operator that subtracts the second operand from the first.
  2. What it's for: It performs subtraction between numbers, calculates differences and handles arithmetic generally.
  3. When to use it: When you need to calculate the difference between two numbers, decrement values in combination with assignment, perform complex arithmetic, or...
MoltiplicazioneArithmetic operator for multiplying numeric values.
3. Operators
  1. What it is: The multiplication operator (*) in JavaScript is a binary arithmetic operator that multiplies two operands, returning their product.
  2. What it's for: It performs multiplication between numbers, calculates products and handles arithmetic requiring multiplication.
  3. When to use it: When you need to calculate the product of two or more numbers, scale values as in percentage calculations, perform complex arithmetic, or...
DivisioneArithmetic operator for dividing numeric values.
3. Operators
  1. What it is: The division operator (/) in JavaScript is a binary arithmetic operator that divides the first operand (the dividend) by the second (the divisor).
  2. What it's for: It performs division between numbers, calculates quotients and handles arithmetic requiring division.
  3. When to use it: When you need to calculate the result of dividing two numbers, convert units, work out proportions and ratios, perform scaling...
ModuloArithmetic operator for calculating the remainder of a division between two numbers.
3. Operators
  1. What it is: The modulo operator (%) in JavaScript returns the remainder of dividing two numbers.
  2. What it's for: It calculates the remainder of a division, tests whether a number is even or odd, implements circular loops, keeps numbers within a range and creates patterns...
  3. When to use it: When you need to determine divisibility between numbers, implement cyclic algorithms, handle rotations and cycles, create uniform distributions, or...
EsponenziazioneArithmetic operator for raising a number to a power.
3. Operators
  1. What it is: The exponentiation operator (**) in JavaScript is a binary arithmetic operator that raises the first operand (the base) to the power of the second (the exponent).
  2. What it's for: It calculates powers of numbers, implements mathematical formulas, works out exponential growth, performs geometric calculations and implements algorithms...
  3. When to use it: When you need to calculate squares, cubes and other powers, implement complex mathematical formulas, work out compound growth, perform calculations...
IncrementoArithmetic operator that increases a variable's value by one.
3. Operators
  1. What it is: The increment operator (++) in JavaScript is a unary operator that increases a variable's value by one.
  2. What it's for: It increments counters, drives iterative loops, implements numeric sequences, updates array indexes and handles arithmetic progressions.
  3. When to use it: When you need to increment variables in `for` loops, handle running counts, implement counters, update positions in data structures, or...
DecrementoUnary operator that decreases a numeric variable's value by one.
3. Operators
  1. What it is: The decrement operator (--) in JavaScript is a unary operator that reduces a numeric variable's value by 1.
  2. What it's for: It reduces a variable's value by one.
  3. When to use it: When you need to decrease a variable's value progressively, especially in contexts such as loops, iterations or countdowns.
AssegnamentoOperator that assigns a value to a variable.
3. Operators
  1. What it is: The assignment operator (=) in JavaScript assigns a value to a variable.
  2. What it's for: It assigns values to variables.
  3. When to use it: When you need to give a variable an initial value, or update the value of an existing one.
Uguaglianza non strettaCompares two values for equality after implicit type conversion.
3. Operators
  1. What it is: The loose equality operator (==) in JavaScript is a comparison operator that checks whether two values are equal, applying implicit type conversion...
  2. What it's for: It compares two values to see whether they are considered equivalent in content, even when they belong to different types.
  3. When to use it: When you need to compare values that may be of different types but you still want to know whether their content is equivalent after...
Uguaglianza StrettaCompares both the value and the type of the two operands, with no implicit coercion.
3. Operators
  1. What it is: The strict equality operator (`===`) in JavaScript is a comparison operator that checks whether two values are identical, with no type coercion.
  2. What it's for: It compares two values, checking both their content and their type.
  3. When to use it: When you need a strict comparison, making sure the two operands have the same value **and** the same type.
Disuguaglianza non strettaChecks whether two values differ, applying implicit type conversion if needed.
3. Operators
  1. What it is: The loose inequality operator (`!=`) in JavaScript compares two values and checks whether they are **not equal**, applying **type coercion** where needed.
  2. What it's for: It checks whether two values differ, even when they belong to different types.
  3. When to use it: When you need to check inequality between values of different types, or when you want a flexible answer, letting the...
Disuguaglianza StrettaCompares both the value and the type.
3. Operators
  1. What it is: The strict inequality operator (`!==`) in JavaScript compares two values, checking whether they are **not equal** in either value or type, with no coercion of...
  2. What it's for: It compares two values strictly, treating them as unequal if they differ in either value or type.
  3. When to use it: When you need a precise comparison between two values, making sure the comparison checks both the value and the type of the two operands.
AND LogicoEvaluates the expressions and returns the first falsy value, or the last truthy one.
3. Operators
  1. What it is: The logical AND operator (`&&`) in JavaScript evaluates two or more expressions.
  2. What it's for: It performs logical operations, checking whether several conditions are all true.
  3. When to use it: Use it when you need every condition to be true before performing an operation — checking that a user is authenticated and...
OR LogicoEvaluates the expressions and returns the first truthy value, or the last falsy one.
3. Operators
  1. What it is: The logical OR operator (`||`) in JavaScript evaluates two or more expressions.
  2. What it's for: It checks whether at least one of the conditions is true.
  3. When to use it: Use it when you want an operation to run if at least one condition is true — checking whether a user has filled in at least one of the...
NOT LogicoInverts an expression's truth value.
3. Operators
  1. What it is: The logical NOT operator (`!`) in JavaScript inverts an expression's truth value.
  2. What it's for: It checks the negation of a condition.
  3. When to use it: Use it when you want to negate a condition, or to check whether a value fails to meet a given condition.
Operatore TernarioPerforms an operation according to a condition.
3. Operators
  1. What it is: The ternary operator (`?
  2. What it's for: It writes compact conditional expressions, much like an `if-else` statement but on a single line.
  3. When to use it: Use it when you need a simple conditional evaluation that fits on one line.
Operatore di Concatenazione OpzionaleSafe access to nested properties without throwing errors.
3. Operators
  1. What it is: The optional chaining operator (`?.`) in JavaScript lets you reach the properties of nested objects safely.
  2. What it's for: It prevents errors when reaching nested properties of objects that may not exist, giving you a safe way to check a property is there before...
  3. When to use it: Use it when working with nested objects or complex data structures where one or more properties may be undefined.
Operatore di Coalescenza NullaReturns the first operand that is neither null nor undefined.
3. Operators
  1. What it is: The nullish coalescing operator (`??`) in JavaScript returns the first operand that is neither `null` nor `undefined`.
  2. What it's for: It handles optional values, stopping expressions returning `null` or `undefined` when a value is absent.
  3. When to use it: Use it when you want to supply a default only if a variable is `null` or `undefined`, without replacing falsy values such as `0`, `false` or empty strings.
Operatore di Diffusione (Spread)Expands an array's elements or an object's properties.
3. Operators
  1. What it is: The spread operator (`...`) in JavaScript expands an array's elements or an object's properties.
  2. What it's for: It works with arrays and objects more concisely.
  3. When to use it: Use it when you need to copy arrays or objects, concatenate arrays, add items to an array or merge objects.
Operatore typeofReturns an expression's data type.
3. Operators
  1. What it is: The `typeof` operator in JavaScript returns a string indicating the data type of an expression or a variable.
  2. What it's for: It determines the type of a variable or an expression.
  3. When to use it: Use it when you want to check a variable's type, to make sure your code works correctly with data of different kinds.
Operatore instanceofChecks whether an object is an instance of a given class or constructor.
3. Operators
  1. What it is: The `instanceof` operator in JavaScript checks whether an object is an instance of a given class, or was created through a specific constructor function.
  2. What it's for: It checks whether an object is an instance of a specific class, including objects created through custom constructor functions or JavaScript's native classes.
  3. When to use it: Use it when you need to check whether an object belongs to a class hierarchy or was created through a specific constructor.
Operatore deleteRemoves a property from an object
3. Operators
  1. What it is: The `delete` operator removes a property from an object.
  2. What it's for: It deletes a key-value pair from an object; it does not free memory manually.
  3. When to use it: When you need to remove a property from an object; for arrays it is better to use methods such as `splice()`, so you do not leave "holes".
Operatore inChecks whether a property exists
3. Operators
  1. What it is: The `in` operator returns `true` if a given property exists on an object or in its prototype chain.
  2. What it's for: It checks a key is present on an object before you use it.
  3. When to use it: For instance `"name" in person`, to check whether the object has a `name` property.
ifRuns a block of code only if a condition is true.
4. Control flow
  1. What it is: The `if` statement in JavaScript runs a block of code only when a given condition is true.
  2. What it's for: It controls the program's flow, performing certain operations only when a specific condition is met.
  3. When to use it: Use it when you want code to run only if a given condition is true.
elseRuns a block of code if the if condition is false.
4. Control flow
  1. What it is: The `else` statement runs a block of code when an `if` statement's condition is false.
  2. What it's for: It handles the case where an `if` condition is not true, providing an alternative path through the program.
  3. When to use it: Use it when you want to define default behaviour that runs if the stated conditions are not met.
else ifChecks further conditions if the preceding ones are false.
4. Control flow
  1. What it is: The `else if` statement lets you specify further conditions, checked only when the preceding ones are false.
  2. What it's for: It handles situations where several outcomes are possible.
  3. When to use it: Use it when you need to handle more than two conditional paths through the program.
switchRuns a block of code according to an expression's value.
4. Control flow
  1. What it is: The `switch` statement lets you run different blocks of code according to an expression's value.
  2. What it's for: It replaces long chains of `else if` when you want to compare one variable's value against several possible cases.
  3. When to use it: Use it when you have several conditions based on the same value and want to handle multiple cases tidily.
breakBreaks out of a loop or a control-flow structure.
4. Control flow
  1. What it is: The `break` statement in JavaScript immediately stops the execution of a loop (`for`, `while`, `do...while`) or of a control-flow...
  2. What it's for: It breaks out of a loop or a block once a given condition is met.
  3. When to use it: Use it when you want to leave a loop in response to a specific condition, or to stop a `switch` block once the matching case has been...
continueSkips the current iteration of a loop and moves to the next.
4. Control flow
  1. What it is: The `continue` statement in JavaScript stops the current iteration of a loop (`for`, `while`, `do...while`) and moves immediately to the next...
  2. What it's for: It skips part of a loop's body when a condition is met, bypassing the rest of the statements in the current iteration.
  3. When to use it: Use it when you want to skip a particular iteration of a loop and carry on with the following ones.
returnEnds a function's execution and returns a value.
4. Control flow
  1. What it is: The `return` statement in JavaScript immediately ends a function's execution and returns a specified value to the caller.
  2. What it's for: It leaves a function and returns a value to the caller.
  3. When to use it: Use it to stop a function's execution once you have the result you wanted, or when a specific condition is met.
forIterative loop for repeating a block of code a set number of times.
5. Loops
  1. What it is: The `for` loop in JavaScript is a control structure that repeatedly runs a block of code while a condition is true.
  2. What it's for: It iterates over arrays, numbers or other data structures when you know the number of repetitions, or want to control the index by hand.
  3. When to use it: Use it when you need to repeat an operation several times with a defined counter or index, or when you have to iterate over a collection's items with an...
whileIterative loop that continues while the condition is true.
5. Loops
  1. What it is: The `while` loop in JavaScript runs a block of code repeatedly while the given condition is true.
  2. What it's for: It repeats operations when you do not know the number of iterations in advance but want to carry on while a certain condition holds.
  3. When to use it: Use it when the number of repetitions depends on dynamic events or incoming data rather than a predetermined counter.
do...whileIterative loop that runs the block at least once, then continues while the condition is true.
5. Loops
  1. What it is: The `do...while` loop in JavaScript is similar to `while`, but it guarantees the block runs at least once before the condition is evaluated.
  2. What it's for: Use it when you want to be sure the block runs at least once, and then continue while the condition is true.
  3. When to use it: Useful when the operation must happen at least once, as when asking the user for input or initialising variables.
for...inLoop for iterating over an object's enumerable properties.
5. Loops
  1. What it is: The `for...in` loop in JavaScript iterates over an object's **enumerable properties** (arrays included, although that is not its recommended use).
  2. What it's for: It walks through all of an object's keys, giving you access to both the property names and their values.
  3. When to use it: Use it when you want to iterate over all of an object's properties without knowing the key names in advance.
for...ofLoop for iterating over the values of iterable objects.
5. Loops
  1. What it is: The `for...of` loop in JavaScript iterates **directly over the values** of an iterable object (arrays, strings, maps, sets and so on).
  2. What it's for: It walks simply through the values of iterable collections without you having to handle indexes or keys.
  3. When to use it: Use it when you want to read each item's value directly from an iterable data structure.
arrow functionCompact syntax for defining anonymous functions.
6. Functions
  1. What it is: An `arrow function` is a syntax introduced in ES6 for writing anonymous functions more concisely than the traditional form.
  2. What it's for: It creates shorter functions, often used as callbacks or for inline operations.
  3. When to use it: Use it when you need a simple function, especially when you do not want to change the function's context (`this`).
callbackFunction passed as an argument to another function.
6. Functions
  1. What it is: A `callback` is a function passed as an argument to another function and called later, usually once an operation has finished.
  2. What it's for: It runs code after a certain event or action, such as an HTTP response or the completion of an asynchronous operation.
  3. When to use it: When you want to customise a function's behaviour or react to future events or results.
IIFEFunction executed immediately after it is defined.
6. Functions
  1. What it is: An `IIFE` (Immediately Invoked Function Expression) is a JavaScript function that is defined and run immediately, without being called explicitly later...
  2. What it's for: It creates an isolated scope for variables and functions, keeping the global scope clean.
  3. When to use it: Useful when you want to run something straight away without leaving variables or functions available outside.
closureFunction that keeps access to the variables of its own scope even after it has run.
6. Functions
  1. What it is: A `closure` is a function that remembers, and can reach, the variables of the scope it was declared in, even after that outer scope has finished running.
  2. What it's for: It keeps private state, creates customised functions and handles data without exposing it to the global scope.
  3. When to use it: When you want to store information inside a function and keep it available between separate calls.
parametri di defaultDefault values assigned to a function's parameters.
6. Functions
  1. What it is: `Default parameters` are the values a function uses when a parameter is not supplied, or is `undefined`, at call time.
  2. What it's for: They make functions more flexible and robust, avoiding errors caused by missing parameters.
  3. When to use it: When a parameter has a sensible default in case the caller does not pass it.
rest parametersGathers a variable number of arguments into an array.
6. Functions
  1. What it is: `Rest parameters` let a function accept an indefinite number of arguments, gathering them into an array.
  2. What it's for: They handle functions that must accept a variable number of values, without defining each parameter one by one.
  3. When to use it: When you do not know in advance how many arguments will be passed to the function.
function* (generator)Function that can pause itself
6. Functions
  1. What it is: A `function*` (generator function) is a special function that can pause and resume its own execution, returning several values over time.
  2. What it's for: It produces sequences of values on demand (lazily), returned one at a time with `yield`.
  3. When to use it: When you have to generate potentially infinite sequences or iterate values in a controlled way.
yieldReturns a value from a generator
6. Functions
  1. What it is: The `yield` keyword is used inside a generator function to return a value and pause execution until the next call.
  2. What it's for: It produces a generator's values one at a time, keeping the state between calls.
  3. When to use it: Inside a `function*`, each time you want to emit a value of the sequence.
bind()Fixes the value of this in a function
6. Functions
  1. What it is: The `bind()` method creates a new function with the value of `this` (and any arguments) permanently fixed.
  2. What it's for: It guarantees a function always uses a certain context, typically in callbacks and event handlers.
  3. When to use it: When you pass a method as a callback and want `this` to remain that of the original object.
call()Calls a function with a chosen this
6. Functions
  1. What it is: The `call()` method invokes a function immediately, specifying the value of `this` and passing the arguments separated by commas.
  2. What it's for: It runs a function with a context chosen at call time.
  3. When to use it: When you want to reuse a function on a different object — `greet.call(person, "hello")`, for instance.
apply()Like call(), but with the arguments in an array
6. Functions
  1. What it is: The `apply()` method is like `call()`, but it receives the arguments as an array.
  2. What it's for: It invokes a function with a chosen `this`, passing arguments already gathered into an array.
  3. When to use it: When the arguments are already in an array; these days the spread operator (`...`) is often preferred.
thisA reference to the current execution context.
7. Objects
  1. What it is: In JavaScript, `this` is a keyword referring to the object the current function is running on, and its value depends on how the function was called.
  2. What it's for: It reaches the current object's properties and methods from inside a function or a method.
  3. When to use it: When working with object methods, or when you want a function to be bound dynamically to its calling context.
Object.create()Creates a new object with a specified prototype.
7. Objects
  1. What it is: The `Object.create()` method creates a new object, using an existing object as the new object's prototype.
  2. What it's for: It creates objects that inherit properties and methods from another object.
  3. When to use it: When you want to set the prototype chain by hand, or create objects with custom inheritance.
Object.assign()Copies enumerable properties from one or more objects into a target object.
7. Objects
  1. What it is: The `Object.assign()` method copies all the enumerable properties of one or more source objects into a target object, and returns that target.
  2. What it's for: It merges several objects into one, or makes shallow clones of objects.
  3. When to use it: When you want to combine data from several objects, or copy existing objects without modifying them directly.
Object.keys()Returns an array of an object's enumerable keys.
7. Objects
  1. What it is: The `Object.keys()` method returns an array holding the names (as strings) of an object's enumerable properties.
  2. What it's for: It quickly gets all of an object's keys so you can iterate over or analyse them.
  3. When to use it: When you need to know, or walk through, all of an object's keys.
Object.values()Returns an array of the values of an object's enumerable properties.
7. Objects
  1. What it is: The `Object.values()` method returns an array holding the values of an object's enumerable properties.
  2. What it's for: It gets all of an object's values into an array, which is useful for iteration and transformation.
  3. When to use it: When you want to work with an object's values directly, without the keys.
Object.entries()Returns an array of an object's key-value pairs.
7. Objects
  1. What it is: The `Object.entries()` method returns an array holding `[key, value]` pairs for each of an object's enumerable properties.
  2. What it's for: It turns an object into an array of key-value pairs, useful for iteration and for converting to other data structures.
  3. When to use it: When you want to iterate over keys and values together, simply.
Object.freeze()Makes an object immutable.
7. Objects
  1. What it is: The `Object.freeze()` method prevents any change to an object: you cannot add, remove or change properties.
  2. What it's for: It protects objects that must not be altered, guaranteeing their state stays constant.
  3. When to use it: When you want to ensure an object is immutable after it is created.
Object.seal()Blocks the addition or removal of an object's properties.
7. Objects
  1. What it is: The `Object.seal()` method prevents properties being added to or removed from an object, but allows existing properties' values to be changed.
  2. What it's for: It protects an object's structure without blocking updates to its data.
  3. When to use it: When the object's shape must stay fixed but the values may vary.
Object.hasOwn()Checks whether an object has a property as its own.
7. Objects
  1. What it is: The `Object.hasOwn()` method checks whether an object has a given property as its own, rather than inherited from the prototype.
  2. What it's for: It distinguishes an object's direct properties from those inherited through the prototype chain.
  3. When to use it: When you iterate over an object's properties and want to filter for only those defined directly on it.
DestructuringSyntax for extracting values from arrays, or properties from objects, into separate variables.
7. Objects
  1. What it is: `Destructuring` is a syntax that lets you extract values from arrays, or properties from objects, and assign them to variables concisely.
  2. What it's for: It simplifies assigning variables when working with complex arrays or objects.
  3. When to use it: When you want to pull one or more values out of an object or array without reaching for each one by hand.
Shorthand property namesShorthand syntax for creating object properties.
7. Objects
  1. What it is: `Shorthand property names` are a syntax that lets you create object properties using the variable's name directly, when it matches the property name.
  2. What it's for: It writes objects more concisely and avoids pointless repetition.
  3. When to use it: When the property name and the name of the variable being assigned are the same.
Computed property namesSyntax for defining property names computed dynamically
7. Objects
  1. What it is: `Computed property names` let you define an object's property names dynamically, using an expression in square brackets.
  2. What it's for: It creates properties whose names depend on variables or calculations made as the object is created.
  3. When to use it: When the property name is not known in advance and has to be worked out at runtime.
classSyntax for defining a class
7. Objects
  1. What it is: The `class` keyword introduces the syntax for defining a class: a template from which to create objects with properties and methods.
  2. What it's for: It organises object-oriented code readably; it is syntactic sugar over JavaScript's prototype system.
  3. When to use it: When you need to create several objects of the same kind with shared behaviour.
constructorA class's initialisation method
7. Objects
  1. What it is: The `constructor` is a special method of a class, called automatically when a new instance is created with `new`.
  2. What it's for: It initialises the newly created object's properties.
  3. When to use it: Inside a `class`, to set the initial state from the arguments received.
extendsInherits from another class
7. Objects
  1. What it is: The `extends` keyword creates a child class that inherits properties and methods from a parent class.
  2. What it's for: It reuses and extends an existing class's behaviour (inheritance).
  3. When to use it: When one class is a specialisation of another — `class Dog extends Animal`, for instance.
superCalls the parent class
7. Objects
  1. What it is: The `super` keyword lets a child class call the parent class's constructor or methods.
  2. What it's for: It initialises the inherited part (`super(...)` in the constructor) or extends a parent method.
  3. When to use it: Inside a class that uses `extends`, typically as the constructor's first statement.
newCreates an instance from a class
7. Objects
  1. What it is: The `new` operator creates a new instance from a class or a constructor function.
  2. What it's for: It builds objects, running the constructor and wiring up the correct prototype.
  3. When to use it: When you want to create an object from a class — `new Person("Ada")`, for instance.
staticA member of the class, not of the instances
7. Objects
  1. What it is: The `static` keyword defines methods or properties belonging to the class itself rather than to individual instances.
  2. What it's for: It creates utility functions tied to the class's concept, callable without creating an object.
  3. When to use it: For helper methods such as factories — `Person.fromJSON(data)`, for example.
get e setComputed properties (getters and setters)
7. Objects
  1. What it is: The `get` and `set` keywords define getters and setters: methods you use with the syntax of an ordinary property.
  2. What it's for: They read or change a value while running code behind the scenes, such as validation or calculation.
  3. When to use it: When you want to expose a "smart" property without changing how it is read or written.
JSON.stringify()Converts an object into a JSON string
7. Objects
  1. What it is: The `JSON.stringify()` method converts a JavaScript value (an object, an array…) into a JSON-format string.
  2. What it's for: It serialises data for storing or sending — in a network request or in `localStorage`, for instance.
  3. When to use it: When you need to turn an object into text, such as before sending it to a server.
JSON.parse()Converts a JSON string into an object
7. Objects
  1. What it is: The `JSON.parse()` method converts a JSON-format string into the corresponding JavaScript value.
  2. What it's for: It reads data received as text (from a server or from storage) and turns it into usable objects.
  3. When to use it: When you receive a JSON response and need to reach its fields as an object.
push()Adds one or more items to the end of an array.
8. Arrays
  1. What it is: The `push()` method adds one or more items to the end of an array and returns the new length.
  2. What it's for: It extends an array by adding items to its end.
  3. When to use it: When you want to add data to the end of an array simply.
pop()Removes the last item of an array.
8. Arrays
  1. What it is: The `pop()` method removes the last item from an array and returns it.
  2. What it's for: It quickly takes the last item off an array.
  3. When to use it: When you want to remove the final item from an ordered list.
shift()Removes the first item of an array.
8. Arrays
  1. What it is: The `shift()` method removes the first item from an array and returns it.
  2. What it's for: It quickly takes the first item off an array.
  3. When to use it: When you want to work on a list as though it were a queue (FIFO).
unshift()Adds one or more items to the start of an array.
8. Arrays
  1. What it is: The `unshift()` method adds one or more items to the start of an array and returns the new length.
  2. What it's for: It inserts items at the head of an array.
  3. When to use it: When you work on a list where the insertion order matters and you want to add at the front.
slice()Returns a partial copy of an array.
8. Arrays
  1. What it is: The `slice()` method returns a shallow copy of a portion of an array as a new array, without modifying the original.
  2. What it's for: It extracts part of an array according to the indexes you give.
  3. When to use it: When you need a section of an array without altering the original.
splice()Adds or removes items, modifying the original array.
8. Arrays
  1. What it is: `splice()` lets you remove, replace or insert items in an array, **modifying the original array**.
  2. What it's for: It performs "surgical" editing on an array: cut, replace, insert.
  3. When to use it: When you want to change the array in place (without creating a new one).
map()Creates a new array by transforming each item.
8. Arrays
  1. What it is: `map()` applies a function to **every item** of the array and returns **a new array** holding the results.
  2. What it's for: It transforms data (e.g.
  3. When to use it: When you want the same length, but with the items transformed.
filter()Creates a new array holding the items that pass a test.
8. Arrays
  1. What it is: `filter()` returns a new array holding **only** the items for which the callback returns `true`.
  2. What it's for: Selecting a subset of items (e.g.
  3. When to use it: When you need to **filter** without transforming and without touching the original.
reduce()Reduces the array to a single value by accumulating results.
8. Arrays
  1. What it is: `reduce()` applies an "accumulator" function to the array's items to produce **a single result** (a number, a string, an object and so on).
  2. What it's for: Sums, averages, groupings, counts, complex transformations in a single pass.
  3. When to use it: When you need to "condense" the array into one final value.
forEach()Runs a function on every item of the array.
8. Arrays
  1. What it is: `forEach()` runs a callback function on each item of an array, in order, without returning a new array.
  2. What it's for: Performing operations or side effects on all of an array's items.
  3. When to use it: When you want to iterate an array to do something, but do not need to transform or filter it.
find()Returns the first item satisfying a condition.
8. Arrays
  1. What it is: `find()` returns the first item of the array satisfying the condition in the callback, or `undefined` if there is none.
  2. What it's for: Searching for a single item according to a criterion.
  3. When to use it: When you only want the first match, not all of them.
findIndex()Returns the index of the first item satisfying a condition.
8. Arrays
  1. What it is: `findIndex()` returns the index of the first item satisfying the condition, or `-1` if no item qualifies.
  2. What it's for: Finding out where an item sits in the array.
  3. When to use it: When you need the index, not the value.
some()Checks whether at least one item satisfies a condition.
8. Arrays
  1. What it is: `some()` returns `true` if at least one item of the array satisfies the condition in the callback, otherwise `false`.
  2. What it's for: Checking whether at least one item meets a criterion.
  3. When to use it: When the presence of a single match is enough.
every()Checks whether every item satisfies a condition.
8. Arrays
  1. What it is: `every()` returns `true` if all the array's items satisfy the condition in the callback, otherwise `false`.
  2. What it's for: Checking that an array meets a requirement completely.
  3. When to use it: When you need an overall condition — "all of them must be…".
includes()Checks whether an array contains a given item.
8. Arrays
  1. What it is: `includes()` returns `true` if the array contains a specific item, otherwise `false`.
  2. What it's for: Checking a value is present in an array simply and readably.
  3. When to use it: When you want to check quickly whether an item is there.
sort()Sorts an array's items
8. Arrays
  1. What it is: The `sort()` method orders an array's items and returns the same array, sorted, modifying it in place.
  2. What it's for: It puts data in order; for numbers you must pass a comparison function, otherwise it sorts them as strings.
  3. When to use it: For instance `numbers.sort((a, b) => a - b)`, to sort numbers in ascending order.
reverse()Reverses an array's order
8. Arrays
  1. What it is: The `reverse()` method reverses the order of an array's items, modifying it in place.
  2. What it's for: It flips a sequence — to show the most recent items first, for instance.
  3. When to use it: When you need to reverse a list's order, often together with `sort()`.
join()Joins the items into a string
8. Arrays
  1. What it is: The `join()` method joins all of an array's items into a single string, separated by a character of your choice.
  2. What it's for: It turns a list into text, for displaying or storing it.
  3. When to use it: For instance `["a", "b", "c"].join(", ")` produces `"a, b, c"`; it is the inverse of `split()`.
concat()Joins two or more arrays
8. Arrays
  1. What it is: The `concat()` method returns a new array formed by joining the original array with other arrays or values.
  2. What it's for: It combines several arrays without modifying the originals.
  3. When to use it: When you want to merge lists; alternatively you can use the spread operator, as in `[...a, ...b]`.
flat()Flattens nested arrays
8. Arrays
  1. What it is: The `flat()` method creates a new array in which nested arrays are "flattened" to a given depth.
  2. What it's for: It turns arrays of arrays into a single, one-level array.
  3. When to use it: When you have nested data to flatten — `[[1, 2], [3]].flat()` produces `[1, 2, 3]`, for instance.
indexOf()Finds an item's position
8. Arrays
  1. What it is: The `indexOf()` method returns the index of a value's first occurrence in an array, or `-1` if it is not there.
  2. What it's for: It tells you whether, and where, an item is present in an array.
  3. When to use it: When you need an item's position; if you only want to know whether it exists, `includes()` reads better.
Array.from()Creates an array from an iterable
8. Arrays
  1. What it is: The `Array.from()` method creates a new array from an iterable or from an array-like object (such as a NodeList).
  2. What it's for: It converts things that are not arrays into real ones, so you can use methods such as `map()`.
  3. When to use it: To turn the result of `querySelectorAll()` into an array, for instance.
Array.isArray()Checks whether a value is an array
8. Arrays
  1. What it is: The `Array.isArray()` method returns `true` if the value passed is an array, otherwise `false`.
  2. What it's for: It checks the type reliably, since `typeof` returns `"object"` for arrays too.
  3. When to use it: When you need to tell an array from another object before processing it.
try...catchHandles errors while the code runs.
9. Errors
  1. What it is: The `try...catch` structure lets you run a block of code (`try`) and catch any errors it raises (`catch`) without stopping the program.
  2. What it's for: It safely handles expected and unexpected errors while the code runs.
  3. When to use it: When some code might throw exceptions (e.g.
throwThrows an exception in JavaScript.
9. Errors
  1. What it is: The `throw` statement lets you raise an exception by hand, stopping the current execution and passing control to the nearest `catch` block.
  2. What it's for: It signals an error or an abnormal condition within the code.
  3. When to use it: When a function or an operation meets invalid input or state.
finallyAlways runs a block of code after try/catch.
9. Errors
  1. What it is: The `finally` block runs after `try` and `catch`, whether or not an error occurred.
  2. What it's for: Running cleanup or closing code (e.g.
  3. When to use it: When you must guarantee an operation always happens, errors included.
ErrorThe base object for representing errors in JavaScript.
9. Errors
  1. What it is: `Error` is the base constructor for creating error objects in JavaScript, with properties such as `message` and `name`.
  2. What it's for: Representing errors in a standard way and supplying information useful for debugging.
  3. When to use it: When you throw custom errors with `throw`.
setTimeout()Runs a function after a given interval.
10. Asynchrony
  1. What it is: `setTimeout()` runs a function or a block of code after a delay given in milliseconds.
  2. What it's for: Scheduling code to run later — delaying an animation or a message, for instance.
  3. When to use it: When you want to postpone an action without blocking the rest of the program.
setInterval()Runs a function repeatedly at regular intervals.
10. Asynchrony
  1. What it is: `setInterval()` runs a function or a block of code at regular intervals, given in milliseconds.
  2. What it's for: Tasks that repeat, such as updating a clock or making periodic checks.
  3. When to use it: When you want to repeat an action several times at fixed intervals.
PromiseObject representing the future result of an asynchronous operation.
10. Asynchrony
  1. What it is: A `Promise` is an object representing a value that may be available now, in the future, or never, as the result of an asynchronous operation.
  2. What it's for: Handling asynchronous code more tidily than nested callbacks allow.
  3. When to use it: When you work with operations that take time (APIs, files, timers) and want to handle successes and failures clearly.
asyncDeclares a function that always returns a Promise.
10. Asynchrony
  1. What it is: `async` is a keyword that, placed before a function, makes it asynchronous and ensures it always returns a `Promise`.
  2. What it's for: Writing asynchronous code more readably, without having to use `then()` by hand.
  3. When to use it: When you want to use `await` inside a function, or when a function must return a `Promise`.
awaitWaits for a Promise to settle inside an async function.
10. Asynchrony
  1. What it is: `await` is a keyword that suspends an `async` function's execution until a `Promise` is resolved or rejected.
  2. What it's for: Writing asynchronous code in a synchronous style, improving readability and maintenance.
  3. When to use it: Inside `async` functions, when you need to wait for a `Promise`'s result.
fetch()Makes HTTP requests and returns a Promise.
10. Asynchrony
  1. What it is: `fetch()` is a native function for making HTTP requests; it returns a `Promise` that resolves with a `Response` object.
  2. What it's for: Retrieving data from servers or web APIs.
  3. When to use it: When you need to read or send data over the network in JavaScript.
Promise.all()Waits for several promises in parallel
10. Asynchrony
  1. What it is: The `Promise.all()` method takes a list of promises and returns a promise that resolves once they have all completed.
  2. What it's for: It runs several asynchronous operations in parallel and waits for them all to finish.
  3. When to use it: When you need to fire off several requests together; if one fails, the whole `Promise.all()` is rejected.
Promise.race()Settles with the first promise that is ready
10. Asynchrony
  1. What it is: The `Promise.race()` method returns a promise that resolves or rejects as soon as the first promise in the list does.
  2. What it's for: It reacts to the fastest result among several operations.
  3. When to use it: To add a timeout to a request, for instance, by racing it against a timer.
Promise.allSettled()Waits for all of them, without failing as a block
10. Asynchrony
  1. What it is: The `Promise.allSettled()` method waits for every promise to finish and returns the outcome of each (fulfilled or rejected).
  2. What it's for: It gathers all the results even when some operations fail, without interrupting the others.
  3. When to use it: When you want to handle several independent operations and know individually which ones succeeded.
addEventListener()Attaches a listener for a specific event to an element.
11. Events
  1. What it is: `addEventListener()` is a DOM element method that lets you listen for specific events and run a function when they occur.
  2. What it's for: Attaching code to events such as `click`, `keydown`, `submit` and many others.
  3. When to use it: When you want to react to a user action or to an event raised by the browser.
removeEventListener()Removes a listener attached earlier.
11. Events
  1. What it is: `removeEventListener()` is a method that removes an event handler attached earlier with `addEventListener()`.
  2. What it's for: Stopping a function running once it is no longer needed.
  3. When to use it: When a listener is temporary, or could cause trouble if left active.
clickActivation event, through a pointer or the keyboard.
11. Events
  1. What it is: `click` is an event fired when an element is "clicked": pressing and releasing the primary mouse button, a tap on touch devices, or activation via...
  2. What it's for: Reacting to the most common user interactions (opening modals, submitting actions, changing UI state).
  3. When to use it: When you want to perform an action in response to a generic user "activation".
keydownEvent fired when a key is pressed (before it is released).
11. Events
  1. What it is: `keydown` fires when a key is pressed (before it is released).
  2. What it's for: Keyboard shortcuts, navigation, closing with `Esc` and so on.
  3. When to use it: When you want to react the instant a key is pressed.
submitEvent fired when a form is submitted.
11. Events
  1. What it is: `submit` fires when a `form` is submitted (the submit button, or `Enter` in an input).
  2. What it's for: Validating, preventing the redirect and sending data through fetch/AJAX.
  3. When to use it: When you handle forms client-side or in an SPA.
Event objectThe object passed to listeners, carrying information about, and control over, the event.
11. Events
  1. What it is: The `Event object` (often `event` or `e`) is the parameter the browser passes to listeners, holding the event's data and methods.
  2. What it's for: Understanding what happened (`type`, `target`, the key pressed, coordinates and so on) and controlling the flow (`preventDefault()`, `stopPropagation()`).
  3. When to use it: Practically always, as soon as you need to read details or change the default behaviour.
Event bubblingThe event propagating from the child node up through its ancestors.
11. Events
  1. What it is: `Bubbling` is the phase in which an event, having reached its target, travels back up the DOM hierarchy to the `document`.
  2. What it's for: It lets you intercept events at a higher level (useful for analytics, delegation and global behaviour).
  3. When to use it: When you want to react to children's events without adding a listener to every single node.
Event delegationHandling many child events with a single listener on the parent.
11. Events
  1. What it is: `Delegation` means attaching a single listener to an ancestor and identifying the real targets inside the callback.
  2. What it's for: Handling dynamic lists, large numbers of elements, or content generated after load.
  3. When to use it: When the number of nodes is large or changes over time.
preventDefault()Blocks an event's default action
11. Events
  1. What it is: The event object's `preventDefault()` method stops the browser's default behaviour for that event.
  2. What it's for: It prevents automatic actions, such as submitting a form or following a link.
  3. When to use it: In a form's `submit` handler, for instance, to validate it with JavaScript before it is sent.
stopPropagation()Stops an event propagating
11. Events
  1. What it is: The event object's `stopPropagation()` method stops the event travelling further up to ancestor elements (bubbling).
  2. What it's for: It stops an event on one element also triggering the handlers of its containers.
  3. When to use it: When an inner click must not also trigger, say, the closing of a panel handled on the container.
inputEvent fired when a field changes
11. Events
  1. What it is: The `input` event fires every time a text field's (or similar) value changes, as the user types.
  2. What it's for: It reacts in real time to what the user is writing.
  3. When to use it: For instant search, character counters, or live validation while typing.
changeEvent fired once a change is committed
11. Events
  1. What it is: The `change` event fires when a field's value changes and is considered "committed" (when the field loses focus, or an option is chosen).
  2. What it's for: It reacts to the final value of an input, a select or a checkbox.
  3. When to use it: For selects and checkboxes, or when you care about the final value rather than every keystroke.
getElementById()Selects an element by its unique id.
12. DOM
  1. What it is: `getElementById()` is a `document` method returning the element whose `id` attribute matches.
  2. What it's for: Quickly getting a single, known, unique node in the DOM.
  3. When to use it: When you know the `id` and want the fastest, clearest way to retrieve that element.
querySelector()Selects the first element matching a CSS selector.
12. DOM
  1. What it is: `querySelector()` returns the first element in the DOM matching the CSS selector you supply.
  2. What it's for: Selecting elements flexibly, using any valid CSS selector.
  3. When to use it: When the first match is enough, or you want consistent CSS syntax.
querySelectorAll()Selects every element matching a CSS selector (a NodeList).
12. DOM
  1. What it is: `querySelectorAll()` returns a static `NodeList` of every element matching the selector.
  2. What it's for: Getting collections of nodes to iterate over (mapping, toggling classes and so on).
  3. When to use it: When you need to act on several elements at once.
innerHTMLReads or sets an element's inner HTML markup.
12. DOM
  1. What it is: `innerHTML` is a property that returns or sets a node's inner HTML as a string.
  2. What it's for: Quickly updating parts of the UI by generating markup from strings.
  3. When to use it: When you need to insert complete blocks of HTML and you control where the data comes from.
textContentReads or sets an element's text (not HTML).
12. DOM
  1. What it is: `textContent` is a property handling a node's plain text content.
  2. What it's for: Setting or getting text safely, without interpreting HTML.
  3. When to use it: When you need to display user data or unformatted dynamic text.
createElement()Creates a new element node.
12. DOM
  1. What it is: `createElement()` creates a new DOM element of the type specified.
  2. What it's for: Building interfaces dynamically without going through HTML strings.
  3. When to use it: When you want fine control and safety in generating nodes.
appendChild()Inserts a node as another node's last child.
12. DOM
  1. What it is: `appendChild()` adds an existing or new node to the end of a parent node's children.
  2. What it's for: Building or updating the DOM structure explicitly.
  3. When to use it: When you need to insert a single node at the end of the children.
removeChild()Removes a child node from a parent node.
12. DOM
  1. What it is: `removeChild()` deletes a specific child node from its parent.
  2. What it's for: Removing elements from the page and freeing the resources tied to them.
  3. When to use it: When you have the reference to the child you want to take out.
setAttribute()Sets or updates an attribute on an element.
12. DOM
  1. What it is: `setAttribute()` sets or changes the value of an HTML attribute on an element.
  2. What it's for: Handling generic attributes such as `src`, `href`, `aria-*`, `data-*` and so on.
  3. When to use it: When the attribute has no direct DOM property, or you want explicit consistency.
classListAPI for managing an element's CSS classes.
12. DOM
  1. What it is: `classList` is an element API providing methods for adding, removing, toggling and checking CSS classes.
  2. What it's for: Manipulating classes simply, without handling strings by hand.
  3. When to use it: Almost always, when you change classes dynamically.
getAttribute()Reads an HTML attribute
12. DOM
  1. What it is: The `getAttribute()` method returns the value of an element's HTML attribute.
  2. What it's for: It reads standard or custom attributes straight from the markup.
  3. When to use it: When you need an attribute's value — `element.getAttribute("href")`, for instance.
removeAttribute()Removes an HTML attribute
12. DOM
  1. What it is: The `removeAttribute()` method deletes an attribute from an HTML element.
  2. What it's for: It removes attributes — `disabled`, for instance, to re-enable a button.
  3. When to use it: When you need to remove a state or a setting expressed by an attribute.
datasetAccess to data-* attributes
12. DOM
  1. What it is: An element's `dataset` property gives read and write access to its custom `data-*` attributes.
  2. What it's for: It reads and sets custom data stored in the HTML, without resorting to non-standard attributes.
  3. When to use it: A `data-id` attribute, for instance, is read with `element.dataset.id`.
closest()Finds the nearest ancestor
12. DOM
  1. What it is: The `closest()` method walks up the DOM tree and returns the nearest ancestor (the element itself included) matching a CSS selector.
  2. What it's for: It finds the relevant container starting from an element — very useful in event delegation.
  3. When to use it: For instance, going from the clicked button up to the card containing it with `e.target.closest(".card")`.
remove()Removes an element from the DOM
12. DOM
  1. What it is: The `remove()` method deletes an element from the document.
  2. What it's for: It takes an element off the page directly, without going through the parent node.
  3. When to use it: When you need to delete an element — closing a message with `message.remove()`, for example.
importBrings in functions, variables or classes from other modules.
13. Modules
  1. What it is: `import` is the ES Modules syntax for using code exported from another file (a module).
  2. What it's for: Splitting code into reusable files while keeping the dependencies clear.
  3. When to use it: When you want to organise a project by feature, avoid global variables and enable tree-shaking.
exportMakes a module's items available to other files.
13. Modules
  1. What it is: `export` exposes functions, constants, classes or values from the current module.
  2. What it's for: Sharing APIs between files while keeping natural encapsulation.
  3. When to use it: When you want to reuse code or separate responsibilities across several files.
default exportExports the module's “main value”.
13. Modules
  1. What it is: A `default export` is a module's default export: there is at most one per file.
  2. What it's for: Marking a "main" output (e.g.
  3. When to use it: When the module revolves around a single entity.
named exportExports one or more named symbols.
13. Modules
  1. What it is: `Named exports` expose several named symbols (functions, constants, classes) from the same module.
  2. What it's for: Providing a set of utilities that can be imported selectively.
  3. When to use it: When the module holds several related functions, or a small library.
Strict modeA mode that enables stricter rules in JavaScript.
14. Other concepts
  1. What it is: `Strict mode` is a mode that makes JavaScript stricter, switching on checks and restrictions that help you avoid common mistakes.
  2. What it's for: Preventing implicit, ambiguous behaviour, improving the code's safety and its future compatibility.
  3. When to use it: Always, in modern files and functions; many tools switch it on automatically.
HoistingBehaviour that moves declarations to the top of the scope.
14. Other concepts
  1. What it is: `Hoisting` is the behaviour by which declarations (not assignments) are "moved" to the top of the scope during the compilation phase.
  2. What it's for: Letting you use variables or functions declared further down the code (though `var`, `let` and `const` differ here).
  3. When to use it: It is not something to "use", but something to know, so you understand why certain things work and others throw errors.
Temporal Dead Zone (TDZ)The period between hoisting and initialisation during which the variable cannot be accessed.
14. Other concepts
  1. What it is: The `TDZ` is the interval between the start of a scope and the actual declaration of a `let` or `const` variable, during which reaching it throws an error.
  2. What it's for: Preventing the use of uninitialised variables, making the code safer.
  3. When to use it: It is not a feature to use, but a behaviour to know about, so you avoid ReferenceError.
Garbage collectionAutomatic process that frees memory no longer in use.
14. Other concepts
  1. What it is: `Garbage collection` is the JavaScript engine's mechanism for removing from memory objects that are no longer reachable.
  2. What it's for: Preventing wasted memory and the slowdowns caused by unused variables.
  3. When to use it: Always: it is automatic and needs no explicit code.
Prototype chainThe inheritance mechanism between objects in JavaScript.
14. Other concepts
  1. What it is: The `prototype chain` is the chain of prototypes JavaScript uses to look for properties and methods not present directly on an object.
  2. What it's for: Implementing inheritance and sharing methods between objects.
  3. When to use it: Always: every object in JS (except `Object.create(null)`) has a prototype.
localStoragePersistent storage in the browser
14. Other concepts
  1. What it is: `localStorage` is browser storage that keeps key-value pairs (as strings) with no expiry.
  2. What it's for: It stores client-side data that must remain available even after the browser is closed, such as preferences or a theme.
  3. When to use it: For non-sensitive data to keep between sessions; it stores only strings, so for objects use `JSON.stringify()` and `JSON.parse()`.
sessionStorageTemporary storage for the session
14. Other concepts
  1. What it is: `sessionStorage` is similar to `localStorage`, but the data lasts only for the browser tab's session.
  2. What it's for: It keeps temporary data that should disappear when the tab is closed.
  3. When to use it: For temporary state, such as the steps of a multi-stage form, that is no longer needed once the tab is closed.
consoleLogging and debugging tools
14. Other concepts
  1. What it is: `console` is an object offering methods for writing messages to the developer tools console, such as `console.log()`.
  2. What it's for: It is used above all for debugging, showing values, warnings (`console.warn`) and errors (`console.error`).
  3. When to use it: During development, to inspect how your code behaves; it is good practice to remove superfluous logs in production.