Animations

Step-by-step animations that show what JavaScript does under the hood: how the engine reads the code, where values live in memory, how an expression is calculated, how a loop or a function call runs.

Each animation has several scenarios (tabs at the top). A link below opens one scenario in a new tab.

• Next step: Right arrow or Space. Back: Left arrow. Start: Home. Auto-play: P.
• file.html#3 opens scenario 3, file.html#3.5 opens scenario 3 at step 5.
• Scenarios marked (advanced) go deeper.

English and Bulgarian

Every animation has an English and a Bulgarian version. The EN / BG button at the top of an animation switches the language and keeps the current step.

All animations on one page - in Bulgarian

Session 1 - Getting started

How JavaScript runs your code - from the text in the file to the result: tokens, the syntax tree (AST), bytecode and "hot" code in V8. 1. Translators, 2. Tokens, 3. AST, 4. Two phases, 5. Engine and environment, 6. Bytecode (advanced), 7. Hot code (advanced)

Session 2 - Variables, types and operators

Variables in memory - declaring, assigning and copying values. 1. Declaring and assigning, 2. Copying a value, 3. x = x ** 2, 4. Types of values, 5. const, 6. Objects and references (advanced)

Numbers in memory - bits, why 0.1 + 0.2 is not 0.3, big integers, NaN and Infinity. 1. Bits and integers, 2. Fractions and 0.1, 3. 64 bits (advanced), 4. 0.1 + 0.2, 5. Big integers (advanced), 6. NaN and Infinity, 7. Lab

How an expression is evaluated - precedence, associativity, i++ and ++i, as a tree. 1. Precedence, 2. Associativity, 3. Assignment is an expression, 4. i++ and ++i, 5. Evaluation order (advanced), 6. Statement vs expression (advanced)

Types, comparisons and logic - scenarios 1 and 2 (session 3 uses the rest). 1. The + operator, 2. String to number

Variable scope - scenario 4 only (session 5 uses the rest). 4. No declaration and "use strict"

Session 3 - Comparisons, logic, conditions and loops

Types, comparisons and logic - how JavaScript converts types when it compares, and how && / || work. 3. == and ===, 4. Comparing strings, 5. Truthy and falsy, 6. Short-circuit: && and ||, 7. Ternary operator (advanced)

Loops step by step - a flowchart with a moving token for if, for, while, do...while, break, continue and switch. 1. if / else if, 2. The for loop, 3. while and the endless loop, 4. do...while, 5. break and continue, 6. Nested loops (advanced), 7. switch without break (advanced)

Also: Numbers in memory - 4. 0.1 + 0.2 and 6. NaN and Infinity; How an expression is evaluated - 6. Statement vs expression.

Session 4 - Arrays and lists of records

Arrays in memory - indexes, length, adding and removing elements, references, arrays of arrays. 1. Indexes, 2. Out of range, 3. An array is an object, 4. push / pop / unshift / shift, 5. References, 6. Two-dimensional (advanced), 7. Shared row (advanced)

Algorithms with arrays - walking through an array, sum, maximum, filtering, searching, with the common bugs. 1. Traversal with for, 2. Reverse order, 3. Sum of the elements, 4. Largest element, 5. Filtering into new arrays, 6. Search with break (advanced), 7. Two-dimensional array (advanced)

Array methods - copying and cutting arrays, searching, splitting strings, values packed into one string, and a list of records. 1. slice and at, 2. splice, 3. indexOf and includes, 4. split and join, 5. Packed values, 6. A list of records, 7. splice in a loop (advanced)

Session 5 - Functions, and reading older code

The call stack - what happens when a function is called and when it returns. 1. Calling a function, 2. Arguments, 3. return, 4. Nested calls, 5. Default values, 6. Recursion (advanced), 7. Stack overflow (advanced)

Variable scope - where a name is looked up: local, outer, global; let vs var in a block. 1. Global and local, 2. The scope chain, 3. Shadowing, 4. No declaration, 5. Block scope: let and var, 6. IIFE (advanced), 7. Lexical scope (advanced)

Hoisting: the two phases of execution - why a var is undefined before its line, and what the TDZ of let / const is. 1. var and undefined, 2. Function declaration, 3. Function expression, 4. let / const and the TDZ, 5. Hoisting in a function, 6. let in a block (advanced), 7. TDZ: time, not place (advanced)

Functions are values - a function side by side with a number and an array; functions in variables, arrays and objects; callbacks; arrow functions; closures. 1. Like 5 and [1, 2, 3], 2. A function is a value, 3. In arrays and objects, 4. Callbacks, 5. A function returns a function, 6. Arrow functions, 7. Closure (advanced)

Functions and data - what a function gets: a copy of a number or a string, a reference to an array or an object; pure functions, callbacks, helpers inside rule. 1. A copy of the value, 2. The same array, 3. Change or replace, 4. Changing the report, 5. A callback, call by call, 6. A helper inside rule, 7. A shallow copy (advanced)

Session 6 - Objects

Objects in memory - dot and brackets, deep paths, ?. and ??, dictionaries, a path helper, copies, this in a method. 1. Dot or brackets, 2. A deep path, 3. Safe access: ?. and ??, 4. A dictionary, 5. A path helper: get, 6. Copies, 7. this in a method (advanced)

Also: Variables in memory - 6. Objects and references and Arrays in memory - 5. References: two variables can point to the same object.