Code Chronicles Hub

💻Learn HTML, CSS, JS, UI & Algorithms with Code Chronicles Hub. Bite-sized JS Quizzes on YouTube Shorts weekly!

[Code Chronicles Hub @codechronHub]

Most developers think the output is 3, 1, 2, 4. They are wrong. ❌

await pauses the function execution NOT the main thread.

JS finishes the script (logs '4') and then logs '2'

📚 Learn JS by Questioning Full Playlist👇
https://t.co/76ael7XSpT

[Code Chronicles Hub @codechronHub]

In Part 3 of our "Mastering this" series, we use visual metaphors to surgically precisely control context.

1️⃣ "Run NOW" vs "Run LATER" cheat sheet.
2️⃣ Difference between .call() and .apply()
3️⃣ How .bind() acts like a "time machine"

👇
https://t.co/9qh2MTsJrX

[Code Chronicles Hub @codechronHub]

🔥 PART 3 IS LIVE! - Master call(), apply(), and bind() in 5 Minutes!

If you've ever wondered how to make one object "borrow" a method from another, you need this toolkit.

Stop guessing. Master the toolkit

📺 Watch the full visual explanation here: https://t.co/9qh2MTsJrX

[Code Chronicles Hub @codechronHub]

Stop losing this in callbacks! 🤯

When you hand your function (🦎) to a "Stranger" (forEach, setTimeout), we lose control, and our code hits undefined.

We fixed the CALLBACK TRAP in Part 2!

🎥Watch the full video now! 👇
https://t.co/vriIpj3gDf

[Code Chronicles Hub @codechronHub]

In Part 1, we talked about what happens when you call a function(Our Chameleon 🦎) simply, without a dot (a "Function Call").

Missed Part 1?

📺Watch the full visual explanation here 📷https://t.co/qtCzc1wTlR

[Code Chronicles Hub @codechronHub]

🟡Medium - QUESTION: Strict Mode: On 🛡️

Modern frameworks run in "Strict Mode" by default. Do you know how that changes "this"?

What is "this" in the code below?

A) window / global
B) undefined
C) Error

⚠️If you get this wrong, your app might crash silently! 💥

[Code Chronicles Hub @codechronHub]

This is the "Safety Net" difference.

💠 showThis is a regularfn call without a dot. Our🦎is sitting on "no branch"
💠 Legacy JS: It would fall down to the global(window)
💠 Strict Mode: Removes that default behavior, remains undefined.

This is why modern frameworks are safer.

[Code Chronicles Hub @codechronHub]

Wondering why `this` becomes the DOM element?

I covered the exact reason in Part 1 of my THIS series

👉 Watch Part 1: https://t.co/qtCzc1wTlR

[Code Chronicles Hub @codechronHub]

We often pass class methods directly into addEventListener… but do you know what `this` becomes inside the callback?

Try this quick poll and test your understanding 👇

We learned in Part 1 that regular functions are Chameleons 🦎 but what happens when someone else calls them?

[Code Chronicles Hub @codechronHub]

I explain exactly how "this" works in Part 1 of my new series - "🎯Master JavaScript this: From Confused to Confident"

In this episode, we fix the classic “crashing button” error step-by-step.

This is just the start.
🚀 Part 2 drops next week: We tackle the 'Callback Trap'

#js

[Code Chronicles Hub @codechronHub]

💥 TypeError: Can't read properties of undefined 😭
If `this` keeps confusing you, you’re using the wrong mental model.

Fix 70% of your bugs with 2 rules 👇

🦎 Regular fn → Look at the DOT (dynamic)
📸 Arrow fn → Look at the PARENT (static)

🎥 Part 1:
https://t.co/qtCzc1wTlR

[Code Chronicles Hub @codechronHub]

🚫STOP your JavaScript app from crashing due to a single failed API call.

Master the concept of The API Race - Promise.all vs. Promise.allSettled, watch the full Short to understand the crucial difference and level up your async JS!

▶️ https://t.co/YbdQMeCKat

[Code Chronicles Hub @codechronHub]

🤯 JS Quiz: The API Race - Promise.all vs. Promise.allSettled

What happens when you run Promise.all and Promise.allSettled with a mix of successful and failed promises? Which of these console.log lines will run?

A. 1&3
B. 2&3
C. 1&4
D. 2&4

[Code Chronicles Hub @codechronHub]

➡️ `Promise.all()`: (Think: Group Project) If ONE promise rejects, the ENTIRE thing fails instantly. You only get the error.

➡️ `Promise.allSettled()`: (Think: Report Cards) It waits for all promises to finish (pass OR fail), and gives you a complete list of all outcomes.

[Code Chronicles Hub @codechronHub]

🙅‍♂️Stop committing console.log()!

Use Logpoints in Chrome DevTools instead.

You can log any value without touching your source code.

��� No more "remove log" commits
✅ No save/reload cycle
✅ 100% clean code

Here's a 60-second video showing you how: https://t.co/meHBEYX6MU

[Code Chronicles Hub @codechronHub]

🤦‍♂️Stop committing console.log()!

Use Logpoints in Chrome DevTools instead.

You can log any value without touching your source code.

✅ No more "remove log" commits
✅ No save/reload cycle
✅ 100% clean code

Here's a 60-second video showing you how: https://t.co/meHBEYX6MU

[Code Chronicles Hub @codechronHub]

Stop committing console.log()! 🤦‍♂️

Use Logpoints in Chrome DevTools instead.

You can log any value without touching your source code.

✅ No more "remove log" commits
✅ No save/reload cycle
✅ 100% clean code

Here's a 60-second video showing you how: https://t.co/meHBEYX6MU

[Code Chronicles Hub @codechronHub]

🤔 Which option did you choose and why? Drop your reasoning in the comments!👇

Sets use a different equality algorithm internally! 🎥 Watch the full breakdown along with the snippets from the actual internal algorithm used by JavaScript
👉https://t.co/tDyr8cnvTE

[Code Chronicles Hub @codechronHub]

Most developers know that NaN === NaN returns false in JavaScript. What do you think the output of this code will be?

const mySet = new Set();
mySet.add(NaN);
mySet.add(NaN);
mySet.add('NaN');

console.log(mySet.size); // ??

[Code Chronicles Hub @codechronHub]

🤔 Which option did you choose and why? Drop your reasoning in the comments!👇

Sets use a different equality algorithm internally! 🎥 Watch the full breakdown along with the snippets from the actual internal algorithm used by JavaScript
👉https://t.co/tDyr8cnvTE

[Code Chronicles Hub @codechronHub]

Most developers know that NaN === NaN returns false in JavaScript. What do you think the output of this code will be?

const mySet = new Set();
mySet.add(NaN);
mySet.add(NaN);
mySet.add('NaN');

console.log(mySet.size); // ??