What Are Feature Flags and How Do You Use Them?

A Light Switch for Your Code

A feature flag is like a light switch inside your app's code. It lets you turn a feature on or off without changing any other code or pushing a new version to users. Flip the switch on, and the feature works. Flip it off, and it disappears — even though the code is still there.

Think of it this way: imagine you built a new search box for your website. Normally, you'd have to finish it, test it, and ship it all at once. With a feature flag, you can ship the code but leave the switch off. Later, when you're ready, you flip the switch on for everyone. Or just 10% of users. Or just your team.

Feature flags are just conditional statements — small pieces of code that check a setting before running. The setting can be changed anytime, even after the app is live.

Shipping Becomes Safer

Before feature flags, deploying new code was nerve-wracking. A bad release meant rolling everything back, which could take hours and frustrate users. Feature flags take that risk away. If something breaks, you just flip the switch off. The fix takes seconds, not hours.

It also means you can ship early and often. Instead of waiting until a feature is 100% done, you ship the code and turn it on for a small group first. You learn from real users before rolling it out to everyone. This is how modern software teams move so fast.

From Code to Control

Here's how it works in practice:

Popular tools for managing feature flags include LaunchDarkly, Statsig, and Flagsmith. Some teams even build simple ones using a config file or database.

A Simple Feature Flag in Code

Here's what a feature flag looks like in JavaScript. The flag is just a simple if statement that checks a setting before showing the new feature.

// Feature flag: is the new search turned on?
const NEW_SEARCH_ENABLED = true;

// Old search — always runs
function showOldSearch() {
  document.getElementById('search').placeholder = 'Search...';
}

// New search — only runs if the flag is on
function showNewSearch() {
  if (NEW_SEARCH_ENABLED) {
    document.getElementById('search').placeholder = 'Search with AI...';
    document.getElementById('search').style.border = '2px solid #6ee7b7';
  } else {
    showOldSearch();
  }
}

// Run on page load
showNewSearch();

Change NEW_SEARCH_ENABLED from true to false and the old search comes back — no other code changes needed. In a real app, this flag would be stored remotely so you can change it without touching the code at all.

Knowledge Check

Test what you learned with this quick quiz.