On the off chance that you are new to coding, you may contemplate whether you can get a grip of a programming language in no time. The appropriate response is just: no. It's close to difficult to acquire master information on all the programming languages popular and get a lesser designer work in a short measure of time.

JavaScript is the most well-known language for making site pages intelligent. To truly command the notice of guests to your site, you will need it to have intelligent highlights.

Yet, how long will it truly require to get familiar with the rudiments of JavaScript? We should make a plunge and see.

Let's discuss how to learn JavaScript a roadmap with resources.

JavaScript Fundamentals: Execution Syntax

• Global execution context
• Function execution context
• Hoisting
• Scope chain and lexical environment

Resources

• JavaScript Tutorial - JavaScript Execution Context
• Understanding JavaScript Execution Context like never before
• Execution Context
• Hoisting in JavaScript
• Understandig scope chain

Operators

• Comparison operators
• Logical operators
• Short circuit evaluation
• String operators
• Conditional operator

Resources

• Comparison and Logical Operators
• Comparison and Logical Operators
• What is short-circuit evaluation?
• Expression and Operators
• JavaScript Operators
• Conditional (ternary) operator

Control flow and Error handling

• Block statement
• Conditional statement
• Falsy values
• Exception handling statement
• Throw statement

Resources

• Block - MDN
• JavaScript conditionals
• Falsy Values in JavaScript
• Exception Handling in JavaScript
• Throw Statement JavaScript - MDN

Object and Functions

• Function statement and Function expression
• IIFE and practical use. Safe code
• Nested fuctions and closures
• Practical closures

Resources

• Function Declarations vs. Function Expressions
• IIFE in JavaScript
• Practical use of IIFE
• JavaScript Closures
• Nested Functions in JavaScript
• A practical guide to JavaScript closures

Object and Function [MORE and IMPORTANT]

• Asynchronous operations with callback functions
• ABC of JavaScript
• How primitive values assigned by values and references
• Object literals, properties and methods
• Optional chaining
• 'this' keyword

Resources

• Getting to know asynchronous JavaScript: Callbacks, Promises and Async/Await
• Apply, Bind, Call
• JavaScript Primitive vs. Reference Values
• Object literals simplified
• Working with Objects
• Understanding Objects, Properties, and Methods
• Optional Chaining
• this keyword in javascript

Arrays

• Array declaration (get value by index, get arrays length)
• Array helper methods: forEach, map, filter, find, every, some, reduce, sort, concat, findIndex, reverse, includes, pop, shift, unshift.

Resources

• Everything You Need to Know About JavaScript Array Methods
• The JavaScript Array Handbook – JS Array Methods Explained with Examples

ES6 (Part 1)

• Const and let
• Block scoped variables and functions with let
• Arrow functions
• Set default parameter values in a Functions
• Extended parameter handling(Rest and Spread)

Resources

• Var, Let, and Const – What's the Difference?
• JavaScript let: Declaring Block-Scoped Variables
• ES6 Arrow Functions: Fat and Concise Syntax in JavaScript
• Understanding Default Parameters in JavaScript

ES6 (Part 2)

• Template literals
• Destructuring assignment
• Object properties
• Async flow control
• Class (definition, inheritance, base class access, getter/setter, static members)

Resources

• Template literals
• Destructuring assignment
• JavaScript | Object Properties
• The Complete Guide to JavaScript Classes

Inheritance and prototype chain

• How does Prototype property works
• How to use prototype property
• How to inherit methods and properties
• Different ways to create objects and the resulting prototype chain

Resources

• Prototype in JavaScript
• Inhetritance in JavaScript
• Inheritance and the prototype chain

JavaScript Modules

• Export and Import of modules
• Default and names exports
• rename imports and exports
• import and export of classes
• Dynamic module loading
• Top level await

Resources

• JavaScript | Importing and Exporting Modules
• Named Export vs Default Export in ES6
• Renaming imports and exports with ES modules in vanilla JS
• Dynamic imports

This was a pretty straightforward roadmap with articles as resources. But these resources are really helpful and are from website people love to read.

Thanks for looking into this article. Hope you have a great journey ahead.