Programación para web (2/8): tipos de valores o datos, operadores.

NÚMERO INFINITY

Para mdm web doc es el número constantemente incrementado desde el cero hasta el infinito. Es decir, no existirá número MAYOR que ese valor. El -Infinity en cambio es el número más pequeño desde 0 hasta el infinito negativo; es decir, nunca existirá un número MENOR que ese.

console.log( Infinity - Math.PI);
// Infinity

console.log( 10 / Infinity);
// 10 / para lo que nunca acaba: 0

// 10 sumado al número más pequeño existente
console.log( 10 + -Infinity);
// R. -Infinity (seguirá siendo más pequeño)

console.log(Infinity);
// Infinity

console.log( Math.PI / Infinity);
// 0

console.log( 0 + Infinity);
// R. -Infinity

console.log(  Infinity / Infinity );
// NaN -> no se indentifica como un número

// JS lo reconoce como un valor numérico
console.log(typeof Infinity);
// Number

// No existe un número de menor valor que -Infinity
console.log(-0.00000000000000000000000000001  < -Infinity);
//-> false

TIPOS DE VALORES: STRINGS

En inglés, el término string refiere a elementos ordenados en una línea. En programación son caracteres –números o letras– en secuencia líneal no necesariamente ordenada. Siempre se los inicializa encerrados en comillas dobles o simples.

var saludo = "Hola Dudú";
console.log(saludo);
// Hola Dudú

console.log("Hola" - "hi");
// NaN

Dentro de las comillas también se pueden usar caracteres especiales '\n' (nueva línea) y '\t' (tabulador).

var saludo1 = "Hola Dudú \nespero estes bien ";
console.log(saludo1);
/* Hola Dudú 
espero estes bien */

var saludo2 = "Muchas \tgracias ";
console.log(saludo2);
// Muchas   gracias 

var saludo3 = "De \t__nada ";
console.log(saludo3);
// De       __nada 

Los strings pueden ser concatenados entre si mediante el signo '+'.

var saludo = "Hola, ";
var mes = "hoy es septiembre ";
var year = 2022;

console.log(saludo + mes + "del " + year);
//-> Hola, hoy es septiembre del 2022

PLANTILLAS LITERALES –LITERAL TEMPLATE-

Y también pueden usarse plantillas literales. Estas recogen un valor computable y lo muestran en un sitio determinado del string. Todo eso dentro de comillas tipo invertidas `valorAlfanumerico ${aquiValor}` será un string. Y este respetará su ubicación.

// Literal template: 
// Aquí las comillas son inclinadas
// Hacerlo con comillas dobles mostrará TODOS los caracteres
var dato = `La mitad de 100 es ${100/2}`;
console.log(dato);
// La mitad de 100 es 50

// La ubicación del valor de la plantilla literal se mantiene
var letras = "aaaaaa!"
var saludo = `Hol${letras}`;
console.log(saludo);
// Holaaaaaa!

// Si se separa, se mostrará separado
var saludo2 = `Hol       ${letras}`;
console.log(saludo2);
// Hol       aaaaaa!

Si deseas agregar un emoji a un string desde JS, también debes insertarlo dentro de comillas dobles. En cambio, para insertar un emoji dentro de un texto de HTML simplemente agrega la expresión alfanumérica correspondiente. Revisa este vínculo para seleccionar el emoji, e inserta la expresión dentro de tu texto.

// DESDE JS. Inserta un emoji
// Usa el caracter especial \u{}
document.write( "\u{1F600}" );
// Cara sonriente 

TIPOS DE VALORES: BOLEANOS

Expresa estados binarios; es decir solo dos posibilidades. JS los determina como true (verdad) y false (falso).

En Javascript

// Si algo Y todo es false, entonces todo es false
console.log(false && true); 
console.log(true && false);  
console.log(false && false);
// false

// Si todo Y todo es true, entonces todo es true
console.log(true && true);  // true

console.log("--");

// Aunque haya true, todo es true
console.log(false || true);
console.log(true || false);
console.log(true || true);

// Si todo es false, entonces todo es false
console.log(false || false); // false

