Forem: NoobDev

How I Bombed a JavaScript Interview and Learned About Function Chaining the Hard Way

NoobDev — Mon, 17 Feb 2025 06:17:12 +0000

The Painful Interview Moment

You know that sinking feeling when you’re staring at your screen, the interviewer waiting, and your brain just decides to go on vacation? That was me in a JavaScript interview.

The task? Create a simple function that supports method chaining.

My response? Blank stares, a sweaty keyboard, and a strong urge to close the laptop and run away.

Well, I bombed it. But instead of sulking, I decided to master function chaining like a boss. If you’ve ever struggled with this concept, this blog is for you.

What is Function Chaining in JavaScript?

Function chaining is when you call multiple methods on an object, one after another, in a single statement. You’ve seen it in libraries like jQuery or Lodash:

$('.element').addClass('active').fadeIn().css('color', 'red');

Each method returns the object itself, allowing the chain to continue. But how do we implement this ourselves?

The Classic Object-Oriented Approach

The simplest way to implement chaining is to have methods return this (the object itself):

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this; // Enables chaining
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  multiply(num) {
    this.value *= num;
    return this;
  }

  divide(num) {
    if (num !== 0) this.value /= num;
    return this;
  }

  result() {
    return this.value;
  }
}

Each method returns this, which allows us to chain method calls.

Real-World Use Cases for Function Chaining

Sure, the calculator example is cool, but let’s get real—where can function chaining actually help? Here are three practical, real-world implementations:

1. DOM Manipulator

Instead of writing repetitive DOM queries, let’s create a neat utility:

class ElementWrapper {
  constructor(selector) {
    this.element = document.querySelector(selector);
  }

  addClass(className) {
    this.element.classList.add(className);
    return this;
  }

  removeClass(className) {
    this.element.classList.remove(className);
    return this;
  }

  setText(text) {
    this.element.textContent = text;
    return this;
  }
}

// Usage:
const button = new ElementWrapper("#myButton");
button.addClass("active").setText("Click Me!");

2. Event Emitter

A simple implementation of an event-driven system with method chaining:

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
    return this;
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
    return this;
  }
}

// Usage:
const emitter = new EventEmitter();

emitter.on("message", msg => console.log("Message received:", msg)).emit("message", "Hello!");

3. CSS Builder

Dynamically generate inline styles with method chaining:

class StyleBuilder {
  constructor() {
    this.styles = {};
  }

  set(property, value) {
    this.styles[property] = value;
    return this;
  }

  remove(property) {
    delete this.styles[property];
    return this;
  }

  build() {
    return Object.entries(this.styles)
      .map(([key, value]) => `${key}: ${value}`)
      .join("; ");
  }
}

// Usage:
const styles = new StyleBuilder()
  .set("color", "red")
  .set("font-size", "16px")
  .remove("font-size")
  .build();

console.log(styles); // "color: red"

Other Common Chaining Examples

Here are some common areas where method chaining is widely used:

Logging utilities (e.g., .info().warn().error()) for structured logging.
Animation libraries (e.g., custom .fadeIn().move().scale() chaining).
Query builders (used in SQL ORMs like Knex.js).
HTTP request builders to construct API requests dynamically.

If you're interested in learning more about any of these common examples, let me know!

What I Learned After Bombing the Interview

Panic ruins everything. If I had stayed calm and broken the problem down, I could have written the solution.
Returning this is the key to chaining. As long as methods return the object, chaining works.
Practice matters. The more I implement chaining, the more natural it feels.
Multiple approaches exist. OOP, functional programming, and prototype-based solutions all work.

Final Thoughts

I bombed my interview, but I walked away learning something valuable. If you ever get asked about function chaining, you won’t have to suffer like I did.

And who knows? Maybe next time, I’ll ace it. 🚀

"This" is Not What You Think: A Real-World Guide to the JavaScript this Keyword

NoobDev — Sat, 15 Feb 2025 04:52:04 +0000

