JavaScript Roadmap Other roadmaps

This roadmap covers and takes you through the essential concepts in JavaScript, from basic syntax to more advanced concepts like functional and asynchronous programming. By the end of this roadmap, you will have a better understanding of how JavaScript works and how you can apply it to real-world problems.

If you would like to explore more JavaScript tutorials without a direction, you can filter for the tutorials you are interested in on our JavaScript category page.

What is covered?

• JavaScript fundamentals
• Functional programming
• Working with arrays and objects
• Understanding this, bind, call and apply
• The event loop
• How to use async operations
• Browser APIs
• Building applications

• 

  JavaScript Data Types

  Learn what are the fundamental data types in JavaScript

  Ferenc Almasi • 2023 April 19 • 1 min read

  There are multiple data types in JavaScript. By data type, we simply mean the type of a value. In this tutorial, you will get to know what data types are available in JavaScript.

  1
• 

  Working with Variables

  The differences between var, let and const

  Ferenc Almasi • 2023 April 19 • 1 min read

  There are three keywords in JavaScript that you can use for variable declarations: var, let, and const. In this tutorial, you will learn how each can be used differently.

  2
• 

  Logical Operators

  Learn logical operators in JavaScirpt under 10 minutes

  Ferenc Almasi • 2024 March 11 • 9 min read

  Learn how to use logical operators in JavaScript to connect and evaluate multiple expressions.

  3
• 

  Function Declarations

  Function expression vs function declaration

  Ferenc Almasi • 2023 April 19 • 1 min read

  In this tutorial, you will learn what the difference is between a function expression and a function declaration in JavaScript, and why it's important to know about them.

  4
• 

  The Power of Function Composition

  A programming paradigm that simplifies your code

  Ferenc Almasi • 2021 November 11 • 11 min read

  Just like object-oriented programming, functional programming has its own concepts too. Learn how you can apply them to JavaScript to make your code simpler.

  5
• 

  The Power of Higher-Order Array Methods

  find, some, map, reduce, every, filter

  Ferenc Almasi • 2021 November 11 • 7 min read

  Learn how to utilize built-in array methods in JavaScript to easily manipulate arrays.

  6
• 

  How to Create Objects in JavaScript

  5 different examples with code

  Ferenc Almasi • 2024 February 12 • 5 min read

  There are numerous ways to create objects in JavaScript. In this tutorial, you will learn five different ways to create objects.

  7
• 

  Dictionaries in JavaScript

  Taking a look at the object data type

  Ferenc Almasi • 2024 February 08 • 7 min read

  Unlike in statically typed languages, there is no Dictionary type in JavaScript. Learn what are the alternative data types to achieve the same.

  8
• 

  The this Keyword in JavaScript

  Demystifying JavaScript's this keyword

  Ferenc Almasi • 2023 April 19 • 7 min read

  In this tutorial, we will demystify the this keyword in JavaScript once and for all through a series of practical examples.

  9
• 

  Bind, Call and Apply in JavaScript

  Function methods demonstrated through examples

  Ferenc Almasi • 2024 February 09 • 5 min read

  Understanding the differences between bind, call, and apply should be an essential toolkit in your pocket. Learn what they mean in JavaScript.

  10
• 

  What is the Event Loop?

  How JavaScript is executed in browsers

  Ferenc Almasi • 2021 November 11 • 7 min read

  To fully understand how JavaScript is executed in browsers, you first need to understand the concept of the event loop.

  11
• 

  JavaScript Promises

  Putting a stop to callback hell

  Ferenc Almasi • 2024 March 05 • 10 min read

  Learn how asynchronous code works in JavaScript, and how we can use promises in place of callbacks to achieve asynchronicity.

  12
• 

  What is the DOM

  Understanding the Document Object Model in and out

  Ferenc Almasi • 2024 February 21 • 9 min read

  There are more than 1.5 billion active websites on the internet, all made up of the same model: the Document Object Model or DOM for short. What is it?

  13
• 

  The Fetch API

  Learn how to grab data from other resources

  Ferenc Almasi • 2022 March 29 • 7 min read

  In this lesson, you are going to learn about the built-in Fetch API which can be used to fetch data in JavaScript using many different ways.

  14
• 

  Building JavaScript Projects

  Continue learning by building these projects

  Learning is a continuous process. Now that you are familiar with how JavaScript works, it's time to put theory into practice. Solidify your knowledge by building these projects in JavaScript.

  15
• 🔓 Unlock this lesson

  

  Conditions and Loops

  Learn how to work with conditions and loops for repeating code

  Ferenc Almasi • 2022 February 26 • 14 min read

  Working with conditions and loops is a core part of any programming language. In this lesson, you will learn about if statements, switch statements, for loops, and while loops.

  16
• 🔓 Unlock this lesson

  

  Arithmetic Operators

  Learn how arithmetic operators can help you create various expressions

  Ferenc Almasi • 2022 February 28 • 5 min read

  In this lesson, we are going to take a closer look at arithmetic operators - the ones that you are already familiar with from your math class, as you will be using them a lot in JavaScript.

  17
