JavaScript roadmap

Variables are like labelled boxes where you can store bits of information in your code. You use let when the value might change later, and const when it should stay the same. JavaScript handles different types of data, such as text called strings, numbers, true or false booleans, and more complex collections known as objects.

Imagine you are building a shopping app. You might use a const for the shop name because it never changes, but a let for the item count in the basket since that goes up and down as you add things.

Mastering variables is essential because every single program relies on storing and updating information as users interact with it.

• Use const by default and let when values change.
• Strings hold text wrapped in quotes.
• Booleans represent true or false states.

Operators and conditions let your program make decisions based on different situations. Comparison operators check if values match or if one is larger, while logical operators combine multiple checks. If and switch statements allow your code to take different paths depending on whether those checks turn out true or false.

Think of a ticket barrier at a train station. It checks if your ticket is valid and if you have enough balance. If both conditions are met, the gate opens; otherwise, it stays shut and shows an error.

Knowing how to control the flow of your program lets you build smart features that react properly to user input.

• Use triple equals for strict equality checks.
• Combine checks using logical AND and OR operators.
• If statements run code when a condition is met.

Loops allow you to repeat a block of code multiple times without writing it out over and over again. A for loop is great when you know how many times to repeat, while a while loop runs until a specific condition changes. The for of loop makes it very easy to look at every item inside a list.

Picture a teacher handing out exercise books to a class of thirty pupils. Instead of giving a separate instruction for each child, the teacher simply repeats the action for every single person on the register.

Loops save you huge amounts of time and effort when you need to process lists of data or repeat tasks efficiently.

• For loops use a counter for exact repetition.
• While loops run as long as a condition holds true.
• For of loops cleanly inspect items in a collection.

Functions are reusable recipes of code that take in some input, perform a task, and give you back a result. You can write them using standard declarations or modern arrow syntax, passing in data through parameters and sending answers back using return values.

Think of a coffee machine. You put in water and coffee beans as parameters, the internal mechanism processes them, and it returns a fresh cup of coffee for you to enjoy.

Functions keep your code organised and stop you from repeating the same instructions across different parts of your application.

• Functions group reusable blocks of logic together.
• Parameters let you pass custom data inside.
• Arrow functions offer a short, modern syntax.

Arrays are ordered lists that hold multiple items in a single variable. Special built-in methods like map, filter, and reduce let you transform, search through, and combine those items efficiently without writing messy loops.

Imagine a playlist on your music app. It holds a list of songs in order, and you might use a filter method to show only the tracks released in a specific year.

Arrays are the primary way you will manage collections of data, such as products in an online store or messages in a chat app.

• Map creates a new array by transforming every item.
• Filter removes items that do not match a rule.
• Reduce combines array values down into a single result.

Objects let you group related details together using key-value pairs, much like a profile card. You can add methods to give them behaviours, and use modern tricks like destructuring to pull out properties quickly.

Consider a user profile on a social network. The object holds properties like username, email, and age, alongside functions to update their display details.

Objects model real-world entities accurately, making them fundamental for structuring complex data in any JavaScript project.

• Objects store data using named keys and values.
• Destructuring unpacks object properties into variables.
• The spread operator helps combine or copy objects.

JSON stands for JavaScript Object Notation, which is a standard text format used to send data back and forth. Because web servers cannot understand live JavaScript objects, you convert them to text using stringify and turn incoming text back into usable objects using parse.

Think of sending a letter abroad. You pack up your thoughts into a standard written envelope format that any postal service can deliver and read.

JSON is the universal language for communicating with web APIs and saving user preferences in local storage.

• JSON is plain text structured like JavaScript objects.
• JSON.stringify converts objects into text strings.
• JSON.parse converts text strings back into objects.

Scope determines where variables can be seen and used within your code. Closures happen when an inner function remembers and keeps access to the variables of its outer function, even after the outer function has finished running.

Imagine a secure office building. A receptionist can see the main lobby, but staff inside private rooms have access to files that outsiders cannot reach.

Understanding scope prevents naming conflicts, while closures allow you to create private data and powerful factory functions.

• Variables are restricted to the block or function they live in.
• Inner functions can access outer variables.
• Closures remember surrounding scope even after execution finishes.

The keyword this refers to the object that is currently executing the current function. Classes provide a clean template-based way to create multiple objects with shared methods and properties using constructor functions.

Think of a car blueprint. The blueprint defines how wheels and engines work, and you can build many distinct cars from that single design.

Classes and proper understanding of this help you write structured, object-oriented code for larger applications.

• This refers to the current execution context.
• Classes provide cleaner syntax for object blueprints.
• Constructors set up initial properties when instantiating classes.

Modules let you split your code across multiple separate files rather than keeping everything in one giant script. You use export to share variables or functions from one file, and import to bring them into another.

Imagine a large cookbook. Instead of putting every recipe on a single endless scroll, you divide them into chapters for baking, starters, and desserts.

Modules keep your codebase clean, maintainable, and easy for teams to work on simultaneously.

• Export makes functions or variables available to other files.
• Import brings shared code into your current file.
• Modules help organise large projects into smaller parts.

Errors happen when something unexpected goes wrong in your code. By wrapping risky code in try and catch blocks, your program can handle failures gracefully instead of crashing completely.

Think of a payment machine in a shop. If the card reader loses signal, it displays a polite retry message rather than shutting down entirely.

Handling errors properly ensures your users get helpful feedback instead of staring at a broken screen.

• Try blocks run code that might throw an error.
• Catch blocks handle the error safely if things fail.
• Reading error stacks helps you locate broken code fast.

The event loop is the mechanism that allows JavaScript to handle long-running tasks in the background without freezing the user interface. While JavaScript is single-threaded, it offloads waiting tasks and handles them once they finish.

Imagine a busy restaurant waiter taking orders. Instead of standing idle at the kitchen waiting for one meal, the waiter takes other orders while the food cooks.

Knowing how the event loop works helps you understand why certain code runs before other code in your apps.

• JavaScript runs on a single thread.
• The event loop manages background tasks and callbacks.
• It keeps the user interface responsive during delays.

A Promise represents an operation that has not finished yet but will complete in the future, either succeeding or failing. Async and await keywords let you write this asynchronous code so it reads sequentially, just like normal synchronous code.

Think of ordering food online and receiving a delivery tracker. You get a promise that food will arrive, and you simply wait for it rather than calling the restaurant constantly.

Promises and async/await make dealing with network requests and timers clean and easy to read.

• Promises have pending, fulfilled, or rejected states.
• Async functions always return a promise.
• Await pauses execution until a promise resolves.

The fetch function allows your JavaScript code to communicate with external web servers and APIs to retrieve or send data. Combined with async and await, it lets you pull live information into your apps easily.

Imagine looking up live weather data on your phone. Your device sends a request to a weather station API, fetches the data, and displays the temperature.

Fetching data is how modern web apps load live content without requiring full page reloads.

• Fetch makes HTTP requests to web servers.
• Response data usually needs converting to JSON format.
• Always wrap fetch calls in try/catch for safety.

The Document Object Model is a live tree representation of your HTML webpage that JavaScript can manipulate. You can select elements, change their text, alter styles, and listen for user clicks.

Think of a stage director moving props and updating signs on a theatre set while the play is actively running.

DOM manipulation transforms static HTML pages into interactive web applications that respond instantly to user actions.

• Select elements using querySelector methods.
• Update page content using textContent or innerHTML.
• Add interactivity using event listeners for clicks.