What the Double Exclamation Mark (!!) Does in JavaScript

By the end of this page, you will understand that !! in JavaScript is a common shorthand for converting any value into a real boolean: true or false. You will see how it works, why it is useful, how it relates to JavaScript truthy and falsy values, and when it improves readability versus when it may be unnecessary.

In JavaScript, !!value is a shorthand way to convert any value into a boolean.

Here is the idea:

• The first ! negates the value and converts it to a boolean.
• The second ! negates that boolean again.
• The final result is the original value's truthiness, but as an actual boolean.

Example:

!!"hello"   // true
!!0          // false
!!null       // false
!![]         // true

This matters because JavaScript often allows values to be used in conditions without being real booleans.

For example:

if ("hello") {
  console.log("runs");
}

The string "hello" is not literally true, but JavaScript treats it as truthy.

Sometimes you want to store or return a real boolean instead of relying on truthy/falsy behavior. That is where !! is useful.

In your example:

this.vertical = vertical !== undefined ? !!vertical : this.vertical;

• If vertical was provided, the code converts it to either true or false.
• If vertical was not provided, it keeps the existing value of this.vertical.

So !!vertical ensures the assigned value is a strict boolean rather than something like 1, "yes", or null.

Think of !! as a boolean stamp machine.

• You put any JavaScript value into the machine.
• The machine checks whether the value counts as truthy or falsy.
• It stamps the value as either:
  • true
  • false

Examples:

• "text" goes in → stamped true
• 0 goes in → stamped false
• [] goes in → stamped true
• null goes in → stamped false

So !! does not preserve the original value. It only preserves whether JavaScript considers that value truthy or falsy.

The basic syntax is:

!!value

Example 1: Converting a string to a boolean

const name = "Ada";
const hasName = !!name;

console.log(hasName); // true

Because "Ada" is a non-empty string, it is truthy.

Example 2: Converting an empty string

const name = "";
const hasName = !!name;

console.log(hasName); // false

An empty string is falsy.

Example 3: Checking numbers

console.log(!!1);   // true
console.log(!!0);   // false
console.log(!!-5);  // true

Only 0 is falsy here.

Example 4: Common usage in objects

function setOptions(enabled) {
  return {
    enabled: !!enabled
  };
}

console.log(setOptions("yes")); // { enabled: true }
console.log(setOptions(0));      // { enabled: false }

Example 5: Your original pattern

this.vertical = vertical !== undefined ? !!vertical : this.vertical;

This means:

• if vertical was passed in, convert it to true or false
• otherwise, keep the old value

A more expanded version would be:

if (vertical !== undefined) {
  this.vertical = Boolean(vertical);
} else {
  this.vertical = this.vertical;
}

And an even cleaner equivalent is:

if (vertical !== undefined) {
  this.vertical = Boolean(vertical);
}

Consider this code:

const value = "hello";
const result = !!value;
console.log(result);

Step by step:

1. value is assigned "hello".
2. The first !value runs.
   • "hello" is truthy.
   • Negating a truthy value gives false.
3. The second ! runs on that result.
   • !false becomes true.
4. result is true.
5. console.log(result) prints true.

Now try a falsy value:

const value = 0;
const result = !!value;
console.log(result);

Step by step:

1. value is 0.
2. The first !value runs.
   • 0 is falsy.
   • Negating it gives true.
3. The second ! runs.
   • !true becomes false.
4. result is false.

Trace table

!! shows up in real code whenever developers want a guaranteed boolean value.

1. Normalizing configuration options

const config = {
  debug: !!userInput.debug
};

If userInput.debug is 1, "on", or another truthy value, debug becomes true.

2. Checking whether data exists

const hasToken = !!localStorage.getItem("token");

This converts the result into true or false for cleaner logic.

3. UI state flags

const isLoggedIn = !!currentUser;

If currentUser is an object, isLoggedIn becomes true. If it is null, it becomes false.

4. API response handling

const hasItems = !!response.items?.length;

If the array has items, this becomes true. If the length is 0 or missing, it becomes false.

5. Form validation checks

const isNameProvided = !!form.name.trim();

This is useful for determining whether the user entered non-empty text.

In real projects, developers often use !! in places where values need to be normalized before being stored, returned, or passed around.

Common patterns

Guard-style boolean flags

const isReady = !!data;
if (!isReady) return;

This makes the intent clear: isReady is a real boolean.

Validation results

