Posted on Apr 9 • Edited on May 26

Tricky Parts of JavaScript

#javascript #webdev #programming #beginners

Learning JavaScript can feel like learning superpowers! 🦸‍♀️ But sometimes, those powers act a little weird and confuse us. Don’t worry, in this blog, we’ll break down the tricky parts step-by-step, like solving a fun puzzle together. Ready? Let’s go! ⤵

📌 What We'll Learn

Scope
Hoisting
Different Kinds of Functions
Promises
Fetch API
Promise.all
Async/Await

Note: These topics are often confusing, but once you get them, you'll feel like a JavaScript superhero 🦸‍♂️!

1. Scope 🔍

Scope means: Where can I use this variable?

let toy = 'Teddy'; // Global scope function play() { let game = 'Hide and Seek'; // Function scope if (true) { let snack = 'Chips'; // Block scope console.log(toy, game, snack); } // console.log(snack); // ❌ Error: snack is not visible here }

Global Scope = Everyone can see it 🎈
Function Scope = Only inside the function 🚪
Block Scope = Only inside {} like if, for blocks 🔒

2. Hoisting 🏗️

Hoisting means: JavaScript lifts your variable or function declarations to the top!

console.log(x); // undefined (hoisted) var x = 5; // console.log(y); // ❌ Error let y = 10;

var is hoisted and becomes undefined
let and const are also hoisted, but you can't use them before you write them (they live in the Temporal Dead Zone) ☠️

3. Types of Functions 🧠

Function Declaration

function greet() { console.log('Hello!'); }

✅ Hoisted. You can call it before it's written.

Function Expression

const sayHi = function() { console.log('Hi!'); };

❌ Not hoisted. You must write it first.

Arrow Function

const sayHey = () => console.log('Hey!');

➡️ Shorter. No own this.

IIFE (Immediately Invoked Function Expression)

(function() { console.log('I run right away!'); })();

⚡ Used when you want to run code immediately.

4. Promises 🎁

A Promise is like a gift. You wait... then you get something or nothing!

const surprise = new Promise((resolve, reject) => { let isGood = true; if (isGood) { resolve('🎉 Yay!'); } else { reject('😢 Oops!'); } }); surprise .then(msg => console.log(msg)) .catch(err => console.log(err));

✅ .then() is for good result
❌ .catch() is for error

5. Fetch API 🌐

Fetch is how JavaScript gets things from the internet - like food delivery 🚚

fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(data => console.log(data.title)) .catch(error => console.error('Error:', error));

6. Promise.all 🧺

Promise.all waits for many promises at once, like waiting for all friends to arrive before cutting the cake 🎂

const p1 = Promise.resolve('🍎'); const p2 = Promise.resolve('🍌'); const p3 = Promise.resolve('🍇'); Promise.all([p1, p2, p3]) .then(result => console.log(result)) // ["🍎", "🍌", "🍇"] .catch(error => console.log('One failed:', error));

🧠 All promises must finish. If even one fails, you go to .catch().

7. Async/Await 🧘

Async/Await helps you write promises in a clean way, like reading a book 📖

async function getPost() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); const post = await response.json(); console.log(post.title); } catch (err) { console.log('Error:', err); } } getPost();

async means the function will use await
await waits for the promise

📋 Quick Review Table

Concept	Key Idea
Scope	Where a variable is available
Hoisting	Declarations move to the top
Functions	Different ways to write functions
Promises	Handling future events (success/fail)
Fetch	Get data from a server
Promise.all	Wait for multiple promises
Async/Await	Cleaner syntax for promises