Learn Only What Matters in JavaScript: My Roadmap from Zero to Advanced

Hey Devs! 👋

I recently went all-in on learning JavaScript—from the absolute basics to the concepts behind how JS works under the hood. But here’s the twist:

❌ I didn’t learn “everything.”

✅ I learned only what really matters to build real-world projects & crack interviews.

Let me share what I focused on 👇

1️⃣ var, let, const: What's the Real Difference?

var x = 10;

let y = 20;

const z = 30;



x = 100; // ✅ allowed

y = 200; // ✅ allowed

z = 300; // ❌ Error: Assignment to constant variable

• 
  var is function-scoped, while let & const are block-scoped.


• 
  const can't be reassigned.


• Use let and const — forget var in modern JS.

2️⃣ Hoisting 🏗️

console.log(a); // undefined

var a = 10;



sayHi(); // "Hi!"

function sayHi() {

  console.log("Hi!");

}

• 
  var gets hoisted with undefined
  


• Functions get hoisted completely

3️⃣ Data Types 💡

// Primitives

let num = 5;

let str = "Hello";



// Reference

let obj = { name: "Dev" };

let arr = [1, 2, 3];

• Learn the difference between primitive and reference types


• Reference types are stored in heap memory

4️⃣ Conditionals & Loops 🔁

if (true) {

  console.log("Runs!");

}



for (let i = 0; i < 3; i++) {

  console.log(i); // 0, 1, 2

}

• Master if, else, switch, for, while, do while
  

5️⃣ Functions = Power 💪

function greet(name) {

  return `Hello, ${name}`;

}



const greetArrow = (name) => `Hello, ${name}`;

• First-class citizens ✅


• You can pass them, return them, assign them


• Understand callback, arrow, pure, higher-order, IIFE
  

6️⃣ Arrays & Objects 🔧

let nums = [1, 2, 3];

nums.push(4); // [1, 2, 3, 4]



let user = { name: "Dev", age: 22 };

user.city = "Pune";

• Must-know methods: push, pop, shift, unshift, map, filter, reduce
  


• Destructuring simplifies access
  

const { name } = user;

7️⃣ Execution Context & Scope 🔍

function outer() {

  let a = 10;



  function inner() {

    console.log(a); // 10

  }



  inner();

}

outer();

• Lexical scope & closures


• Understand call stack, heap, and memory allocation

8️⃣ this, call, apply, bind 🤯

const obj = {

  name: "Dev",

  greet: function () {

    console.log(`Hello, ${this.name}`);

  },

};



obj.greet(); // Hello, Dev

• Know how this behaves in different contexts


• Use .call(), .apply(), .bind() to control this
  

9️⃣ DOM Manipulation 📱

const btn = document.getElementById("clickMe");

btn.addEventListener("click", () => {

  document.body.style.background = "lightblue";

});

• Select, edit, and style HTML elements


• Build interactivity in your frontend

🔟 ES6+ Features 💎

function greet(name = "Guest") {

  console.log(`Hello, ${name}`);

}



const user = { name: "Dev", age: 22 };

const { name, age } = user;

• Default params ✅


• Destructuring ✅


• Spread/rest operators ✅

🔄 Asynchronous JavaScript ⏳

setTimeout(() => {

  console.log("Runs after 2s");

}, 2000);



// Promises

const fetchData = () =>

  new Promise((resolve, reject) => {

    resolve("Data fetched!");

  });



fetchData().then(console.log);

• Learn setTimeout, Promises, async/await
  


• Understand Event Loop, Web APIs, and Callbacks

👷 Prototype & OOP in JS

function Person(name) {

  this.name = name;

}



Person.prototype.sayHello = function () {

  console.log(`Hi, I'm ${this.name}`);

};



const user = new Person("Dev");

user.sayHello(); // Hi, I'm Dev

• Constructor functions


• Prototypes and inheritance


• 
  new keyword and how objects are created

📁 Bonus: My Practice Code

I’ve put all my examples in a GitHub repo for easy access:

🔗 https://github.com/Mahendra111111/Javascript_practiceset

👋 Final Words

JavaScript can feel overwhelming—but if you stick to what truly matters, you’ll get productive fast.