viernes, 8 de abril de 2022

JavaScript 2 ( Operadores & Tipos de datos )


Los operadores permiten manipular el valor delas variables, realizar operaciones matemáticas con sus valores y comparar variables entre otras cosas.De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.

DOCUMENTACIÓN NO OFICIAL PERO OFICIAL DE JS
 https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators

Operadores de asignación
Operadores de comparación
Operadores aritméticos
Operadores bit a bit
Operadores lógicos
Operadores de cadena
Operador condicional (ternario)
Operador coma
Operadores unarios
Operadores relacionales
 
/*
 var numero1 = 5
 var numero2 = 8
 var operacion = numero1 + numero2
 alert("La suma de los dos numeros es: "+operacion)
 
 var numero1 = 5
 var numero2 = 8
 var operacion = numero1 - numero2
 alert("La suma de los dos numeros es: "+operacion)
 
 var numero1 = 5
 var numero2 = 8
 var operacion = numero1 / numero2
 alert("La suma de los dos numeros es: "+operacion)
 
 var numero1 = 5
 var numero2 = 8
 var operacion = numero1 % numero2     //Muestra el resto
 alert("La suma de los dos numeros es: "+operacion)
 */


TIPOS DE DATOS 

Figura 1. Tipos de datos en JavaScript

Tipo primitive

STRINGS

  //La manera formal de crear un string sería
 let saludo = new String("Hola Mundo");  //Pero no es necesario.
let cadenaDeTexto_1 = "Hola BienVenido";
let cadenaDeTexto_2 = 'A CÓDIGO GEEK'
 console.log(cadenaDeTexto_1 , cadenaDeTexto_2);

Algunos métodos de cadenas de texto:

charAt(índice): Devuelve el character que hay en la posición indicada como índice

indexOf(character,desde): Devuelve la posición de la primera aparición de un character indicado por parámetro en un string. Si no encuentra el character devuelve -1, tiene un Segundo parámetro opcional, sirve para indicar a partir de que posición queremos inicar la búsqueda.

lastIndexOf(caracter, desde): Como el anterior, pero devuelve la última posición de aparición del caracter indiciado.

Replace(substring_a_buscar, nuevoStr): reemplaza porciones del texto por otro texto. No se efectúa el reemplazo si que se devuelve el resultado de hacer el reemplazo.

Ejemplos:

 //NUMERO DE CARACTERES DE UNA CADENA
 console.log(
    cadenaDeTexto_1.length,
    cadenaDeTexto_2.length
 );
 //FORZAR A MAYUSCULAS O MINÚSCULAS
 console.log(cadenaDeTexto_1.toUpperCase(), cadenaDeTexto_2.toLocaleLowerCase())
 
 //ENCONTRAR SUBCADENAS DENTRO DE UNA CADENA
 let cadenaDeTexto_3 ="Esta es una cadena de texto de ejemplo, luego usando métodos vamos a buscar algún texto dentro de este mismo texto";
  //busquemos la palabra dentro
  console.log(unacadena.includes("dentro"));  //ME DEVIELVE TRUE POR QUE dentro está en unaCadena
 
//SEPARAR PALABRAS DE MI CADENA indicando donde separar
console.log(cadenaDeTexto_3.split("-")); 
 
//CONCATENACIÓN
 let marca ="BMW";
 let modelo ="SERIE 7";
 let coche;
 console.log(
     "La marca es: "+marca+" El modelo es: "+modelo
 )

Desde 2015 con la llegada de ES6 podemos hacer uso de las Template Strings. Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrutadas, con ellas podemos usar cadenas de caracteres de más de una línea y funcionalidades de interpolación.

Se delimitan  con comillas invertidas   ` `  y pueden contener marcadores, identificados por el signo de dollar $ y entre llaves; (${espresión})

Ejemplo Template Strings:

  let coche2 = `lA MARCA DE MI COCHE ES ${marca} Y EL MODELO ES ${modelo}`
  console.log(
    coche2                //esto es muy util para generar código html dinámicamente
)


NÚMEROS

/*
Number es un objeto primitivo envolvente que permite representar y manipular valores numéricos cómo 37 o -9.25.
 El constructor Number contiene constantes y métodos para trabajar con números. Valores de otro tipo pueden ser
  convertidos a números usando la función Number()
*/
 
 let x = 4;
 let ynew Number(2);
 let z = 9.25;
 let j = "4.8";
 
 console.log(
     x,
     y
     z.toFixed(1)  //redondea los decimales a 1
 )
   //MÉTODO PARSEINT devuelve la parte entera
   console.log(parseInt(z));
 
 //MÉTODO PARSEFLOAT devuelve la parte decimal pero este inprime tanto la parte entera como la decimal
   console.log(parseFloat(z));
 
 //DE CADENA DE TEXTO A NÚMERO
 console.log(typeof j);  //EL MÉTODO typeof me indica que tipo de dato es ene ste caso d es string
 //Para poder trabajar con el número j que me lo han pasado como cadena debo transformarlo a número esto lo consigo con PARSEINT
 //si no hago esto no me sumará sino que me concatenará el numero con la cadena de texto.
 console.log(z + parseInt(j));  //Así si me devuelve la suma  y se hay decimales el parseint solo la parte entera 
 
 console.log(c parseFloat(d));

