Básicamente el problema está en la forma en que estás intentado aplicar la lógica condicional para filtrar tus elementos.
Es bastante común olvidar o no entender el concepto de álgebra booleana o Álgebra de Boole que hay subyacente cuando escribimos una estructura condicional, sin embargo una lectura rápida de la teoría y un par de ejemplos nos lo pueden aclarar.
Supongamos que deseamos filtrar de una lista de elementos aquellos que cumplen 2 condiciones particulares al mismo tiempo. Como ejemplo vamos a usar objetos con 2 atributos (left
y right
), con valores tipo Booleano:
{ left: <boolean>, right: <boolean> }
Si deseamos filtrar aquellos elementos que cumplan la condición que tanto left
como right
sean verdaderos (true
), podemos escribir el siguiente código:
let values = [
{left: true, right: true},
{left: true, right: false},
{left: false, right: true},
{left: false, right: false},
];
let filtered = values.filter(value => {
return value.left && value.right;
// podríamos usar comparación value.left === true
// pero dado que los valores son booleanos, en este caso no hace falta
});
console.log(filtered);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Como se observa, se devuelve el primer elemento de la lista ya que es el único que cumple la condición.
Supongamos ahora que deseamos filtrar aquellos elementos que cumplan la condición que left
es falso y right
es verdadero. Podríamos escribir la siguiente condición:
let values = [
{left: true, right: true},
{left: true, right: false},
{left: false, right: true},
{left: false, right: false},
];
let filtered = values.filter(value => {
return !value.left && value.right;
});
console.log(filtered);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Como se observa me devuelve el valor correcto, tal vez para entender un poco mejor la comparación que estamos haciendo lo podemos escribir de esta forma:
return value.left === false && value.right === true;
Donde esto: value.left === false
es equivalente a esto: !value.left
, por algo muy sencillo: el operador lógico de negación (!
) aplicado sobre un valor booleano: devuelve false
si el argumento es verdadero y devuelve true
en caso contrario.
Ahora vamos a analizar el caso que presentas en tu pregunta: queremos filtrar elementos que cumplan la siguiente condición: left
no debe ser verdadero (value.left !== true
) y right
no debe ser verdadero (value.right !== true
).
Nuestro primer impulso es escribir la siguiente sentencia condicional:
return value.left !== true && value.right !== true;
Ya que entendemos que vamos a devolver aquellos valores cuyo campo left
no es verdadero y a la vez su campo rigth
tampoco es verdadero. Vamos a probarlo:
let values = [
{left: true, right: true},
{left: true, right: false},
{left: false, right: true},
{left: false, right: false},
];
let filtered = values.filter(value => {
return value.left !== true && value.right !== true;
});
console.log(filtered);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
El resultado no es el esperado ¿Porqué?.
Si analizamos bien la condición desde un punto de vista un poco más lógico, estamos pidiendo que el valor de left
sea tal que su negación devuelva true
Y que el valor de right
sea tal que su negación también devuelva true
.
El único elemento que cumple dichas condiciones es aquel cuyos elementos left
y right
son ambos falsos.
Ahora que hemos interpretado bien lo que significa la condición usada, nos damos cuenta que no es lo que en principio queremos.
Resulta que hemos sido alcanzados por las Leyes de Morgan de la lógica proposicional. Donde sin pensarlo hemos pensado que la conjunción de las negaciones es igual a la negación de las conjunciones.
En matemática, sobre todo en teoría de grupos, la conjunción se refiere a la selección de todos los elementos de 2 conjuntos diferentes, tales que dichos elementos pertenecen a ambos conjuntos:

(Imagen tomada de Wikipedia - Diagrama de Venn)
En razonamiento formal, una conjunción lógica (ᐱ
) entre dos proposiciones es un conector lógico cuyo valor de la verdad resulta en cierto solo si ambas proposiciones son ciertas, y en falso de cualquier otra forma.
Por lo tanto, dado que el operador &&
es el operador de conjunción, estamos ante el caso planteado de que el resultado será verdadero si ambas proposiciones son verdaderas.
Realmente no es lo que estamos buscando. Si volvemos a plantear la proposición, quedaría así:
queremos todos los elementos, excepto aquel cuyos valores left
y right
son ambos verdaderos.
O dicho de otra forma, los elementos tales que NO tengan left
y right
verdadero.
Es decir, la sentencia condicional debe tener esta forma:
return !(value.left && value.right);
// o si preferimos usar el operador de igualdad:
return !(value.left === true && value.right === true);
En este caso estamos comparando los valores de left
y right
, si alguno de ellos es distinto de verdadero, el operador &&
devolverá false
. Luego al aplicar la negación sobre este resultado, obtendremos true
.
Por lo tanto, el resultado de la operación de conjunción &&
será verdadero sólo cuando left
y right
sean verdaderos, y al aplicar el operador !
obtendremos falso. Así, todos los elementos cuyos valores en left
y/o right
sean distintos de verdadero superarán el filtro y serán devueltos por nuestra función, quedando fuera sólo el elemento que nos interesa dejar fuera.
El código final se puede ver así:
let values = [
{left: true, right: true},
{left: true, right: false},
{left: false, right: true},
{left: false, right: false},
];
let filtered = values.filter(value => {
return !(value.left === true && value.right === true);
});
console.log(filtered);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Y siempre recuerda las Leyes de Morgan cuando necesites aplicar lógica proposicional:
La negación de la conjunción es la disyunción de las negaciones.
O lo que es lo mismo:
La negacion del AND
es el OR
de las negaciones:
!(A && B) <=> !A || !B

Y por otro lado:
La negación de la disyunción es la conjunción de las negaciones.
O lo que es lo mismo:
La negación del OR
es el AND
de las negaciones:
!(A || B) <=> !A && !B

Espero que esto te ayude a resolver el problema y te aclare un poco el tema sobre lógica proposicional.
return !(producto.talla === 5 && producto.id === 26);
. Prueba eso y comenta el resultado.