JavaScript Roadmap - Everything you need to learn 🦅

Hello HaWkers, welcome everyone to this JavaScript Roadmap, where you will learn everything you need to take off your career in the world of JavaScript.

This Roadmap's main objective is to accelerate the way you study, thus giving you a map where you can follow in order and advance your studies in JavaScript, covering everything from basic topics to advanced topics to prepare you to face the world of Frameworks, which is where you will really train yourself to be able to start your career in the Software Development area.

Basic guidelines

Before proceeding, I need you to understand that this Roadmap is under construction and it is collaborative.

The in-depth look at each specific topic will be released every day over time, so I strongly advise you to return to this Roadmap every day to follow the release of in-depth content.

To access the in-depth content of each topic, simply click on each of the titles, or somewhere that has a link, and you will be directed to an in-depth look at the specific topic. (If the topic does not yet have a link, it is because the in-depth article has not yet been developed).

Any questions, suggestions or criticisms. Please use the comments section at the end of the article for this.

Let's start

To understand the best way to study and delve deeper into each topic, I separated them by color.

The rating level of each content is based exclusively on my opinion and my own experience in the area.

You can identify each level by following the guidelines of the following colors:

• 🟣 Need to know, widely used
• 🟡 Interesting to know, but little used
• 🔴 Rarely used
• 🟠 Environment Setting

🟡 Introduction to JavaScript

• 🟡 What is JavaScript?
• 🟡 History of JavaScript
• 🟡 Practical Applications of JavaScript
• 🟡 Versions

🟠 Development Environment Configuration

• 🟠 Node.js and Npm Installation
  • 🟠 Windows
  • 🟠 Linux/Mac
• 🟠 Text Editor
  • 🟠 Installing Visual Studio Code on Windows
  • 🟠 Installing Visual Studio Code on Mac
  • 🟠 Installing Visual Studio Code on Linux

🟣 Understanding Variables

• 🟣 What are variables?
• 🟣 Declaring variables
• 🟣 Hoisting
• 🟣 Naming rules
• 🟣 Scope of variables
  • 🟣 Global Scope
  • 🟣 function scope
  • 🟣 Difference

🟣 Data Types

• 🟣String
• 🟣Number
• 🟡BigInt
• 🟣 Boolean
• 🟣 Null
• 🟣 Undefined
• 🔴 Symbol
• 🟣 Object
  • 🟣 Accessing an object’s keys
    • Dot notation
    • Bracket notation
• 🟡 Type Casting

🟣 Data Structures

• 🟣 Array
• 🟣String
• 🟣 Object
• 🟡 Map
• 🟡 Set
• 🔴 Linked List

🟣 Equality Comparisons

• 🟣 Simple equality operator ( == )
• 🟣 Strict equality operator ( === )
• 🟢 Practical Exercises

🟣 Loops and Interactions

• 🟣 For Loop
• 🟣 For Loop with Objects
• 🟣 For...of Repeat Loop
• 🟡 While Repeat Loop
  • 🟡 Infinite Loop: A Trap to Avoid
• 🔴 Do-While Repeat Loop
• 🟣 Loop with Array
  • 🟣 forEach
  • 🟣 Using Loops with String Methods
  • 🟣 Using Loops with Asynchronous Functions
• 🟡 Keyword continue inside Loops
• 🟡 Keyword break inside Loops
• 🔴 Nested Loops
  • 🔴 Loops and Recursion
  • 🔴 Loops and DOM Manipulation
  • 🔴 Building Animations with Loops

🟣 Control Flow

• 🟣 if
• 🟣 if...else
• 🟣 switch
• 🟡 if...else if

🟣 Expressions and Operators

• 🟣 Assignment Operators
• 🟣 Comparison Operators
• 🟣 Arithmetic Operators
• 🟣 Bitwise Operators
  • 🟣 AND
  • 🟣 OR
  • 🔴XOR
• 🟣 Logical Operators
• 🔴 BigInt Operators
• 🟣 String Operators
• 🟣Conditional Operators
• 🟣 The comma operator (Comma Operator)
• 🟣 Unary Operators
• 🟣 Relational Operators

🟣 Functions

• 🟣 Function Parameters
• 🟡 Parameters with predefined value (Default Params)
• 🔴 Rest Params (Rest Params)
• 🔴 IIFEs (Immediately Invoked Function Expressions)
• 🔴 Arguments Object
• 🟣 Built-in Functions
• 🟣 Scope and function stack (Call stack)

🔴 Strict Mode

🟣 Using (this) (this Keyword)

• 🟣 this in Arrow Functions
  • 🟣 Lexical Context:

🟣 Asynchronous Programming

• 🟣 Callbacks
• 🟣 Promises
• 🟡 Callback Hell

🟣 Working with APIs

🟡 Classes

• 🟡Super

🔴 Iterators and Generators

• 🔴 Iterators
• 🔴 Generators

🟣 JavaScript Modules

• 🟡 CommonJS
• 🟣 ECMAScript Modules (ES Modules)

🔴 Memory Management

• 🔴 Talking a little about the memory life cycle

🟣 Using Chrome Dev Tools

• 🟣 Learning to debug problems
• 🔴 Learning how to debug memory leaks (Memory Leak)
• 🔴 Learning to debug performance

Maintain consistency in your studies.

The concepts may seem confusing at first, but don't be discouraged! Keep studying and practicing, because at some point everything will become clear. And when that happens, don't forget to share your achievements with me!

Explore other sources of knowledge.

The developer community is rich in resources and collaboration. Therefore, continue looking for other sources of knowledge such as courses, tutorials, forums and discussion groups to further improve your skills in this vast world.

Discipline is fundamental!

Dedicate yourself and invest time in your studies, every day! Remember that dedication and persistence are essential ingredients for success. Although there is no easy path, with commitment, the results will be great!

Keep in mind that this roadmap represents just the starting point. Now, it's up to you to continue exploring, learning and evolving as a developer. I am convinced that you will prosper in this universe!

From the bottom of my heart I wish you an extraordinary journey and, if you have any questions, I will always be available to help.

Conclusion

We've reached the end of our "JavaScript Roadmap - Everything you need to learn", but it doesn't stop there! Your journey into the world of programming has just begun!

If you are interested in accessing the in-depth content before it is released here. Access this link to find out more!

Don't forget to share your progress in the comments, it will be a great pleasure to follow your progress along the way.

Oh, and also follow me on my Social Media. I'm sure there will be something there that will help you advance even further!

Instagram - Youtube - Linkedin - GitHub

Let's go up! 🦅