Entre las "curiosidades" de Javascript, destaca que no es un lenguaje tipado, es decir, puedes declarar una variable asignando un valor numérico y, después, cambiar a cadena u otro tipo de datos.
Es por eso que los operadores tratarán de convertir los elementos involucrados para que todos tengan el mismo tipo, excepto cuando se usan operadores de comparación estricta.
En el caso de mayor que y menor que, se usa un algoritmo abstracto de comparación relacional que, de acuerdo al manual, se puede resumir en:
- Primero, los objetos son convertidos a valores primitivos, usando Symbol.toPrimitive(), con preferencia hacia
number
- Si los dos valores son cadenas, serán comparados como tal, con base en los valores de código Unicode que contengan
- Areglos y objetos: El manual no lo menciona, pero primero se aplica el método
.toString()
para obtener una representación como cadena y comparar
- De lo contrario, Javascript trtará de convertir a valores numéricos:
- Valores booleanos: Verdadero será convertido a 1 y falso a cero
- Valor nulo: Será convertido a cero
- Valor no definido (undefined): Será convertido a NaN (No es un Número)
- Cadena: Convertida de acuerdo a los valores que contengan, pero será NaN si contiene caracteres no numéricos
- Si cualquiera de los valores es NaN, el resultado siempre será falso
- De lo contrario, serán comparados como valores numéricos
// Operador mayor que y menor que
console.log(5 < '10'); // Verdadero, el segundo elemento se pudo convertir a número
console.log('9' < '10'); // Falso, la comparación se realizó como cadena (9 aparece en tabla de caracteres depués de 1)
console.log('a' < 10); // Falso, la conversión de 'a' es NaN
console.log(10 < '123z'); // Falso, la conversión de '123z' es NaN
console.log(['a', 4] < ['b', 2]); // Verdadero, ambos fueron convertidos a cadena y 'a,4' es menor que 'b,2'
console.log({a: 1} < {b: 2}); // Falso, ambos son iguales [object Object]
console.log({a: 1} > {b: 2}); // Falso, ambos son iguales [object Object]
console.log({a: 1}.toString() == {b: 2}.toString()); // Verdadero, ambos son iguales [object Object]
Entonces, en el ejemplo que pones en tu pregunta: Hay un elemento numérico y el otro pudo convertirse también a número sin problema, por eso la evaluación es correcta.
Solo por agregar un poco más sobre el comportamiento de operadores y saber lo que pasa con arreglos y objetos:
El operador de adición evalúa si los operandos son numéricos (o se pueden convertir a número) para realizar una suma, de lo contrario, los tratará (o forzará) como cadena.
// Operador de adición
console.log('a' + 5); // a5
console.log(5 + '3'); // 53
console.log(false + true); // 1
console.log([1, 2, 3] + [4, 5, 6]); // 1,2,34,5,6
console.log({a:1, b:2} + {c:3, d:4}); // [object Object][object Object]
console.log(1 + 2); // 3
console.log(3.1416 + 6); // 9.1416
console.log(Number(5) + Number('3')); // 8
console.log(Number({a:1, b:2}) + Number({c:3, d:4})); // NaN
valorInicializado
es un number, al usar el operador de comparación automáticamente hace un parse a number la cadena, si es caso no lo pueda convertir devolvería un NaN, que al ser comparado con cualquier numero te devolvería false.