Curso JS - MultiChannel
Curso JS - MultiChannel
Variables y Scope
● Var:
○ Alcance: Tiene alcance de función. Esto significa que si se declara dentro de
una función, no es accesible fuera de esa función.
○ Hoisting: Las declaraciones de var se elevan al principio de su contexto de
ejecución, pero su inicialización no.
○ Reasignación: Se puede reasignar y redeclarar dentro del mismo ámbito.
● Let:
○ Alcance: Tiene alcance de bloque. Esto significa que solo es accesible
dentro del bloque {} en el que se declara.
○ Hoisting: Acceder a ellas antes de su declaración resulta en un error de
referencia.
○ Reasignación: Se puede reasignar, pero no redeclarar dentro del mismo
ámbito.
● Const:
○ Alcance: Tiene alcance de bloque, igual que let.
○ Hoisting: Acceder a ellas antes de su declaración resulta en un error de
referencia.
○ Reasignación: No se puede reasignar ni redeclarar. La variable debe ser
inicializada en el momento de su declaración.
Scope (Alcance)
● Global Scope: Variables declaradas fuera de cualquier función o bloque tienen
alcance global y son accesibles desde cualquier parte del código.
● Function Scope: Variables declaradas dentro de una función con var tienen alcance
de función y no son accesibles fuera de esa función.
● Block Scope: Variables declaradas dentro de un bloque {} con let o const tienen
alcance de bloque y no son accesibles fuera de ese bloque.
Incremento
Incrementa el valor de una variable en 1.
Decremento
Decrementa el valor de una variable en 1.
Concatenación de cadenas
La concatenación de cadenas en JavaScript es el proceso de unir dos o más cadenas para
formar una nueva cadena.
● Operador de Concatenación (+):
● Template Literals: Las plantillas de literales, introducidas en ES6, permiten la
interpolación de variables y expresiones dentro de una cadena utilizando la sintaxis
${} dentro de backticks (`).
Comparaciones
● Mayor que(>):
● Mayor igual que(>=):
● Menor que(<):
● Menor igual que(<=):
● Igualdad(==): Compara dos valores para ver si son iguales, realizando conversión
de tipos si es necesario
● Igualdad estricta(===): Compara dos valores para ver si son iguales, realizando
conversión de tipos si es necesario
● Diferencia(!=):
Truthy
Falsy
Operadores lógicos
● AND (&&): Devuelve true si ambas expresiones son verdaderas.
○ Ejemplo: true && false devuelve false.
● OR (||): Devuelve true si al menos una de las expresiones es verdadera.
○ Ejemplo: true || false devuelve true.
● NOT (!): Invierte el valor booleano de una expresión.
○ Ejemplo: !true devuelve false.
● Nullish Coalescing(??): se utiliza para proporcionar un valor predeterminado
cuando una expresión es null o undefined. Es útil para manejar valores que pueden
ser nulos o indefinidos sin caer en falsos positivos con otros valores falsy como 0, ''
(cadena vacía), false, etc.
If else
La estructura de control if...else en JavaScript se utiliza para ejecutar bloques de código
basados en condiciones. Permite tomar decisiones en el flujo del programa dependiendo de
si una condición es verdadera o falsa.
Switch case
La estructura switch en JavaScript se utiliza para ejecutar uno de varios bloques de código
basados en el valor de una expresión. Es una alternativa a múltiples sentencias if...else if
cuando se comparan valores específicos.
El uso de break es crucial para evitar que el código "caiga" a través de los casos siguientes.
Sin break, el programa ejecutará todos los bloques de código siguientes hasta encontrar un
break o llegar al final del switch.
While / Do While
● While: El bucle while en JavaScript se utiliza para ejecutar un bloque de código
repetidamente mientras una condición especificada sea verdadera. Es útil cuando no
sabes de antemano cuántas veces necesitas iterar.
● Do While: El bucle do...while es similar a while, pero garantiza que el bloque de
código se ejecute al menos una vez antes de evaluar la condición.
En resumen, el bucle while y do...while son útiles para ejecutar un bloque de código
repetidamente mientras una condición sea verdadera, con la diferencia de que do...while
garantiza al menos una ejecución del bloque de código.
Tipos de For en JS
● For: Se utiliza para iterar un número específico de veces. Es útil cuando conoces el
número exacto de iteraciones.
● For in: Se utiliza para iterar sobre las propiedades enumerables de un objeto. No se
recomienda iterar sobre arrays debido a que también itera sobre las propiedades
heredadas.
● For of: Se utiliza para iterar sobre elementos de objetos iterables como arrays,
strings, mapas, conjuntos, etc.
● ForEach: Es un método de los arrays que ejecuta una función para cada elemento
del array. No puede ser interrumpido con break o continue.
Funciones
Las funciones son bloques de código reutilizables que realizan una tarea específica. Pueden
recibir parámetros y devolver un valor. Las funciones ayudan a organizar y estructurar el
código, haciéndolo más modular y fácil de mantener.
Las funciones también pueden ser definidas como expresiones y asignadas a variables.
Funciones anónimas
Las funciones anónimas en JavaScript son funciones que no tienen un nombre explícito. Se
utilizan comúnmente como argumentos para otras funciones, como en callbacks, o se
asignan a variables. Las funciones anónimas pueden ser definidas utilizando la sintaxis de
función tradicional o la sintaxis de función flecha.
● Funciones:
● Arrow Functions:
Callbacks
un callback es una función que se pasa como argumento a otra función y se ejecuta
después de que la función principal haya completado su tarea. Los callbacks son
fundamentales para manejar operaciones asíncronas, como solicitudes HTTP,
temporizadores y eventos.
Closures
Un closure en JavaScript es una función que recuerda el entorno léxico en el que fue
creada, incluso después de que esa función haya terminado de ejecutarse. Esto significa
que una función interna tiene acceso a las variables y parámetros de su función externa,
incluso después de que la función externa haya finalizado.
● setInterval:
● resolve: Marca una promesa como cumplida y pasa un valor a los manejadores de
éxito.
● reject: Marca una promesa como rechazada y pasa un motivo a los manejadores de
fallo.
● then: Maneja el resultado de una promesa resuelta.
● catch: Maneja el resultado de una promesa rechazada.
● finally: Se ejecuta independientemente de si la promesa se resuelve o se rechaza.
Promise.All
Es un método estático de la clase Promise en JavaScript que se utiliza para ejecutar
múltiples promesas en paralelo y esperar a que todas se resuelvan o a que alguna se
rechace. Este método devuelve una nueva promesa que se resuelve cuando todas las
promesas en el iterable dado se han resuelto, o se rechaza cuando alguna de las promesas
se rechaza.
Comportamiento
● Si todas las promesas se resuelven, Promise.all se resuelve con un array de los
valores resueltos en el mismo orden en que las promesas fueron pasadas.
● Si alguna promesa se rechaza, Promise.all se rechaza inmediatamente con el motivo
del primer rechazo encontrado.
Async / Await
● Async: Se utiliza para declarar una función asíncrona. Una función marcada con
async devuelve una promesa automáticamente. Si la función devuelve un valor, la
promesa se resuelve con ese valor. Si la función lanza una excepción, la promesa se
rechaza con el valor lanzado.
● Await: Solo se puede usar dentro de una función async. Se utiliza para esperar a
que una promesa se resuelva. await pausa la ejecución de la función asíncrona y
espera a que la promesa se resuelva o se rechace. Luego, reanuda la ejecución de
la función y devuelve el valor resuelto.
Métodos para Cadenas
● indexOf
● slice
● split
● trim
● startsWith
● endsWith
● includes
● replace
● toString
● isFinite
● isInteger
● toExponential
● entries
● values
● keys
● JSON
● hasOwnProperty
● freeze
Métodos para Arreglos
● filter
● map
● reduce
● find
● includes
● sort
● splice
● reverse
● isArray
Clases
Una clase se define utilizando la palabra clave class, seguida del nombre de la clase.
Dentro de la clase, se define un constructor y métodos.
● Constructor: El método constructor es un método especial para crear e inicializar un
objeto creado con una clase. Solo puede haber un método especial con el nombre
constructor en una clase.
● Método: funciones que se definen dentro de una clase y pueden ser llamados en las
instancias de esa clase.
● Herencia: Las clases pueden heredar de otras clases utilizando la palabra clave
extends. El método super se utiliza para llamar al constructor de la clase padre.
● Getter: Los getters permiten definir una propiedad que se calcula cuando se accede
a ella. Se definen utilizando la palabra clave get.
● Setter: Los setters permiten definir una propiedad que se ejecuta cuando se intenta
modificar su valor. Se definen utilizando la palabra clave set.
Módulos
● Export:
● Import:
Fechas
Spread/Rest operator
El operador Spread/Rest en JavaScript utiliza los tres puntos (...) y tiene dos usos
principales: el operador de propagación (spread) y el operador de rest (rest). Ambos se
utilizan para trabajar con arreglos y objetos de manera más flexible y concisa.
● Operador de Propagación (Spread): El operador de propagación se utiliza para
expandir elementos de un arreglo u objeto en otro contexto, como en una llamada a
función, un arreglo o un objeto.
● Operador de Rest (Rest): El operador de rest se utiliza para agrupar el resto de los
elementos en un arreglo u objeto. Es útil en la desestructuración y en la definición de
parámetros de funciones.
Optional Chaining
Es una característica que permite acceder a propiedades de objetos anidados de manera
segura, sin tener que verificar explícitamente si cada nivel del objeto existe. Utiliza el
operador ?.. El operador ?. se coloca entre el objeto y la propiedad a la que se desea
acceder. Si el objeto es null o undefined, la expresión devuelve undefined en lugar de lanzar
un error.
Destructuring
El desestructuring (desestructuración) en JavaScript es una sintaxis que permite extraer
valores de arreglos o propiedades de objetos y asignarlos a variables de manera más
concisa y legible.
● Desestructuración de Arreglos
● Desestructuración de Objetos
● Desestructuración Anidada
● Renombrar Variables
● Desestructuración en Parámetros de Función
Introducción al DOM
En JavaScript, el DOM (Document Object Model) es una interfaz que permite a los
desarrolladores interactuar y manipular el contenido y la estructura de los documentos
HTML y XML.
● querySelector
● querySelectorAll
● getElementById
● createElement
● appendChild
● innerHTML
● classList.remove
● classList.add