If you've ever found yourself debugging JavaScript and yelling, "Why is this undefined?!", you're not alone. The this keyword is one of the most misunderstood concepts in JavaScript. It's like that friend who acts differently depending on the situation—sometimes reliable, sometimes confusing, and occasionally just missing in action.

But don’t worry! In this blog, we’ll break down this in a fun way with real-world use cases, common pitfalls, and solutions to save you from the dreaded undefined is not a function errors.

Understanding `this`: The Golden Rule

The value of this depends on how a function is called, not where it's written.

Think of this like a restaurant waiter:

If you call them politely, they serve you well.
If you shout from across the street, they might ignore you.
If they’re not assigned to your table, they don’t know what to do.

In JavaScript, the context of this changes depending on where and how a function is called.

Use Case 1: `this` in Objects

Scenario: You’re building a simple user profile object that logs the username.

const user = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  }
};

user.greet(); // ✅ Hello, my name is Alice

💡 What’s happening?

Here, this refers to user, because the function is called as user.greet().

Pitfall: If you store the method in a variable and call it separately…

const greetUser = user.greet;
greetUser(); // ❌ TypeError: Cannot read properties of undefined

😱 Why?

Because this now refers to the global object (window in browsers, undefined in strict mode), not user.

🛠 Solution: Use `.bind(this)`

const greetUser = user.greet.bind(user);
greetUser(); // ✅ Hello, my name is Alice

Use Case 2: `this` in Event Handlers

Scenario: You’re building a button that logs the text inside it when clicked.

const button = document.querySelector("#clickMe");

button.addEventListener("click", function () {
  console.log(`You clicked: ${this.innerText}`);
});

💡 Why does this work here?

Because in regular functions, this inside an event listener refers to the element that triggered the event.

Pitfall: If you switch to an arrow function…

button.addEventListener("click", () => {
  console.log(`You clicked: ${this.innerText}`);
});

😱 Uh-oh! this is now undefined.

Arrow functions don’t have their own this, they inherit from their surrounding scope (which in this case is the outer script, not the button).

🛠 Solution: Use a regular function or explicitly reference `button` inside an arrow function.

button.addEventListener("click", function () {
  console.log(`You clicked: ${this.innerText}`);
});

// OR

button.addEventListener("click", (event) => {
  console.log(`You clicked: ${event.target.innerText}`);
});

Use Case 3: `this` in Classes

Scenario: You’re building a `Car` class and need to print the car’s details.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  showCar() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

const myCar = new Car("Tesla", "Model S");
myCar.showCar(); // ✅ Car: Tesla Model S

💡 Why does this work here?

Because inside a class, this refers to the specific instance of the class.

Pitfall: If you pass `showCar` to `setTimeout`…

setTimeout(myCar.showCar, 1000); 
// ❌ TypeError: Cannot read properties of undefined

😱 Why?

setTimeout executes the function in a different context where this is not bound to myCar.

🛠 Solution: Bind `this`

setTimeout(myCar.showCar.bind(myCar), 1000);

🛠 Or Use an Arrow Function

setTimeout(() => myCar.showCar(), 1000);

Final Takeaways

✅ When to use `this` in JavaScript?

✔ Inside objects → this refers to the object.

✔ Inside classes → this refers to the instance.

✔ In regular functions → this depends on how the function is called.

✔ Inside arrow functions → this is inherited from the surrounding scope.

❌ Common Pitfalls (and Solutions)

Pitfall	Solution
`this` is `undefined` in event listeners (arrow functions)	Use a regular function or `event.target`
`this` changes when passing a method	Use `.bind(this)`
`this` is lost inside `setTimeout`	Use `.bind(this)` or an arrow function
`this` inside array methods doesn’t work as expected	Use an arrow function

Conclusion

Understanding this is a rite of passage for JavaScript developers. Hopefully, this guide helps you avoid its many pitfalls and use it with confidence. The next time this confuses you, just ask: “Where was this function called?” 🎯

