duduromeroa.com

Javascript

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


Esta sección aportará con estudio y análisis de la sintaxis del lenguaje de programación Javascript, creado en sus fases iniciales por el estadounidense Brendan Eich en 1995.



NÚMERO INFINITY

El infinito matemático. El valor Infinity es de alcance global (ver explicación de ese término más abajo). mdm web doc dice: "cualquier numero operado por Infinity da como resultado Infinity, y cualquier numero divido por Infinity da como resultado cero."

console.log( 10 / Infinity);
// 0

console.log( 10 + -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



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ínea no necesariamente ordenada. Se los declara encerrados en comillas dobles o simples: cualquiera de esos siempre que coincidan el inicio y el final.

var saludo = "Hola Dudú";
document.write(saludo);

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 sí mediante el signo '+'.

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

console.log(saludo + mes + "del " + year);

Y también pueden usarse plantillas literales. Estas recogen un valor computable y lo muestran en un sitio del string. Todo valor dentro de ${ } 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

Permite y expresa resultados estados binarios. Es decir, solo dos posibilidades. JS los determina como true (verdad) y false (falso).

// Dos variables declaradas pero sin valor
var a;
console.log(a == a);
// True -> Son iguales

/* 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

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.

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

var x = 1 + 0 + NaN;
console.log(x);
// --> NaN

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

Otra forma de entender el comportamiento del operador de negación simple '!=' es la siguiente: devolverá true siempre que los operandos comparados no sean iguales.

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

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

// Los valores NO SON iguales
console.log(1 != '2');
// --> True

IGUALDAD SIMPLE

El operador de igualdad simple (==) (abajo) compara el contenido de dos o más valores. Para Antani y Stefanov[4] este operador convierte los valores comparados al mismo tipo, y envia true cuando ambos tipos coinciden. Cuando los valores a comparar son cero o vacíos, la igualdad simple dará false, excepto cuando lo vacío sea igual a false.

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

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

IGUALDAD ESTRICTA

Compara valor y tipo de dato. No convierte a similar tipo –como la igualdad estricta–. A la igualdad estricta también se le llama comparación de igualdad y de tipo.

 // 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



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);
/* 0. Aquí JS convierte 
–a conveniencia–
null en cero */

console.log(8 + undefined);
// NaN --> not a number

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

 // 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:

// || --> or
/* Mostrará el primer valor porque ese valor
puede sí puede ser convertido a true */
var ambos = "hola" || "duduromeroa";
console.log(ambos);

// Utilidad de null
/* Cuando el primer valor no pueda ser convertido a true, mostrará el segundo */
var ambos = null || "duduromeroa";
console.log(ambos);

// && --> and
/* Mostrará el segundo operador porque ese puede
ser convertido a true */
var ambos = "hola" && "duduromeroa";
console.log(ambos);



OPERADORES LÓGICOS

Confirman si uno o más valores presentan estados booleanos 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
// (Mayor que o menor que)
console.log(10 > 100);
// False

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

// Operador && (estado Y estado)
/* Dos estados son true solo 
si AMBOS son true. De lo contrario,
será false. */
console.log(true && false);
// false

// Operador || (estado ó estado)
/* Dos estados son true si 
al menos uno de esos estados
es true. Dos estados falsos
es false. */
console.log(true || false);
// true

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

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

/* Cuando el valor de 'a' sea true o false, 
se devolerá siempre 'true'. Puesto que 
el operador OR '||' acepta como verdad 
cualquiera de esas condiciones. */

var a = false;

console.log(
a == true || 
a == false || 
a == true || 
a== false);

// --> Siempre True.

 // Siempre enviará 'true' cuando el operador sea OR '||'
console.log(true || "something");

// Prevalecerá el dato 'something' y no el booleano
console.log( true && "something");

// Si ambos son 'true'. el operador Y '&&' enviará true.
console.log(true && "something" && 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

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í:
  • evaluarTRUE ? seObtieneEsto : estoNO;
  • evaluarFALSE ? estoNO : seObtieneEsto;
// condicion ? valor1 : valor 2
// condicion ? valorTrue : valorFalse
var precio = 1000 > 900 ? "Costoso" : "Barato";
console.log(precio);
// Costoso

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

/* evaluar1, evaluar2 y resultado usan 
un solo var, separados por comas, 
para generar variables */
var evaluar1 = true,
    evaluar2 = true,

// Si evaluar1 es true, muestra primer true
// Si evaluar1 es false, muestra segundo true
// Si ambos son false, muestra evalua false
    resultado = evaluar1 ? "Primer true" : 
evaluar2 ? "Segundo true" : "Evalua false";

// Invocar variable resultado
console.log( resultado );

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")
      );

/* CUIDADO!! En este contexto, 
cerrar console.log() 
con ; da error. */-
Evaluador ternario en Javascript. www.duduromeroa.com, Guayaquil - Ecuador

Subir al inicio Seguir a la parte tercera