LESSON 84 OF 410 · CONDITIONAL STATEMENTS

Not Operator in JavaScript: How ! Works

The logical not operator (!) is used to invert the value of a boolean condition. For example:

7 <= 10 // Evaluates to true
!(7 <= 10) // Evaluates to false

12 != 12 // Evaluates to false
!(12 != 12) // Evaluates to true

!true // Evaluates to false

It is oftenly used with boolean variables:

let hungry = true;
if(!hungry) {
    console.log("I can wait a little longer");
}
else {
    console.log("I need food!");
}

!hungry evaluates to false, so we enter the else and print "I need food!".

Assignment
Follow the Coding Tutorial and play with the not operator.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2

Guided

Ctrl + Enter to check

JAVASCRIPT · CONDITIONAL STATEMENTS

Not Operator in JavaScript, explained

What the not operator does

The logical NOT operator, written !, flips a boolean. If the value after it is true, the result is false, and the other way round. It goes in front of the value, which is why it is called a unary (one-operand) operator. Use it when you want a condition to mean "this is not the case": if it is not sunny, if the list does not contain the item, if the name is empty.

console.log(!true);        // false
console.log(!false);       // true
console.log(!(7 <= 10));   // false, because 7 <= 10 is true
console.log(!(12 != 12));  // true, because 12 != 12 is false

When the operand is a comparison or any longer expression, wrap it in parentheses. !(7 <= 10) negates the whole comparison. Without the parentheses, ! would apply only to the 7.

Using ! in an if statement

The most common use is to run code when a boolean variable is false. Reading if (!hungry) as "if not hungry" keeps the code close to plain English:

let hungry = true;
if (!hungry) {
    console.log("I can wait a little longer");
} else {
    console.log("I need food!");
}

Here !hungry is false, so the else branch runs and the output is I need food!.

! works on any value, not only booleans

JavaScript first converts the operand to a boolean, then flips it. Eight values convert to false and are called falsy: false, 0, -0, 0n (a zero BigInt), the empty string "", null, undefined and NaN. Everything else is truthy, including "0", "false", [] and {}.

console.log(!0);          // true
console.log(!"");         // true
console.log(!null);       // true
console.log(!undefined);  // true
console.log(!NaN);        // true
console.log(!"hi");       // false
console.log(![]);         // false
console.log(!{});         // false
console.log(!"0");        // false

This makes ! handy for checking that something is missing or empty:

const user = {};
if (!user.email) {
    console.log("no email");
}

Reading a property that doesn't exist gives undefined, which is falsy, so the message prints. Be careful when 0 or an empty string is a valid value, such as a score of 0: !score is also true for it, and you may need score === undefined instead.

Double negation: !!

Writing ! twice converts any value to its boolean equivalent: the first ! flips it into a boolean, the second flips it back. !!"hi" is true, !!0 is false and !![] is true. It does the same as Boolean(value), which is often easier to read. !! is not a separate operator; it is just two ! in a row.

Toggling a flag

Assigning the negation back to the variable switches it between two states:

let on = false;
on = !on;
console.log(on); // true
on = !on;
console.log(on); // false

Not equal and "not in" checks

Many searches for "not" in JavaScript are really about one of these:

Not equal: != and !== are comparison operators that contain a !. 5 != "5" is false, because != converts types before comparing. 5 !== "5" is true, because !== does not convert. As with ===, prefer !==. You can also write !(a === b).
Not in an array: !arr.includes(4) is true when arr does not contain 4. For [1, 2, 3], !arr.includes(2) is false.
Not a key of an object: !("b" in obj) is true when obj has no key "b". The parentheses matter: !"b" in obj would apply the ! to "b" first, giving false in obj, which looks for the key "false". Note that in also finds inherited properties.

Combining ! with && and ||

The ! operator binds tighter than && and ||, and tighter than comparisons such as ===. So !a && b means (!a) && b, not !(a && b). Add parentheses to say which one you mean:

let a = true, b = false;
console.log(!a && b);     // false: (!a) && b
console.log(!(a && b));   // true:  not (a and b)

A negated group can be rewritten with De Morgan's laws: !(a && b) equals !a || !b, and !(a || b) equals !a && !b. With a = true and b = false, !(a && b) and !a || !b are both true, and !(a || b) and !a && !b are both false. Use whichever form reads better.

Common mistakes

Leaving out parentheses around a comparison. With x = 3, !x === 5 negates x first and compares false to 5, which gives false. What you meant, !(x === 5), gives true. Better still, write x !== 5.
Treating every falsy value as "missing". !0 and !"" are true. If 0 or an empty string is a valid value, compare to undefined or null directly.
Double negatives that hide the meaning. if (!isNotReady) is hard to read. Name flags positively, such as isReady, and negate when you need to.
Using ! where else would do. if (a) { ... } if (!a) { ... } is a long way of writing if (a) { ... } else { ... }.

The lesson's exercise

The code starts with a variable isSunny set to true. The task has two steps.

Print "Learning to code" when it is not sunny. Write an if whose condition is !isSunny, and call console.log("Learning to code") inside it.
Print "Going to the beach" otherwise. Add an else branch on the same line as the closing brace of the if, and print the second message. The else runs when !isSunny is false, which means it is sunny.

let isSunny = true;

if (!isSunny) {
    console.log("Learning to code");
} else {
    console.log("Going to the beach");
}

Because isSunny is true, !isSunny is false, and the output is Going to the beach. Change the first line to let isSunny = false; and the output becomes Learning to code.

Key takeaways

! turns true into false and false into true.
On other values it converts to a boolean first: 0, "", null, undefined and NaN become true when negated, and most other values become false.
Put parentheses around anything longer than a single value: !(a === b).
!!value converts a value to a boolean, and !== is the safe "not equal".

Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.

Start learning free