Himanay Khajuria

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

JavaScript is fast, flexible, and fun and now, you're learning its coolest tricks!

DEV Community