0% encontró este documento útil (0 votos)
23 vistas33 páginas

Curso JS - MultiChannel

Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
23 vistas33 páginas

Curso JS - MultiChannel

Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

¿Qué es JavaScript?

● ECMAScript: Es un estándar de scripting que forma la base de JavaScript.


● Motor V8: V8 es un motor de JavaScript de código abierto desarrollado por Google.
Es el motor que impulsa Google Chrome y Node.js.
● Node.js: es un entorno de ejecución de JavaScript del lado del servidor construido
sobre el motor V8 de Google.
● TC39: Comité técnico responsable de la evolución del estándar ECMAScript,
compuesto por representantes de varias empresas tecnológicas.

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.

Tipos de datos primitivos


● Number: Representa tanto números enteros como de punto flotante.
● BigInt: Representa números enteros de precisión arbitraria.
● String: Representa una cadena de caracteres.
● Boolean: Representa un valor lógico que puede ser true o false.
● null: Representa la ausencia intencional de cualquier valor de objeto.Es un valor
asignable.
● undefined: Representa una variable que ha sido declarada pero no inicializada.

Tipos de datos complejos


● Object: Es una colección de propiedades, donde cada propiedad es una asociación
entre un nombre (clave) y un valor. Los valores pueden ser de cualquier tipo,
incluyendo otros objetos.
● Array:Es una colección de propiedades, donde cada propiedad es una asociación
entre un nombre (clave) y un valor. Los valores pueden ser de cualquier tipo,
incluyendo otros objetos.

● Typeof: Es un operador en JavaScript que se utiliza para determinar el tipo de un


valor o variable. Devuelve una cadena que indica el tipo del operando.

● Typecasting: Es un operador en JavaScript que se utiliza para determinar el tipo de


un valor o variable. Devuelve una cadena que indica el tipo del operando.
Operadores matemáticos
● Suma: let suma = a + b;
● Resta: let resta = a - b;
● Multiplicación: let multiplicacion = a * b;
● División: let division = a / b
● Residuo: let modulo = a % b;
● Exponenciación: let potencia = a ** b;

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.

Ventajas de los Closures


● Encapsulación: Permiten encapsular datos y comportamientos, creando funciones
privadas.
● Modularidad: Facilitan la creación de módulos y la organización del código.
● Persistencia de Datos: Permiten que los datos persistan entre llamadas a funciones.
Consideraciones
● Memoria: Los closures pueden consumir más memoria porque mantienen
referencias a variables externas.
● Depuración: Pueden ser más difíciles de depurar debido a su naturaleza de
mantener el estado.
Los closures son una característica poderosa y flexible de JavaScript que permite la
creación de funciones con estado y la encapsulación de datos, facilitando la escritura de
código modular y reutilizable.
IFE's
Una IIFE (Immediately Invoked Function Expression) es una función en JavaScript que se
define y se ejecuta inmediatamente después de su creación. Las IIFE son útiles para crear
un ámbito léxico separado, evitando la contaminación del ámbito global y permitiendo
encapsular variables y funciones.

Ventajas de las IIFE


● Encapsulación: Permiten encapsular variables y funciones, evitando la
contaminación del ámbito global.
● Ámbito Léxico: Crean un nuevo ámbito léxico, útil para evitar conflictos de nombres.
● Ejecución Inmediata: Ejecutan el código inmediatamente, lo que puede ser útil para
inicializaciones.
Consideraciones
● Legibilidad: Pueden ser menos legibles para desarrolladores no familiarizados con el
patrón.
● Depuración: Pueden ser más difíciles de depurar debido a su ejecución inmediata.
Tiempos
● setTimeout:

● setInterval:

This & Bind


En JavaScript, this es una palabra clave que se refiere al contexto de ejecución actual. Su
valor depende de cómo se llama a la función en la que se utiliza. El método bind se usa
para establecer explícitamente el valor de this en una función.
● this: se refiere al contexto de ejecución actual y su valor depende de cómo se llama
a la función.
● bind: se usa para establecer explícitamente el valor de this en una función, creando
una nueva función con el contexto deseado.
Promesas
En JavaScript, resolve, reject, then, catch y finally son métodos y funciones relacionados
con el manejo de promesas. Las promesas son una forma de manejar operaciones
asíncronas, como llamadas a APIs, de manera más limpia y manejable. Las promesas
tienen tres estados posibles:

● Pendiente (Pending): Estado inicial, ni cumplida ni rechazada.


● Cumplida (Fulfilled): La operación se completó con éxito.
● Rechazada (Rejected): La operación falló.

● 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

Métodos para Números


● isNaN
● parseFloat

● toString

● isFinite
● isInteger
● toExponential

Métodos para Objetos


● assign

● 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.

● instanceof: El operador instanceof se utiliza para comprobar si un objeto es una


instancia de una clase específica o de una clase derivada de ella. Devuelve true si el
objeto es una instancia de la clase, y false en caso contrario.
Herencia Mixins
Un Mixin es básicamente un objeto o una función que proporciona métodos que pueden ser
utilizados por otras clases. En lugar de heredar de una sola clase, una clase puede
incorporar múltiples Mixins para obtener diversas funcionalidades.

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.

● Combinación con el Operador de Coalescencia Nula


● Uso en Acceso a Propiedades de Arreglos

● Uso en Llamadas a Métodos

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

● Asignación de Valores Predeterminados

● 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

También podría gustarte