// Combinado
console.log( (true && false) || (false && false) );
//-->  False

/* Variable declarada pero sin inicializar */
var a;
console.log(a == a);
// True 

console.log(a == null);
// True

console.log(a == 0);
// False

//---

/* Dos variables declaradas, 
una sin valor y otra 
con un valor vacío */
var a;
var b = ""
console.log(a == b);
// False -> No son iguales

//---

// Decimal menor a 1
console.log(0.999999999999999 < 1);
// True

//---

//** FUNCIÓN: Da dos parámetros */
function compare(a,b){

// Variable guarda resultado booleano
/* Se compara con la doble igualdad si 
ambos valores son iguales */
let booleano = a == b; 

// Devuelve valor de 'booleano'
return console.log( a + " es igual a "+ b + ": "+ booleano);
}
// Se insertan dos argumentos
compare(9,90);
// -> 1 es igual a 10: false

Ocurre algo especial con el valor NaN (Not a Number) –abajo–. Marijn Haverbeke [1] dice: "Se supone que NaN denota el resultado de una computación sin sentido; y como tal, no es igual al resultado de ninguna otra computación sin sentido."(p, 18). Primero: nada puede ser igual a dos valores cuyo tipo se desconoce; y segundo, operar con NaN siempre resultará NaN.

OPERACIONES QUE DAN NaN
• Conversiones numéricas fallidas
• Operación donde el resultado no es un número real: Math.sqrt(-1)
• Cuando un valor no válido se desea representar como número

// Ambos valores no son iguales así mismo
console.log(NaN == NaN);
// False

INVERTIR ESTADOS BOOLEANOS

El operador de negación simple '!=' invierte un estado booleano a otro.

var num = 33;
// invierta
console.log(num != 33);
// -> False

var frase = true;
if (frase == true) 
// Invierta
console.log(!frase);
// -> False

var frase = false;
if (frase == false) 
// Invierta (lo falso a...)
console.log(!frase);
// -> True

// Invierta
console.log(!true);
// -> False

// Invierta lo falso
console.log( !(!true) );
// -> True

// Invierta false
// invierta false (se convierte en true)
// Invierta true (queda false)
console.log( !(!(!true)) );
// -> False

/* Aunque sea verdad 
y los datos sean del mismo 
tipo, invierta */
console.log(1 + 1 !== 2);
// -> False

El operador de negación simple '!=' invertirá a false aquellos valores que al inicio sean true.

// Los valores son iguales
console.log(1 != 1);
// --> false

// Los valores son iguales
console.log(1 != '1');
// --> false

/* OJO: Cuando los valores SON naturalmente false, 
invertir dará TRUE */
console.log(1 != '2');
// --> True

IGUALDAD SIMPLE O NO ESTRICTA

El operador de igualdad simple '==' compara solamente el valor entre dos valores, pero no compara el tipo. Para Antani y Stefanov[4] este operador convierte los valores comparados al mismo tipo y envia true cuando ambos valores coinciden. Cuando los valores a comparar son cero o vacíos, la igualdad con false simple dará false.

var x = 0;
var y = -0;
var z = " ";

// Igualdad no estricta
// Solo evalúa valor
console.log(
x == false && // 0 igual a true
y == false && // -0 igual a true
z == false ); // La nada es igual a true
// --> true

// ---

// Vacio con false
console.log( " " == false);
//-> True

// Cero con false 
console.log(0 == false);
//-> True

// false y false
console.log(false == false);
//-> True

// Cero / cero no es igual afase
console.log(0 / 0 == false);
//-> False
// Cero dividido para cero es NaN

// NaN no es igual a false
console.log(NaN == false);
//-> False

IGUALDAD ESTRICTA

Compara valor y también el tipo de dato, ya que no convierte a similar tipo los valores comparados –como la igualdad no estricta–.

 // Dato numérico y dato alfanumérico no son iguales
console.log(1 === '1');
// --> false

// Dato numérico y Dato numérico son iguales
console.log(1 === 1);
// --> true

// No son iguales en valor ni en tipo de dato
console.log(10 === '10.1');
// --> false

// Cero no es igual a dato vacio
// " " es leído como string
console.log(0 === " ");
//-> False

// USANDO typeof
// ¿Qué tipo de dato es " " ?
console.log(typeof " ");
//-> String

// null no es igual a cero
console.log(null === 0);
//-> False

// null no es igual a cero
console.log(null === null);
//-> True

VALORES NULL Y UNDEFINED

Son valores que no contienen datos, pero informan del estado de ausencia de información funcional en variables. Para Marijn Haverbeke [1] null y undefined son valores parecidos, con diferencia solo en el tipo de dato. Ambos comunican que un valor esperado no ha sido hallado. Además, ambos reaccionan a TypeError cuando se accede a propiedades o métodos desde un valor null o undefined; ya sea mediante null.método o desde [null...].

Para JS, null es ausencia absoluta, pero solo cuando conviene. Y es imposible convertir undefined a número.

console.log(8 + null);
//-> 8

console.log(8 + undefined);
// NaN 

// Sin embargo, null !==0
console.log(null == 0);
// False

console.log(null + undefined);
// NaN 

// 100 elevado a null
console.log( 100 ** null);
// 1

 // Y operar con null da:
console.log(1 + null);
// --> 1

console.log(1 * null);
// --> 0

console.log(1 - null);
// --> 1

console.log(1 / null);
// --> Infinity

console.log(null / 1);
// --> 0

var x = undefined;
var y = null;

// Acceder --> x, y
console.log(x.Math.pow()); 
console.log(y.Math.pow()); 
/* TypeError: No se pueden 
leer propiedades en x, y */

Pero, si forzamos a JS para que null sea considerado un número, entonces null será número:

console.log( null >= 0);
// true

console.log( null <= 0);
// true

undefined también colabora para indentificar cuando una variable no ha sido alimentada con valor alguno:

 var dato;
/* Recordar: '!==' dará true si 
dato no es igual a undefined  */
if (typeof dato !== "undefined"){

/* Si 'dato' no es igual a undefined. 
Da true...*/
var alerta = "Hay un valor";
console.log(alerta);
} else {
/* Si dato ES IGUAL A undefined, 
da false y entra acá... */
console.log("Cuidado. Agrega valor");
}

Para JS, null y undefined tienen el valor de false cuando son evaluados únicamente con el operador de igualdad estricta (===) que evalua datos pero también el tipo PRECISO de datos.

var x, y = null;
var w, z = undefined;

// Igualdad estricta
console.log(x === false + y === false );
console.log(w === false + z === false );
// True -> null y undefined son false

// = = = = = = = = = = = = = = = = 
// D I F E R E N C I A S
// = = = = = = = = = = = = = = = = 

/* Representan el mismo dato no hallado */
console.log(null == undefined); // true

// PERO son de tipo diferente
console.log(null === undefined); // false

null es un valor vacío. Pero también es el resultado de no hallar un dato. Aunque JS lo reconoce como un type of object simplemente debería ser definido como tipo null.

En otras palabras, null se muestra cuando un dato no está definido, o no inicializado; o si existe, ese dato carece de tipo o valor alguno.

Por otro lado, undefined es una variable global; es decir, su acceso es permitido desde dentro de bloques de código.

Según Flanagan [3]undefined 'pinta' un valor con las siguientes características:

• Cuando el valor no esta inicializado
• Cuando el valor debe entregar datos pero el receptor no es hallado
• Cuando es un valor parámetro pero no ha sido ingresado como tal
• Cuando es un valor array pero no ha sido mencionado como return

¿Otra utilidad de null o undefined? Los operadores lógicos AND y OR pueden aprovecharse de ellos:

// **NULL Y OPERADORES LÓGICOS

// operador ||
/* Mostrarán el valor que sí pueda 
convertirse a true */
var a = null || "hola";
console.log(a);
//-> hola

var b = null || 100;
console.log(b);
//-> 100

// operador &&
/* Mostrará el valor 
NO convertible a true */
var c = null && "duduromeroa";
console.log(c);
//-> null

OPERADORES LÓGICOS

