Full Stack Camp

🌞 Week 5 Day 6: Debugging, Storage, Modules, Promises, and More APIs

Hey hey Campers! 👋🌻

We’ve come such a long way together. From writing our first console.log("Hello World") to handling APIs and promises .💪
Today is our last big frontend JavaScript lesson. After this, you’ll be fully ready to step into backend land. But before that, let’s tie up the remaining pieces:

🐞 1. Debugging in JavaScript

Debugging means finding and fixing errors (bugs) in your code.
👉 Think of it like when your bicycle makes a strange sound 🚲😅 — you stop, check where it’s coming from, and fix the loose screw. Debugging in code is the same!
Common Debugging Tools:
➤console.log()
Your best friend 🐶. Use it to print values and see what’s happening.

let num = 10; console.log("The number is:", num);

➤Breakpoints (in Browser DevTools)
Open F12 → Sources → Add breakpoints in code. The program stops and lets you inspect step by step.
➤Errors & Stack Traces
When you see red error messages ❌ in the console, don’t panic. They usually tell you where the problem is.
Example:

function divide(a, b) { if (b === 0) { throw new Error("You can't divide by zero!"); } return a / b; } try { console.log(divide(10, 0)); } catch (err) { console.error("Something went wrong:", err.message); }

🔑 Lesson: Errors are not enemies. They are guides telling you what went wrong.

💾 2. Local Storage & Session Storage

Your browser can remember things using storage, even if you refresh or close the tab.
➤Local Storage → Data stays until you delete it (like saving something in your notebook 📒).
➤Session Storage → Data disappears when you close the tab (like notes on a whiteboard 🧽).
Example: Local Storage

// Save localStorage.setItem("username", "Megersa"); // Get let user = localStorage.getItem("username"); console.log("Welcome back,", user); // Remove localStorage.removeItem("username");

Example: Session Storage

sessionStorage.setItem("theme", "dark"); console.log(sessionStorage.getItem("theme")); // "dark"

💡 Hint: Use Local Storage for things like to-do lists, Session Storage for things like temporary form data.

📦 3. Modules in JavaScript

Imagine your code is a library 📚. Instead of putting all books in one giant pile, you divide them into sections (math, history, science).
Modules let us split code into files and reuse it.
Example:
📂 project
┣ 📄 math.js
┗ 📄 app.js
math.js

export function add(a, b) { return a + b; } export const PI = 3.14;

app.js

import { add, PI } from './math.js'; console.log(add(5, 10)); // 15 console.log(PI); // 3.14

💡 Modules keep your code organized and easy to maintain.

⏳ 4. Multiple Promises (Promise.all, Promise.race)

So far, we’ve seen one promise at a time. But what if we want to wait for many tasks?
👉 Think of it like ordering injera and shiro at the same time. You want to start eating only when both are ready. 🍽️
Promise.all
Waits for all promises to finish.

let p1 = Promise.resolve("Injera ready"); let p2 = Promise.resolve("Shiro ready"); Promise.all([p1, p2]).then(values => { console.log(values); // ["Injera ready", "Shiro ready"] });

Promise.race
Whoever finishes first, wins.

let fast = new Promise(res => setTimeout(() => res("Fast delivery"), 1000)); let slow = new Promise(res => setTimeout(() => res("Slow delivery"), 3000)); Promise.race([fast, slow]).then(value => { console.log(value); // "Fast delivery" });

80 views10:39