::::::::::::::::::::::::::::BOOLEANOS::::::::::::::::::::::::::::::::

 let verdadero = true;
 let falso = false;
 console.log(typeof verdaderotypeof falso);
 //https://developer.mozilla.org/es/docs/Glossary/Truthy
 

:::::::::::::::::::::::::Null Undefined NaN:::::::::::::::::

TANTO NULL COMO UNDEFINED REPRESENTAN DATOS QUE NO TIENEN VALOR, LA DIFERENCIA ES QUE UNDEFINED REPRESENTA UN VALOR QUE NO HA SIDO INICIALIZADO, MIENTRAS QUE NULL SI ESTÁ INICIALIZADO PERO A UN VALOR NULO.

 
 
 let indefinida;  //ESTA VARIABLE AHORA ES UNDEFINED
 console.log(indefinida);
 
 //Ahora vamos a inicializar una variable con el valor nulo
 let nulo = null;
 console.log(nulo);
 
 //NaN (Not a Number) es útil, por ejemplo cuando queremos hacer operaciones aritméticas entre
 //distintos tipos de datos que no son numéricos.
 
 let noEsUnNumero = "Hola" * 3.7;
 console.log(noEsUnNumero);  //Nos indica que no se puede hacer porque no es un número



JavaScript 1 (var | let | const)

 



A una variable var podemos cambiarle su valor en cualquier momento durante la ejecución de nuestro programa

//var vs let vs const
var edad = 10
var edad = 20
console.log(edad)  //en la consola veremos que su valor es 20

Esto tiene el problema de que cuando tenemos mucho código y ya hemos declarado muchas variables, podemos sin querer repetir el nombre de una variable y darle un valor distinto sin darnos cuenta, lo cuá nos dará muchos dolores de cabeza.

Para solucionar esto apareció el tipo de variable let, que no me permite declarar dos veces la misma variable:

let tuedad = 20
let tuedad = 30   //Esto me dará error en la consola Uncaught SyntaxError: Identifier 'tuedad' has already been declared
 console.log(tuedad)
 

Pero cuidado let si que nos permite modificar su valor, solo debo quitar el let y puedo cambiar el valor de la variable:

let tuedad = 20
 tuedad = 30   //Esto me dará error en la consola Uncaught SyntaxError: Identifier 'tuedad' has already been declared
 console.log(tuedad)

Ahora en la consola veremos que tuedad vale 30

Sigamos entendiendo var, veamos el siguiente ejemplo:

var edad = 10
 
if(true){
    var edad = 20
    console.log(edad)
}
 
console.log(edad)

Como podemos ver, dentro de un if, cambiamos el valor de edad, si hacemos console .log dentro del if veremos que edad ha cambiado su valor inicial de 10 a 20, y si hacemos otro console.log fuera del if, vemos que el valor sigue siendo 20. 

Podría darse el caso de que nostros quisiéramos modificar el valor de la variable edad únicamente dentro del condicional pero que fuera de él, eda siguiera valiendo 10 como declaramos al principio.

En este caso usaríamos let del siguiente modo:

let edad = 10
 
if(true){
    let edad = 20
    console.log(edad)
}
 
console.log(edad)

Ahora edad vale 20 sólo dentro del condicional, y 10 fuera de él:

Figura 1. Salida por consola del código anterior

En realidad lo que está ocurriendo es que edad dentro del if solo existe ahí en scope del condicional, una vez que el flujo sale esa edad muere y la edad de fuera del if la que vale 20 es la única que existe.

CONSTANTES

El ejercio anterior funcionaría igual con const, es decir las constantes también viven dentro de un scope:

const edad = 10
 
if(true){
    const edad = 20
    console.log(edad)
}
 
console.log(edad)

Entonces const y let funcionan de manera similar y viven dentro de los scopes. Const tampoco me permite declarar dos veces la misma variable, como let

const edad = 10
const edad = 20

 si hacemos esto el resultado es el mismo que si lo hiciéramos con let, error:

Figura 2. Salida por consola del error de declarar dos veces la misma constante

La diferencia entre let y const es que con let podíamos sobreescribir una variable, con const no podemos ni siquiera hacer esto.

const edad = 10
edad = 20

 esto nos arrojaría error. La única excepción es que si tenemos un array, podemos moficiar el valor del array con el método push.

const arrayNumero = [102030]
arrayNumero.push(40)
console.log(arrayNumero)

Esto sucede igual con los objetos.

const persona = {
    nombre: 'Juan',
    edad: 40
}
persona.edad = 21
console.log(persona)  //Ahora juan tiene 21

 

Figura 3. Salida por consola de modificar una constante mediante las propiedades de objeto.

Estas son las principales diferencias entre var, let y const. Por lo general no usaremos var porque let lo está reemplazando casi por completo ya que mejora a var.