Confirman si uno o más valores presentan los dos únicos estados booleanos existentes –true o false, 1 o 0– según condiciones evaluadas.

Estos operadores también tienen precedencia:

• Primero se evaluará: mayor '>', menor '<' e igual '=='
• Luego se evaluará: operador Y '&&'
• Finalmente se evaluará: operador O '||'

// Igualdad. NO CONFUNDIR con asignación
console.log("hola" == "holaA");
// -> false

// ! (invertir estado booleano)
var a, b = 10;
console.log( a !== a);
// El primer estado es cierto
// -> false.

/* ERROR. El operador (!) solo
funciona CON el signo de igualdad (==)
 */
var a, b = 10;
console.log( a !> a);
// ERROR

Luego, los operadores lógicos pueden combinarse para evaluar condiciones más complejas:

// ||
// Enviará 'true' cuando haya al menos un true
console.log(true || "something");
//-> true

// &&
// Prevalecerá el dato 'something' y no el booleano
console.log( true && "something");
//-> something ( ¿porqué? )

// && &&
// Si ambos son 'true'. el operador '&&' enviará true
console.log(true && "something" && true);
//-> true

Luego, los operadores lógicos pueden combinarse para evaluar condiciones más complejas:

var a,b= 10;
var z = 10+10;
var y = 2;

console.log( (a == 10) && (z/2 == 10) || 
b/y == 5);
// a == 10 --> true
// z/2 == 10 --> true
// y == 2 --> true
// true && true || true = true

//-> TRUE

Otro operador es el ternario. mdn web docs dice: "es el único operador en JavaScript que tiene tres operandos. Es un atajo a la instrucción 'if'".

Su comportamiento se resume así:
• evaluaTRUE ? seObtieneEsto : estoNO;
• evaluaFALSE ? estoNO : seObtieneEsto;

// condicion ? valorTrue : valorFalse
var precio = 1000 > 10 ? "Costoso" : "Barato";
console.log(precio);
// Costoso

Otra posibilidad el evaluar condiciones ternarias múltiples o asociativas.

// ESQUEMA
evaluar1 ? "Devuelve-Si-es-True" : 
evaluar2 ? "Devuelve-Si-es-True" : 
"DevuelveFalse";

/* Una sola clave VAR sirve para inicializar 
el resto de identificadores separados con comas */
var evaluar1 = true, 
evaluar2 = true,
resultado = evaluar1 ? "Primer true" : 
evaluar2 ? "Segundo true" :
"Evalua false";

// Si evaluar1 es true, muestra primer true
// Si evaluar1 es false, muestra segundo true
// Si ambos son false, muestra evalua false

// Invocar variable resultado
console.log( resultado );
//-> Primer true

Otro ejemplo de múltiples evaluaciones ternarias:

var precio = 89;
/* Si el precio es mayor a 90 y menor a 100 */
precio > 90 && precio <100 ? (
// condición true
      console.log("Costoso") 
      ) : (
// condicion false
      console.log("Buen precio")
      );
//-> Buen precio 

OPERADORES LÓGICOS CON VALORES TIPO STRING

Ambos operadores || y && devolverán true o false según las siguientes condiciones:

/* Devolverá el primer true si lo encuentra, 
o el último operador si todos son falsos:  */
console.log(true || "cosilla");
// -> true

/* Sea true o false, devolverá el primer operador */
console.log("cosilla" || true || false);
// -> cosilla

// ----
/* Devolverá el primer false si lo encuentra, 
o el último operador si todos son true:  */
console.log(false && "cosilla");
// -> false

/* Devolverá el primer false si lo encuentra, 
o el último operador si todos son true:  */
console.log("cosilla" && true);
// -> true

/* Devuelve el último valor si todo es true*/
console.log(true && "cosilla" && true);
// -> "true"

/* RECORDAR */
/* Todo es false */
console.log(0 === true);
console.log(null === true);
console.log(NaN === undefined);
console.log(false === true);

/* Todo es true */
/* Caso especial: cuando es comparación solo de valor 
(doble igualdad) el cero es convertido a número; 
como cero es considerado falso, entonces la expresión da true  */
console.log("0" == false);
// -> true