JS Retention Tips
—
### ✅ 1. **Learn by Doing – Not Just Reading**
– **Practice** small real-world problems every day—even 15 minutes helps.
– Use platforms like **[JSFiddle](https://jsfiddle.net)**, **[CodePen](https://codepen.io)**, or **[LeetCode](https://leetcode.com)** for hands-on learning.
—
### ✅ 2. **Use the “Feynman Technique”**
Explain a concept (like closures, `this`, promises) **in your own words** as if teaching a beginner.
> If you can explain it simply, you understand it deeply.
—
### ✅ 3. **Build and Reuse Snippets**
Create your own **snippet library**:
– Store small, working code examples (e.g., debounce, deep copy, fetch wrapper) in a Notion doc, VS Code snippet file, or GitHub Gist.
– Tag them: _"loop"_, _"DOM manipulation"_, _"array methods"_.
—
### ✅ 4. **Group Concepts Visually**
Use **mind maps** or **cheat sheets** for key areas:
– **DOM & Events**
– **Array methods**
– **Functions & Closures**
– **Async/Promises**
Would you like a visual JS cheat sheet?
—
### ✅ 5. **Spaced Repetition Tools**
Use **Anki** or **Quizlet** flashcards for important concepts:
– “What’s the difference between `let` and `var`?”
– “What does `event.preventDefault()` do?”
—
### ✅ 6. **Code from Memory**
Once you learn something, try to re-code it **without looking** at the reference.
For example:
// How to reverse a string?
// Try without looking it up.—
### ✅ 7. **Use It in Projects**
Build something:
– A **to-do app** (for CRUD, DOM, storage)
– A **weather app** (for fetch, promises)
– A **quiz app** (for event handling, data manipulation)
—
### ✅ 8. **Keep a “Dumb Mistakes” Journal**
Note your common mistakes like:
– Forgetting `return`
– Misusing `this`
– Overwriting arrays
You'll stop repeating them quickly.
—
Would you like me to prepare a weekly 5-day JavaScript drill plan tailored to your needs?
—
### 🧠 Question 1:
var a = 10;
(function() {
console.log(a);
var a = 5;
})();—
### 🧠 Question 2:
console.log(typeof null);
console.log(null instanceof Object);—
### 🧠 Question 3:
let obj = { name: "JS" };
const arr = [obj];
obj.name = "React";
console.log(arr[0].name);—
### 🧠 Question 4:
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}—
### 🧠 Question 5:
let x = [1, 2] + [3, 4];
console.log(typeof x);
console.log(x);—
Let me know when you're ready for the answers, or if you want more!
—
### ❓ Code:
var a = 10;
(function() {
console.log(a);
var a = 5;
})();—
### 🔍 What’s Happening?
JavaScript has **function-level scope** and **hoisting** for `var`. So:
– Inside the IIFE (Immediately Invoked Function Expression), `var a` is **hoisted** to the top of the function **but not initialized**.
– So the engine sees:
var a; // hoisted
console.log(a); // at this point, a is undefined
a = 5; // now initialized—
### ✅ **Output**:
undefined—
Would you like the explanation and output of the next question too?
—
### 🧠 **Question 2:**
console.log(typeof null);
console.log(null instanceof Object);—
### 🔍 Explanation:
– `typeof null` is a long-standing JavaScript **quirk**. It returns `'object'`, which is incorrect but kept for legacy reasons.
– `null instanceof Object` checks if `null` is derived from `Object.prototype`. It is **not**.
—
### ✅ **Output**:
"object"
false—
### 🧠 **Question 3:**
let obj = { name: "JS" };
const arr = [obj];
obj.name = "React";
console.log(arr[0].name);—
### 🔍 Explanation:
– `arr[0]` holds a reference to the same `obj`.
– When `obj.name` is changed, it's reflected inside the array too.
—
### ✅ **Output**:
"React"—
### 🧠 **Question 4:**
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}—
### 🔍 Explanation:
– `var` is function-scoped, not block-scoped.
– By the time `setTimeout` callbacks run, the loop is over and `i` is `3`.
– So all 3 callbacks log `3`.
—
### ✅ **Output**:
3
3
3—
### 🧠 **Question 5:**
let x = [1, 2] + [3, 4];
console.log(typeof x);
console.log(x);—
### 🔍 Explanation:
– Arrays are converted to strings: `'1,2'` and `'3,4'`
– Then JS performs string concatenation.
—
### ✅ **Output**:
"string"
"1,23,4"—
Want 5 more tricky output questions like this?
Here are **5 new JS output puzzles**, each targeting a **real concept** (closures, hoisting, promises, async, object mutation):
—
### 🔥 Question 1 — **Closures in loops**
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log("let", i), 0);
}
for (var j = 0; j < 3; j++) {
setTimeout(() => console.log("var", j), 0);
}—
### 🔥 Question 2 — **Promise execution order**
console.log("start");
Promise.resolve().then(() => {
console.log("promise 1");
});
console.log("middle");
Promise.resolve().then(() => {
console.log("promise 2");
});
console.log("end");—
### 🔥 Question 3 — **Destructuring + default**
const { x = 1, y = 2 } = { x: undefined, y: null };
console.log(x, y);—
### 🔥 Question 4 — **Object reference & mutation**
let a = { value: 10 };
let b = a;
b.value = 20;
a = { value: 30 };
console.log(b.value);—
### 🔥 Question 5 — **Async/await vs normal function**
async function asyncFunc() {
return 5;
}
function regularFunc() {
return 5;
}
console.log(asyncFunc()); // ?
console.log(regularFunc()); // ?—
These are sharper. Let me know which ones you want the answers or explanations for.
5
why?
async function asyncFunc() {
return 5;
}
function regularFunc() {
return 5;
}
console.log(asyncFunc()); // ?
console.log(regularFunc()); // ?—
### ✅ Explanation:
#### `asyncFunc()`
– When you declare a function with `async`, it **automatically wraps the return value in a `Promise`**.
– So `return 5` inside `asyncFunc()` is actually equivalent to:
return Promise.resolve(5);– Therefore:
console.log(asyncFunc()); // logs: Promise { 5 }—
#### `regularFunc()`
– Just returns a normal number directly.
console.log(regularFunc()); // logs: 5—
### 🧠 Summary:
| Function Type | Return Value |
|——————-|——————|
| `async function` | `Promise` |
| `regular function`| `value` |
—
Would you like a follow-up question based on `await` behavior or chained `.then()` handling?