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, whilelet
&const
are block-scoped. -
const
can't be reassigned. - Use
let
andconst
— forgetvar
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 controlthis
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.