• 🔓 Unlock this lesson

  

  Comparison Operators

  Learn strict equality and comparing objects

  Ferenc Almasi • 2022 February 28 • 4 min read

  Learn about comparison operators and how they help you to evaluate expressions.

  18
• 🔓 Unlock this lesson

  

  Parameters and Arguments

  Learn how you can make functions more flexible by using parameters

  Ferenc Almasi • 2022 March 03 • 5 min read

  Learn the difference between parameters and arguments, and how you can use them to make your functions versatile.

  19
• 🔓 Unlock this lesson

  

  Function Returns

  Master the use of the return keyword

  Ferenc Almasi • 2022 March 04 • 6 min read

  Learn how to use the return keyword to retrieve values from functions, how to return entire functions, and how to write early returns.

  20
• 🔓 Unlock this lesson

  

  Invoking Functions

  Learn about IIFE, closures and built-in functions

  Ferenc Almasi • 2022 March 08 • 7 min read

  In this lesson, you will learn about the different ways to invoke functions and what built-in functions are available in JavaScript.

  21
• 🔓 Unlock this lesson

  

  Working with Arrays

  Creating, accessing, modifying and looping over arrays

  Ferenc Almasi • 2022 March 09 • 5 min read

  Arrays in JavaScript are indexed collections that can hold more than one value. Learn why we need arrays in JavaScript and how you can work with them.

  22
• 🔓 Unlock this lesson

  

  Properties and Methods

  Learn how to work with object properties and methods

  Ferenc Almasi • 2022 March 19 • 9 min read

  In this lesson, we are going to take a look at how to manipulate the properties of objects, as well as how to work with different methods.

  23
• 🔓 Unlock this lesson

  

  JavaScript Callbacks

  Learn what asynchronicity means, and how callbacks can help us achieve it

  Ferenc Almasi • 2022 January 01 • 6 min read

  With the help of callbacks and asynchronous code, we can enhance the way JavaScript works and have functionality that is not possible without it.

  24
• 🔓 Unlock this lesson

  

  Async/Await in JavaScript

  Learn how to make your code work synchronously with async/await

  Ferenc Almasi • 2022 January 01 • 6 min read

  Learn how you can use async/await in conjunction with Promises to write asynchronous code in a synchronous manner.

  25
• 🔓 Unlock this lesson

  

  The Local Storage API

  Learn how to store data inside the browser

  Ferenc Almasi • 2022 March 29 • 5 min read

  The Local Storage API allows us to save and read data to a user's browser. This data is kept so we can retrieve it, even after the user closes their browser.

  26
• 🔓 Unlock this lesson

  

  Building an App - Part I.

  Learn how you can build an app from scratch in JavaScript

  Ferenc Almasi • 2022 April 10 • 13 min read

  In this and the following lesson, you will practice the learnings to build a functioning application in JavaScript from the ground up.

  27
• 🔓 Unlock this lesson

  

  Building an App - Part II.

  Finishing the application

  Ferenc Almasi • 2022 April 10 • 15 min read

  With this lesson, you are going to finish this roadmap, and you are ready to take your skills to the next level with the provided resources.

  28

🗺️ Related roadmaps

• 

  HTML Roadmap

  Learn how to work with HTML using our guided roadmap

  Ferenc Almasi • 📚 24 lessons

  The roadmap for guiding you through the fundamentals of working with HTML. Learn how you can write semantic, SEO-friendly HTML documents.
• 

  Building JavaScript Projects

  Learn how to work with JavaScript using our guided roadmap

  Ferenc Almasi • 📚 19 lessons

  This roadmap covers and takes you through various projects to help you practice JavaScript while also building a portfolio of applications.
• 

  React Roadmap

  Learn React with our guided roadmap

  Ferenc Almasi • 📚 20 lessons

  This roadmap takes you through the essential concepts in React, from JSX, props and state, to concepts like lazy loading, suspense and error boundaries.

📚 More Webtips

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Master the Art of Frontend

• Access 100+ interactive lessons
• Unlimited access to hundreds of tutorials
• Prepare for technical interviews

Become a Pro

Courses

Master Astro + SEO

Learn how to build SEO-driven landing pages

Ferenc Almasi • 📚 21 lessons

Master React

From start to finish

Ferenc Almasi • 📚 37 lessons

Master Modern JavaScript

Learn how to build projects from scratch

Ferenc Almasi • 📚 40 lessons

Recommended

How to Create a Configurable Tabs Component in React

With TypeScript and HTML content support

Ferenc Almasi • 2024 February 23 • 11 min read • React v18.2

How to Create a Responsive Timeline Component in React

With the help of CSS pseudo elements

Ferenc Almasi • 2024 February 13 • 10 min read • React v18.2

How to Create Dynamic Routes in Astro

Generating different pages based on server-side data

Ferenc Almasi • 2024 January 16 • 9 min read