Si no estás muy familiarizado con este operador, sólo voy a decirte que se utiliza para invertir valores booleanos ¿Cómo sería esto?

Si tuviésemos dos variables con valores true o false:

let v1 = true;
let v2 = false;

console.log(v1);
console.log(v2);

Hasta acá nada nuevo, algo que se aprende en salita de jardín en programación. Pero podemos hacer algo como esto:

let v1 = !true;
let v2 = !false;

console.log(v1);
console.log(v2);

En realidad lo que estamos haciendo es invertir el valor boolean; es decir, lo que vale true, se invierte a false, y lo que vale false, a true.

Patrón toggle

«toggle», que se podría traducir como palanquear o alterar, tiene como un efecto de interruptor o botón. Si un velador está apagado al pulsar en el botón se enciende, pero si está encendido, se apaga:

let boton_encendido = false;

const cambiarEstadoBoton = () => {
    //toggle.
    boton_encendido = !boton_encendido;
    console.log(`El valor del botón es: ${boton_encendido}`);
}

//Al hacer click en la página cambia el estado del botón de true a false y viceversa.
document.addEventListener("click", cambiarEstadoBoton);

Como podemos ver en este último caso tenemos una variable:

let boton_encendido = false;

Y cada vez que se llama a la función cambiarEstadoBoton() se invierte el valor de la misma. Es decir que podemos evitar hacer algo como esto:

if(boton_encendido == true){
    boton_encendido = false;
}else{
    boton_encendido = true;
}

Reemplazándolo por:

boton_encendido = !boton_encendido;

Al igualar la variable por su valor actual, pero con con el signo «!» por delante invertimos su valor.

Condicionales

Cuando escribimos el código para un condicional, mucha/os desarrolladora/es suelen hacer algo cómo:

if( vx == true ){
    //Entra si vx es true.
}

O hacer lo propio para verificar si «vx» es false:

if( vx == false ){
    //Entra si vx es false.
}

Esto último si bien no está mal, es un poco redundante. Por ejemplo en el primer caso, en el que verificamos si la variable/constante es true, directamente podemos escribir:

if( vx ){
    //Entra si vx es true.
}

Esto se debe a que la condición ya de por sí verifica que lo que ingresamos entre los paréntesis devuelva un valor true.

Si no me creés podés probar algo como esto:

let n1 = 1;
let n2 = 1;

//Si n1 es igual a n2 va a guardar true, sino false.
let iguales = (n1 === n2);

console.log(iguales);

Por tanto, si nosotros queremos probar si una variable/constante es true, podemos incluir la variable sin necesidad del (== true)

En cambio si queremos verificar si una variable/constante es false, y teniendo en cuenta el uso del operador de negación «!», podés hacer lo siguiente:

if( !vx ){
    //Entra si vx es false.
}

Otros usos

También se verifica si una variable string está vacía de la siguiente forma:

let variable_string = "";

if(!variable_string){
    console.log("La variable está vacía");
}

Si una variable numérica es 0 (cero):

let variable_numerica = 0;

if(!variable_numerica){
    console.log("La variable es cero");
}

Incluso comprobar si una variable es nula:

let variable_null = null;

if(!variable_null){
    console.log("La variable es nula");
}