Debounce | JS coding challenge

Nik Dyankov — Fri, 21 Mar 2025 07:43:25 +0000

In the world of frontend development, performance and user experience are everything. If you’ve ever typed into a search input and noticed it firing a request on every keystroke, you know how annoying and inefficient that can be.

That’s where debounce comes in.

Today, I’ll walk you through a JS coding challenge that covers what debounce is, how it works, and why it’s incredibly useful in real-world applications.

🚦 Too many function calls!

Imagine building a search bar. Each time a user types a letter, you want to send a request to fetch search results. But if they type fast, you could be firing off dozens of requests per second, many of which are useless because the user hasn’t finished typing yet.

You need a way to wait until the user stops typing for a bit before running the function.

That’s what debouncing does.

🧠 What Is Debounce?

Debounce is a technique to limit the rate at which a function is executed. Instead of firing the function immediately, you delay its execution until a specified time has passed since the last time it was invoked.

If it gets called again before the delay ends, the timer resets.

🛠️ Writing a Debounce function

Here’s an example implementation of debounce in JavaScript:

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    // Clear the previous timeout, so the function won't be executed yet
    clearTimeout(timeoutId);

    // Set a new timeout to call the function after the delay
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

This function takes two arguments:

func: the function you want to debounce.
delay: how long to wait (in ms) after the last call before executing func.

💡 Debounced search as use case

// Example function that will be debounced
function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

// Create a debounced version of the searchQuery function
const debouncedSearch = debounce(searchQuery, 300);

// Now you can call debouncedSearch, and it will only trigger searchQuery once the user stops typing for 300ms.
debouncedSearch('apple');
debouncedSearch('apple pie');
debouncedSearch('apple pie recipe');

Even though debouncedSearch is called three times quickly, searchQuery will only run once, with 'apple pie recipe', after the user has stopped typing for 300 milliseconds.

🧪 Why it matters?

Using debounce helps with:

Reducing API calls or expensive operations
Improving performance
Smoothing the user experience

It’s especially useful for:

Search inputs
Resizing events
Scrolling performance
Auto-saving forms

🧼 TL;DR

Debounce delays a function until a period of inactivity.
It helps avoid redundant or expensive executions.
Easy to implement, and extremely powerful in frontend apps.

Next time you build a feature that responds to frequent user input debounce it. Your app (and your backend) will thank you.

✍️ Got thoughts or improvements on this debounce implementation? Drop a comment or let’s connect!

Is number odd or even | JS coding challenge

Nik Dyankov — Tue, 10 Dec 2024 09:24:48 +0000

Determining whether a number is odd or even is a fundamental programming task. In JavaScript, there are several ways to accomplish this. This tutorial will walk you through two simple methods - using the modulus operator and leveraging the bitwise AND operator.

1. Using the modulus operator

The modulus operator (%) is the most common and straightforward way to determine if a number is odd or even. This operator returns the remainder of a division operation.

Key concept:

A number is even if it is divisible by 2 (remainder = 0).
A number is odd if it is not divisible by 2 (remainder ≠ 0).

Code example:

function isEven(number) {
    return number % 2 === 0;
}

function isOdd(number) {
    return number % 2 !== 0;
}

// Usage:
console.log(isEven(4)); // true
console.log(isOdd(4));  // false
console.log(isEven(7)); // false
console.log(isOdd(7));  // true

Output:

isEven(4) returns true, meaning 4 is even.
isOdd(7) returns true, meaning 7 is odd.

2. Using the bitwise AND operator

The bitwise AND operator (&) can also be used to determine odd or even numbers. This approach relies on binary representation: