Question
I came across this JavaScript code and do not recognize the !! syntax:
this.vertical = vertical !== undefined ? !!vertical : this.vertical;
It appears to use !! like an operator. What does !! do in JavaScript, and why would someone use it in code like this?
Short Answer
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.
Concept
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:
Mental Model
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:
truefalse
Examples:
"text"goes in → stampedtrue0goes in → stampedfalse[]goes in → stampedtruenullgoes in → stampedfalse
So !! does not preserve the original value. It only preserves whether JavaScript considers that value truthy or falsy.
Syntax and Examples
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
Step by Step Execution
Consider this code:
const value = "hello";
const result = !!value;
console.log(result);
Step by step:
valueis assigned"hello".- The first
!valueruns."hello"is truthy.- Negating a truthy value gives
false.
- The second
!runs on that result.!falsebecomestrue.
resultistrue.console.log(result)printstrue.
Now try a falsy value:
const value = 0;
const result = !!value;
.(result);
Real World Use Cases
!! 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 . If it is , it becomes .
Real Codebase Usage
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.
};
}
Common Mistakes
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
.(!!{});
Comparisons
| Pattern | What it does | Returns | Best use |
|---|---|---|---|
!!value | Converts value to its truthy/falsy boolean | true or false | Short boolean conversion |
Boolean(value) | Converts value to boolean explicitly | true or false | More readable conversion |
if (value) | Checks truthiness in a condition | Not a value conversion | Branching logic |
value !== undefined | Checks only for undefined |
Cheat Sheet
!!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:
trueorfalse
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
FAQ
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?
Mini Project
Description
Build a small JavaScript settings normalizer that accepts raw user options and converts selected values into real booleans. This demonstrates why !! is useful when input values may come from forms, APIs, or configuration objects in inconsistent formats.
Goal
Create a function that returns a clean settings object where boolean-like fields are always stored as true or false.
Requirements
- Create a function that accepts an options object.
- Return an object with boolean fields such as
darkMode,notifications, andcompactLayout. - Use
!!to normalize incoming values. - If a field is missing, default it to
false. - Print the result for at least two different inputs.
Keep learning
Related questions
Deep Cloning Objects in JavaScript: Methods, Trade-offs, and Best Practices
Learn how to deep clone objects in JavaScript, compare structuredClone, JSON methods, and recursive approaches with examples.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers with clear examples.
How JavaScript Closures Work: A Beginner-Friendly Guide
Learn how JavaScript closures work with simple explanations, examples, common mistakes, and practical use cases for real code.