Mastering the JavaScript Event Loop: A Deep Dive with Examples

NoobDev — Mon, 10 Feb 2025 06:28:11 +0000

JavaScript is known for its single-threaded nature, which might seem limiting at first glance. However, thanks to the event loop, JavaScript can handle asynchronous operations—like network requests, timers, and I/O—efficiently and without blocking the main thread. In this blog post, we’ll explore what the event loop is, how it works, and see some practical examples that will help you understand this crucial aspect of JavaScript.

What is the Event Loop?

At its core, the event loop is a mechanism that allows JavaScript to perform non-blocking operations, even though it runs on a single thread. It manages the execution of multiple pieces of code over time by coordinating between the call stack, Web APIs (or similar browser/node functionalities), and the task queues.

Call Stack: This is where your code is executed line by line. When a function is called, it gets pushed onto the stack, and once it returns, it’s popped off.
Web APIs: These are provided by the environment (browser or Node.js) and handle tasks like setTimeout, DOM events, HTTP requests, etc.
Task Queue (or Callback Queue): When asynchronous functions complete their operations (via Web APIs), their callbacks are placed in the task queue, waiting to be executed.
Microtask Queue: This queue holds promises and other microtasks. These are executed before the next rendering phase, right after the current call stack is empty.

The event loop continuously checks the call stack and the task queues. If the call stack is empty, it pushes the first task from the task queue (or microtask queue) onto the stack for execution. This cycle is what allows asynchronous operations to occur in JavaScript.

Synchronous vs. Asynchronous Code

Consider the following code snippet:

console.log('First');
setTimeout(() => {
  console.log('Second');
}, 0);
console.log('Third');

What happens here?

console.log('First') is executed immediately and prints "First".
setTimeout schedules its callback to run after 0 milliseconds. However, even with a delay of 0, the callback isn’t executed immediately. Instead, it’s added to the task queue.
console.log('Third') is executed next, printing "Third".
Once the call stack is empty, the event loop picks the callback from the task queue and executes it, printing "Second". Thus, the output is:

First
Third
Second

This demonstrates how asynchronous operations, even those with a 0ms delay, are managed by the event loop.

Macro Tasks vs. Micro Tasks

Not all tasks are created equal. The event loop handles two primary types of tasks:

Macro Tasks: Include tasks like setTimeout, setInterval, and I/O events.
Micro Tasks: Include promise callbacks (.then(), .catch(), etc.) and operations like process.nextTick() in Node.js.

Example: Promises and Microtasks

Consider this code snippet:

console.log('Start');
setTimeout(() => {
    console.log("SetTimeout")
}, 0)
Promise.resolve().then(() => {
    console.log('Promise');
});
console.log('End');

Execution Breakdown:

"Start" is logged first.
setTimeout schedules its callback to run after 0 milliseconds. However, even with a delay of 0, the callback isn’t executed immediately. Instead, it’s added to the task queue.
The promise is resolved immediately, and its callback is queued in the microtask queue.
"End" is logged next.
After the current call stack is empty, the event loop processes the microtask queue and logs "Promise".

The output is:

Start
End
Promise
SetTimeout

Micro tasks are processed immediately after the current code execution, even before any macro tasks, which is why the promise's log appears after "End" but before any pending setTimeout callbacks.

Practical Implications

Understanding the event loop is crucial for writing efficient and bug-free asynchronous code. Here are a few takeaways:

Non-blocking UI: By deferring long-running operations to the event loop, you can keep your UI responsive.
Order of Execution: Recognizing the difference between synchronous code, macro tasks, and microtasks can help you predict the order in which your code executes.
Avoiding Pitfalls: Common pitfalls, such as misunderstanding the timing of setTimeout or promises, can lead to bugs. A solid grasp of the event loop helps in debugging and optimizing performance.

Real-Life Example: Live Chat Application

