Condicionales
Arreglos
Funciones extra
Repaso
JS enrtre archivos
Var
Es una forma de declarar variables en JS, recordemos que var al ser global actualemnte no es recomendado
Ejemplo
var nombre = "Juan";
var edad = 23;
edad = "33"
Importante: Recordemos que podemos cambiar el valor de la viarable sin importa si esta previamente tenia otro tipo
Let
Es una forma de declarar variables en JS, y ahora es el reemplazo de var, debido a que let solo funciona en un ambito y no es global
Ejemplo
let nombre = "Juan";
let edad = 23;
let = "33"
Importante: Recordemos que podemos cambiar el valor de la viarable sin importa si esta previamente tenia otro tipo
Const
Es una forma de declarar variables en JS, pero estas son inmutables, es decir el valor asignado no puede ser cambiado
Ejemplo
const nombre = "Juan";
const edad = 23;
const apellido = "Perez"
If
Es una forma de declarar condiciones en JS, y si se cumple la conducion se puede ejecutar algo
Ejemplo
const edad = 18;
if (edad >= 18) {
console.log("Es mayor de edad")
}
Else - Else If
Es la contraparte del if, en caso la condicion del if no se cumpla automaticamente se ejecuta lo que esta dentro del else
Ejemplo
const edad = 18;
if (edad >= 18) {
console.log("Es mayor de edad")
} else {
console.log("Es menor de edad")
}
Importante: Evitemos el uso else, debemos pensar una alterniva al else solo usenlo si es necesario
Ejemplo
const edad = 18;
if (edad >= 18) {
console.log("Es mayor de edad")
} else if (edad === 15) {
console.log("Es usuario tiene 15")
}
Operadores
Vamos a revisar los distintos operadores que podemos en los if - else if
Ejemplo
&& : Significa Y
|| : Significa O
! : Significa la negacion, es decir lo inverso
=== : Para poder si 2 valores son iguales
> >= | < <= : Para poder comparaciones entre 2 valores
!== : Sirve para saber si 2 valores son distintos
Operador ternario
Un operador ternacio basicamete es un if de una linea ojo: Solo podemos ejecutar una linea de codigo dentro de la condicionde del operador ternario
Ejemplo
const nombre = "Juan";
nombre === "Juan" ? console.log("Lo encontramos") : console.log("No lo encontramos š¢")
Arreglos
Un arreglo es una coleccion de datos, recuerden que lo arreglos pueden contoner cualquier tipo de dato:
- string
- number
- boolean
- object
- function
Ejemplo
const arreglo = ["Pepe", 2, true, 90.4, 5];
console.log(arreglo);
Importante: Lo arreglo se empiezan a contar desde el 0, es decir el primer elemento de un arreglo tiene como indice al 0
- Length
Es la funcion la cual nos permite saber la cantidad de elementos que tiene un arreglo
Accediendo a un arreglo
Para acceder a un elemento de un arreglo podemos usar el indice del elemento que queremos acceder
Ejemplo
const arreglo = ["Pepe", 2, true, 90.4, 5];
- Accedemos al primer elemento -
console.log(arreglo[0]);
- Accedemos al segundo elemento -
console.log(arreglo[1]);
Push
Es la funcion la cual nos permite agregar un elemento al final de un arreglo.
Ejemplo
const arreglo = ["Pepe", 2, true, 90.4, 5];
arreglo.push(true);
arreglo.push({ nombre: "Juana", edad: 18 })
console.log(arreglo);
Function
Una funcion es una agrupacion de codigo que se puede ejecutar varias veces, es decir, una funcion puede recibir parametros y retornar valores. Recuerden que uno de lo objtivos de las funciones es retulizar el codigo
Importante: Si vemos que una accion se repite mas de una vez lo convertimos a una function
Ejemplo
function saludar(nombre) {
console.log(`Hola ${nombre}`);
}
// Es la forma es la que llamos a la funcion y le pasamos como parametro el nombre Juan
saludar("Juan");
Function Anonima
Una function anonima basicamente no tiene nombre, esta se suele guardar en una variable
Ejemplo
const saludar = function(nombre) {
console.log(`Hola ${nombre}`);
}
saludar("Juan");
Ejemplo 2
const saludar = (nombre) => {
console.log(`Hola ${nombre}`);
}
saludar("Juan");
Arrow Function
Un arrow function es una funcion de tipo la flecha la cual cumple con casi todo lo que hacer un function normal, sin embargo la diferencia entre una arrow funtion y una function normal es que en un arrow function el this no existe.
Ejemplo
const saludar = (nombre) => {
console.log(`Hola ${nombre}`);
}
saludar("Juan");
Arrow Function Inline
basicamente es un arrow que solo ejecuta un linea de codigo, ojo el return no hace falta porque esta implicito
Ejemplo
const saludar = nombre => console.log(`Hola ${nombre}`);
saludar("Juan");
Importante: Si tenemos solo un parametro en la funcion no hace falta poner los parentesis
Function in Function
El concepto de invocar una function dentro de otra es algo normal y muy usado, ustedes usar n functiones dentro de una function, de hecho es lo idea tratar de usar functiones para poder hacer que nuestro codigo este distribuido
const calcularMayorDeEdad = (edad) => {
const mayor = esMayor(edad);
return mayor
}
// function esMayor
const esMayor(edad) => edad >= 18 ? true : false
Objetos
Los objetos son una especie de variable la cual esta compuesta un key y un value, basicamente decir que un objeto es una entidad porque este tiene propidades
Ejemplo
const persona = {
nombre: "Juancito",
apellido: "Perez",
edad: 34,
domicilio: "Av siempre viva 123",
}
New Object
new Object() es una clase de JS la cual nos permite crear un objeto a partir de esta, es un poco y actualmente no es tan recomendado usarlo
Ejemplo
const laptop = new Object();
laptop.memoria = "512gb";
laptop.ram = 16;
laptop.marca = "DELL";
Leer Objetos
La forma de accede a la propiedad de un objeto es . ojo si tiene un un objeto dentro de otro objeto igual puede el . para navegar entre el objeto
const persona = {
nombre: "Juancito",
apellido: "Perez",
123: 34,
domicilio: "Av siempre viva 123",
}
// Imprimiendo la propiedad nombre
console.log(persona.nombre);
console.log(persona["123"]);
Como agregar una propiedad a un objeto
Ejemplo
const persona = {
nombre: "Juancito",
apellido: "Perez",
123: 34,
domicilio: "Av siempre viva 123",
}
// Agregando Pais y ciudad
persona.pais = "Peru";
persona.ciudad = "Lima";
Array de Objetos
Un array de objetos esta compuesta como padre al array y dentro el tenimos n cantidad de objetos
Ejemplo
const productos = [
{
nombre: "Juancito",
apellido: "Perez",
123: 34,
domicilio: "Av siempre viva 123",
},
{
nombre: "Juancito",
apellido: "Perez",
123: 34,
domicilio: "Av siempre viva 123",
},
]
toString()
Se encargar de convertir una variable de cualquier tipo al tipo string
Ejemplo
const numero = 10;
numero.toString()
includes()
Sirve para poder ver si existe un elemento en un array
Ejemplo
const mascotas = ["Perro", "Gato", "Conejo"]
mascotas.includes("Gato")
importante Recordemos que el includes retorna true si existe y false si no existe
Split
Sirve para convertir una variable a un array, split recibe como paremetro porque simbolo, letra, etc va a realizar la sepaciĆ³n de elementos
Ejemplo
"Hola-Mundo-Soy-Un-Programador".split("-")
//["Hola", "Mundo", "Soy", "Un", "Programador"]
+
El simbolo + viene a ser el reemplazo de parseInt() y sirve para transformar una variable a otra de tipo number
Ejemplo
const edad = "18";
// Estamos convirtiendo la variable de string a number
console.log(+edad)
toUpperCase()
Sirve para transformar un string a un string pero con todas las letras en mayuscula
Ejemplo
let nombre = "Pepe Perez";
// PEPE PEREZ
console.log(nombre.toUpperCase())
Math
Math es una libreria de JS la cual permite realizar operaciones matematicas como:
- Raiz Cuadrada
- Elevar a la potencia
- Redondear numeros
- Obtener numeros random
- Calcular logaritmos
Math.pow(2, 2)
// Esto significa 2 eleveado al cuadrado
Typeof
Muestra el tipo de datos de una variable
Ejemplo
const computador = "Macbook Pro M1"
// nos dice que es un stringconsole.log(typeof computador)
For
Es blucle y esto es una estructura repetitiva, es decir hacer algo muchas veces y ademas los bucles son usados para poder leer arrays, porque un bucle nos va a permitir leer cada elemento de forma idenpendiente
Ejemplo
for (let i = 0; i < 10; i++) {
console.log(i)
}
While
Es otro tipo de bucle que sirve para iterar arrays pero esta atado a una condicion y contador
Ejemplo
let contador = 0;
while (contador < 10) {
console.log(contador);
contador++;
}
Importante No se olviden de aumentar el contador porque si no, nuestras computadoras van a explotar
Map
Es un bucle que me permite iterrar array pero con la peculiardad de que este retorna un array
Ejemplo
const alumnos = ["Pepe", "Sultano", "Mengano"]
const resultado = alumnos.map((alumno, index) => console.log(index, alumno))
Recomendacion Cuando hagamos un map y este no solicite el parametro de elemento podemos usar el singular del arreglo.
alumnos => alumno
mascotas => mascota
computadoras => computadora
For Each
Sirve para iterar datos, sin embargo a diferencia del map este no retorna nada, es decir si yo guardo en una variable al forEacha esta variable sera undefined
Ejemplo
const alumnos = ["Pepe", "Sultano", "Mengano"]
alumnos.forEach((alumno, index) => console.log(index, alumno))
Filter
Es el hermano de map, porque es usando para poder filtrar en base a una condicion y este retorna un array
Ejemplo
const alumnos = ["Pepe", "Sultano", "Mengano"]
const alumnoFilter = alumnos.filter((alumno, index) => alumno === "Pepe"))
// Va a retornar con ["Pepe"]
Find
Es un iterador de bucles pero este solo retorna 1 resultado y este sera el primero que encuentre, es decir si en una lista tengo 2 o mas resultados este solo va a tomar el primero y sera el que devuelva
const alumnos = ["Pepe", "Sultano", "Mengano"]
const alumnoFind = alumnos.find((alumno, index) => alumno === "Pepe"))
// Va a retornar con Pepe como string porque solo sera un dato
findIndex
Sirve para poder encontrar la posicion de un elemente en un array, es decir este retorna el indice del elemento
Ejemplo
const alumnos = ["Pepe", "Sultano", "Mengano"]
const alumnoFindIndex = alumnos.findIndex((alumno, index) => alumno === "Pepe"))
// Va a retornar 0 porque es el indice que tiene Pepe
Script
Lo usamos para poder vincular nuestro js al html, debemos saber podemos acumular varios scripts y poder utilizar cada para guarda distintas funcion y variable lo cual nos va a servir para tener un codigo ordenado. Recuernde que podemos compartir variables y funciones siempre y cuando estos esten en el html
Ejemplo
script src="./archivo.js"
script src="./archivo2.js"
Si esta en ese orden uno puede usar las variable de archivo en archivo2, porque recuerden que para el navegador todo es solo un archivo