const isValidEmail = !!email && email.includes("@");

This can help ensure the first part is treated as a boolean check.

Derived state in UI code

const showSpinner = !!loading;
const hasError = !!error;

This is common in frontend code where components depend on strict true/false values.

Option normalization

function createButton(options) {
  return {
    disabled: !!options.disabled,
    primary: !!options.primary
  };
}

Explicit return values

function hasPermission(user) {
  return !!user && !!user.role;
}

This ensures the function returns true or false, not an object or undefined.

When teams avoid it

Some codebases prefer Boolean(value) because it is more readable for beginners:

const isOpen = Boolean(value);

Both are valid. Team style guides decide which is preferred.

Mistake 1: Thinking !! checks for only null or undefined

!! checks truthiness, not just whether a value exists.

console.log(!!0);        // false
console.log(!!"");       // false
console.log(!!null);     // false
console.log(!!undefined);// false

If you specifically want to test for undefined, write that directly:

value !== undefined

Mistake 2: Assuming all objects are false when empty

In JavaScript, even empty arrays and empty objects are truthy.

console.log(!![]); // true
console.log(!!{}); // true

If you want to know whether an array has elements, check .length:

const hasItems = array.length > 0;

Mistake 3: Using !! when you need the original value

Broken idea:

const username = !!inputValue;

Now username is true or false, not the text.

Use !! only when you really want a boolean.

Mistake 4: Confusing !!value with value != null

These are different:

!!0          // false
0 != null    // true

If you need to check whether a value is not null and not undefined, use:

value != null

Mistake 5: Overusing it in conditions

This is usually unnecessary:

if (!!user) {
  console.log("User exists");
}

This is simpler:

if (user) {
  console.log("User exists");
}

Use !! mainly when assigning or returning a boolean value.

!!value vs Boolean(value)

const a = !!input;
const b = Boolean(input);

These behave the same. The difference is style:

• !!value is shorter
• Boolean(value) is often clearer to beginners

!!value vs direct condition

if (value) {
  // use value
}

This is usually better than:

if (!!value) {
  // use value
}

because if already performs truthy/falsy checking.

!!value vs strict checks

If your logic depends on a specific value being present, use a specific comparison instead of !!.

value !== undefined
value !== null
value === true

These answer different questions than truthiness conversion.

!!value

Meaning

Converts any JavaScript value into a real boolean.

How it works

• First ! converts the value to boolean and flips it
• Second ! flips it back
• Result: true or false

Common truthy values

!!"hello"   // true
!!42         // true
!![]         // true
!!{}         // true

Common falsy values

!!false      // false
!!0          // false
!!""         // false
!!null       // false
!!undefined  // false
!!NaN        // false

Equivalent form

Boolean(value)

Good use cases

• Store a boolean flag
• Return a boolean from a function
• Normalize config values

Avoid when

• You need the original value
• A plain if (value) already does the job
• You need a specific check like !== undefined

Remember

• [] and {} are truthy
• !! checks truthiness, not emptiness
• !!0 is false
• !!"0" is true

Is !! an actual JavaScript operator?

Not as a single special operator. It is just the logical NOT operator ! used twice.

Is !!value the same as Boolean(value)?

Yes. They both convert a value to true or false based on truthiness.

Why do developers use !! instead of Boolean()?

Usually for brevity. Some developers prefer Boolean() because it is easier to read.

Does !! check whether a value exists?

Not exactly. It checks whether a value is truthy or falsy. That is different from checking specifically for null or undefined.

Why is !![] true in JavaScript?

Because arrays are objects, and all objects are truthy in JavaScript, even if they are empty.

Should I use !! inside every if statement?

Usually no. if already does truthy/falsy conversion automatically.

What does !!vertical mean in the original code?

It means: convert vertical into a real boolean before assigning it.

Can !! be confusing for beginners?

Yes. If readability matters more than brevity, Boolean(value) may be a better choice.

• Truthy and falsy values — !! depends entirely on how JavaScript treats values in boolean contexts.
• Logical NOT operator (!) — !! is simply the ! operator used twice.
• Ternary operator (condition ? a : b) — the original code uses a ternary expression together with !!.
• Boolean type — !! converts values into the boolean type.
• undefined checks — the sample code first checks whether vertical was provided.
• Type coercion — !! is a form of explicit coercion to boolean.
• Guard clauses — developers often use boolean conversion when creating guard conditions and early returns.