Imagine you’re using a live chat application on your smartphone. As you type a message, the app simultaneously listens for new incoming messages. Behind the scenes, the event loop is hard at work:

User Input: Your typing is handled immediately and synchronously.
Message Reception: Incoming messages from friends or colleagues arrive asynchronously. The event loop places these message updates in the task queue.
UI Responsiveness: Even if there’s a delay due to network latency, the chat interface remains smooth and responsive because the event loop ensures that each task (typing, receiving messages, rendering updates) is handled in order without blocking the other.

This scenario illustrates how the event loop can manage multiple asynchronous tasks, keeping the app interactive while waiting for external data.

Wrapping Up

The JavaScript event loop is a powerful concept that enables asynchronous programming in a single-threaded environment. By managing the call stack, task queues, and the microtask queue, it ensures that your code executes efficiently and without blocking the main thread.

Tricky Question for You

Before you go, here’s a challenging question to test your understanding of the event loop. What will be the output of the following code?

console.log("Start")
for (var i = 0; i < 4; i++) {
    setTimeout(() => {
        console.log(i);
    }, 0)
}
console.log("End")

Think about how variable scoping with var interacts with asynchronous callbacks in the event loop. Share your answer in the comments below and let’s discuss the intricacies of JavaScript together!

Happy coding, and keep exploring the wonders of JavaScript!

CORS Nightmares: The One Missing Protocol That Broke Everything 😅

NoobDev — Fri, 31 Jan 2025 19:37:56 +0000

Introduction

If you've ever built a web application with a separate frontend and backend, chances are you've encountered the infamous CORS error. It's one of those issues that seem simple at first but can turn into a nightmare if not configured correctly.

Recently, while working on a personal project with FastAPI (backend) and React (frontend), I ran into a CORS issue. Everything worked fine individually in production—frontend on Vercel, backend, Redis, and PostgreSQL on Render. But when my frontend made a simple request to the backend, I was greeted with the dreaded message:

Access to fetch at 'http://backend-url' from origin 'http://frontend-url' has been blocked by CORS policy.

At first, I thought, "Okay, I just need to tweak my CORS configuration and I'll be good to go." Turns out, the real issue was a missing https:// in my environment variable.

✅ STEP 1: My CORS configuration looked Fine

I had already configured CORS middleware in FastAPI

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://frontend-url.com"],  
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Everything seemed fine, but the CORS error persisted.

🔍 STEP 2: Debugging Everything But Finding Nothing 🤯

I started checking different things:
✅ Ensured the frontend was sending the correct Origin header.
✅ Confirmed that preflight (OPTIONS) requests were handled properly.
✅ Checked if WebSockets were being blocked due to CORS.
✅ Looked at browser network logs and backend logs.

Yet, nothing changed. The same error haunted me.

🤦‍♂️ Step 3: The Silly Mistake That Wasted Hours 🤦‍♂️

After hours of debugging, I finally noticed the issue:

👉 I had added frontend-url.com in my environment variable on Render WITHOUT the https:// protocol.

This is how I set up the env variable:

ALLOWED_ORIGIN=frontend-url.com # Missing https://

But my fronted was making a request from:

Origin: https://frontend-url.com

Since CORS policies are strict about exact matches, my backend wasn't recognizing the request's Origin header, causing it to be blocked.

🚀 Step 4: The Simple Fix

Once I included https:// protocol in the env variable, everything worked instantly:

ALLOWED_ORIGINS=https://frontend-url.com

and after restarting my backend server, the CORS issue was completely resolved! 🎉

Key Takeaways 🚀

CORS is case-sensitive and scheme sensitive (http:// ≠ https://).
Always check how your environment variables are stored and ensure that they match the frontend exactly.
Debugging CORS? Start simple. Check your headers, preflight requests, and environment configuration first.
Sometimes, the hardest bugs are caused by the smallest mistakes.

Ever lost hours over a tiny mistake? Share your worst debugging nightmares below! 👇