JavaScript v1.0.0
JavaScript v1.0.0
Contenido
1 Introducción 10
1.1 Bienvenida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.1 Libro vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.2 Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 Prerequisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.3 ¿Cómo evitar bloqueos? . . . . . . . . . . . . . . . . . . . . . . . 12
2 Primeros pasos 13
2.1 Visión general . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.1.1 ¿Qué es y porqué debes aprenderlo? . . . . . . . . . . . . . 13
2.1.2 ¿En dónde se utiliza? . . . . . . . . . . . . . . . . . . . . . 14
2.1.3 ¿Qué trabajos puedes conseguir? . . . . . . . . . . . . . . 15
2.1.4 ¿Cuánto puedes ganar? . . . . . . . . . . . . . . . . . . . 16
2.1.5 ¿Cuales son las preguntas más comunes? . . . . . . . . . . 16
2.2 Historia, evolución, y versiones . . . . . . . . . . . . . . . . . . . . 17
2.3 Características y ventajas . . . . . . . . . . . . . . . . . . . . . . 18
2.4 Diferencias con otros lenguajes de programación . . . . . . . . . . 19
2.5 Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.5.1 IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.5.2 Entorno . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.6 Hola Mundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3 Gramática 21
3.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.2 Comentarios (una sola línea y multilínea) . . . . . . . . . . . . . . . 21
3.3 Literales y tipos de datos . . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Operadores y expresiones . . . . . . . . . . . . . . . . . . . . . . 24
3.5 Palabras clave e idenficadores . . . . . . . . . . . . . . . . . . . . 25
3.6 Sentencias, declaraciones, y tipado . . . . . . . . . . . . . . . . . 25
2
Contenido
4 Tipos y variables 30
4.1 Tipos de datos primitivos . . . . . . . . . . . . . . . . . . . . . . . 30
4.2 Tipos de datos no-primitivos . . . . . . . . . . . . . . . . . . . . . 31
4.3 Primitivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.3.1 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.3.2 Número . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.3.3 Entero grande . . . . . . . . . . . . . . . . . . . . . . . . 34
4.3.4 Buleano . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.3.5 Indefinido . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.3.6 Símbolo . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.3.7 Nulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.4 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.5 Acceder a propiedades de objetos . . . . . . . . . . . . . . . . . . 38
4.6 Colecciones con llave . . . . . . . . . . . . . . . . . . . . . . . . 40
4.6.1 Mapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.6.2 Sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.6.3 WeakMaps . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.6.4 WeakSets . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.7 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.8 Acceder a elementos de listas . . . . . . . . . . . . . . . . . . . . 45
4.9 Fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
4.10 Expresiones regulares . . . . . . . . . . . . . . . . . . . . . . . . 46
4.11 Declaracion e inicialización (var y let) . . . . . . . . . . . . . . . . 47
4.12 Constantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.13 Plantillas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.14 Chequear tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3
Contenido
5 Operadores 53
5.1 Operadores de aritméticos (+, -, *, /, %, **, //, ++, t ) . . . . . . . . . 53
5.2 Operador de agrupación (()) . . . . . . . . . . . . . . . . . . . . . 54
5.3 Operadores de texto (+, +=) . . . . . . . . . . . . . . . . . . . . . 55
5.4 Operadores de asignación (=, +=, -=, *=, /=, %=, **=, //=) . . . . . . . 56
5.5 Operadores comparativos (==, !=, >, <, >=, <=) . . . . . . . . . . . . 60
5.6 Comparar por valor y por referencia . . . . . . . . . . . . . . . . . 61
5.7 Operadores lógicos (&&, ||, !) . . . . . . . . . . . . . . . . . . . . . 62
5.8 Operadores de bits (&, |, ~, ^, », «, »>) . . . . . . . . . . . . . . . . 63
5.9 Operadores unarios (delete, typeof, void) . . . . . . . . . . . . . . . 64
5.10 Operadores relacionales (in, instanceof) . . . . . . . . . . . . . . . 66
5.11 Operador spread (f) . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.12 Operador de coma (,) . . . . . . . . . . . . . . . . . . . . . . . . 68
4
Contenido
6.2.6 Etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.2.7 forfin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.2.8 forfof . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
6.3 Excepciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.3.1 Tipos de excepciones . . . . . . . . . . . . . . . . . . . . . 84
6.3.2 tryfcatch . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.3.3 Utilizando objectos de errores . . . . . . . . . . . . . . . . 86
6.3.4 tryfcatchffinally . . . . . . . . . . . . . . . . . . . . . . . 87
6.3.5 throw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
7 Funciones 89
7.1 Declarar y llamar funciones . . . . . . . . . . . . . . . . . . . . . 89
7.2 Parámetros y argumentos . . . . . . . . . . . . . . . . . . . . . . 89
7.3 Parámetros predeterminados . . . . . . . . . . . . . . . . . . . . 91
7.4 Parámetros de descanso (rest) . . . . . . . . . . . . . . . . . . . . 91
7.5 El objeto arguments . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.6 Retorno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
7.7 Declaración y expresion de funciones . . . . . . . . . . . . . . . . 94
7.8 Funciones anidadas . . . . . . . . . . . . . . . . . . . . . . . . . 96
7.9 Ámbito global y local . . . . . . . . . . . . . . . . . . . . . . . . . 97
7.10 Devolución de llamada (Callbacks) . . . . . . . . . . . . . . . . . . 99
7.11 Elevación de variables y funciones (Hoisting) . . . . . . . . . . . . . 100
7.12 Recursividad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
7.13 Cierres (Clojures) . . . . . . . . . . . . . . . . . . . . . . . . . . 103
7.14 Funciones de flecha . . . . . . . . . . . . . . . . . . . . . . . . . 104
7.15 Funciones predefinidas . . . . . . . . . . . . . . . . . . . . . . . 105
5
Contenido
6
Contenido
10 Asincronía 174
10.1 Temporizadores . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
10.1.1 setTimeout() y clearTimeout() . . . . . . . . . . . . . . . . . 174
10.1.2 setInterval() y clearInterval() . . . . . . . . . . . . . . . . . 175
10.2 Promesas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
10.2.1 Crear una promesa . . . . . . . . . . . . . . . . . . . . . . 176
7
Contenido
11 Módulos 184
11.1 Módulos y herramientas . . . . . . . . . . . . . . . . . . . . . . . 184
11.1.1 Historia de los módulos . . . . . . . . . . . . . . . . . . . . 184
11.1.2 CommonJS . . . . . . . . . . . . . . . . . . . . . . . . . . 186
11.1.3 Webpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
11.1.4 Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
11.1.5 Extensiones .mjs vs .js . . . . . . . . . . . . . . . . . . . . 189
11.2 Exportar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
11.3 Importar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
11.4 Exportación predeterminada . . . . . . . . . . . . . . . . . . . . . 193
11.5 Alias de importación . . . . . . . . . . . . . . . . . . . . . . . . . 194
11.6 Importar paquetes . . . . . . . . . . . . . . . . . . . . . . . . . . 195
11.7 Cargar módulos dinámicamente . . . . . . . . . . . . . . . . . . . 196
11.8 Ámbito de un módulo . . . . . . . . . . . . . . . . . . . . . . . . 197
13 Internacionalización 203
13.1 El objeto Intl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
8
Contenido
14 Meta 207
14.1 El objeto Proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
14.2 El objeto Reflect . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
9
1 INTRODUCCIÓN
1 Introducción
1.1 Bienvenida
• Gramática
• Tipos y variables
• Operadores
• Estructuras de control de flujo
• Funciones
• Uso avanzado de datos
• Programación orientada a objetos (POO)
• Asincronía
• Módulos
• Iteradores y generadores
• Internacionalización
• Meta
La motivación de este libro es darte todo el conocimiento técnico que necesitas para
elevar la calidad de tus proyectos y al mismo tiempo puedas perseguir metas más
grandes, ya sea utilizar esta tecnología para tus pasatiempos creativos, aumentar
tus oportunidades laborales, o si tienes el espíritu emprendedor, incluso crear tu
10
1 INTRODUCCIÓN
propio negocio en línea. Confío en que este libro te dará los recursos que necesitas
para que tengas éxito en este campo.
Empecemos!
Esta publicación fue planeada, editada, y revisada manualmente por Xavier Reyes
Ochoa. La fundación del contenido fue generada parcialmente por inteligencia ar-
tificial usando ChatGPT (Feb 13 Version) de OpenAI. Puedes ver más detalles en
https://openai.com/
Esto es a lo que llamo un trabajo VIVO, esto quiere decir que será actualizado en
el tiempo a medida que existan cambios en la tecnología. La versión actual es 1.0.0
editada el 18 de abril de 2023. Si tienes correcciones importantes, puedes escribir-
nos a nuestra sección de contacto en https://wwww.academia-x.com
1.1.2 Alcance
El objetivo de este libro es llenar el vacío que existe sobre esta tecnología en Español
siguiendo el siguiente enfoque:
11
1 INTRODUCCIÓN
1.2 Prerequisitos
Si ya tienes estos requisitos, estarás en una buena posición para comenzar a apren-
der JavaScript y profundizar en sus características y aplicaciones.
Si todavía no tienes conocimiento sobre algunos de estos temas, te recomiendo
buscar tutoriales básicos en blogs a través de Google, ver videos en YouTube, o
hacer preguntas a ChatGPT. Alternativamente, puedes empezar ya e investigar en
línea a medida que encuentres bloqueos enteniendo los conceptos en este libro.
12
2 PRIMEROS PASOS
1. No solo leas este libro. La práctica es esencial en este campo. Practica todos
los días y no pases de lección hasta que un concepto esté 100% claro.
2. No tienes que memorizarlo todo, solo tienes que saber donde están los temas
para buscarlos rápidamente cuando tengas dudas.
3. Cuando tengas preguntas usa Google, StackOverFlow, y ChatGPT
4. Acepta que en esta carrera, mucho de tu tiempo lo vas utilizar investigando e
innovando, no solo escribiendo código.
5. No tienes que aprender inglés ahora pero considera aprenderlo en un futuro
porque los recursos más actualizados están en inglés y también te dará mejo-
res oportunidades laborales.
6. Si pierdas la motivación, recuerda tus objetivos. Ninguna carrera es fácil pero
ya tienes los recursos para llegar muy lejos. Te deseo lo mejor en este campo!
2 Primeros pasos
13
2 PRIMEROS PASOS
2. Es versátil: JavaScript se utiliza tanto en el lado del cliente como en el lado del
servidor, lo que significa que puedes desarrollar una amplia gama de aplica-
ciones y proyectos con él.
3. Es fácil de aprender: JavaScript es un lenguaje de programación fácil de apren-
der, especialmente para aquellos que ya tienen una comprensión básica de
programación.
4. Te abre puertas: Aprender JavaScript te permitirá aprovechar nuevas oportu-
nidades de carrera y te permitirá trabajar en una amplia gama de proyectos
interesantes.
14
2 PRIMEROS PASOS
En resumen, aprender JavaScript puede prepararte para una amplia gama de ca-
rreras en el campo de la tecnología, desde el desarrollo web hasta las aplicaciones
15
2 PRIMEROS PASOS
16
2 PRIMEROS PASOS
Estas son solo algunas de las preguntas más comunes sobre JavaScript. Hay mu-
chas más que pueden surgir a medida que avanzas en tu aprendizaje y desarrollo
de aplicaciones con este lenguaje de programación.
Al finalizar este recurso, tendrás las habilidades necesarias para responder o encon-
trar las respuestas a estas preguntas.
17
2 PRIMEROS PASOS
Ventajas:
18
2 PRIMEROS PASOS
2.5 Configuración
2.5.1 IDE
Los archivos de JavaScript son archivos de texto. Puedes editarlos con editores de
texto como Notepad en Windows o Notes en MacOS pero es recomendado utilizar
un IDE (Integrated Development Environment) que es una aplicación de edición
de código más avanzado que le da colores a tu código para que sea más fácil de
leer y tengas funciones de autocompletado, entre otras. Algunos IDEs populares
son Brackets, Atom, Sublime Text, Vim, y Visual Studio Code.
El editor recomendado para practicar el código que vamos a ver es Visual Studio
Code (o VSCode) que puedes bajar desde https://code.visualstudio.com/
19
2 PRIMEROS PASOS
2.5.2 Entorno
Una vez que tengas estos elementos, estarás list@ para escribir y ejecutar código
JavaScript en tu navegador. Puedes crear un archivo HTML y agregar tu código
JavaScript dentro de una etiqueta <script> o puedes escribir código JavaScript di-
rectamente en la consola del navegador.
20
3 GRAMÁTICA
También podrías modificar este código con tu nombre. Si esqJuanr, debería imprimir
en la consola qHola, Juanr.
Reto:
Modifica el ejemplo anterior para imprimir qHola Universoren la consola.
3 Gramática
3.1 Sintaxis
Los comentarios en JavaScript son líneas de texto que no son interpretadas como
parte del código. Son utilizados para agregar información adicional o notas sobre el
código que puede ser útil para otros desarrolladores o para uno mismo.
21
3 GRAMÁTICA
Ejemplo:
22
3 GRAMÁTICA
Reto:
Comenta este código para que ya no corra y se lea como comentario:
23
3 GRAMÁTICA
Los operadores y las expresiones en JavaScript son una parte importante de la pro-
gramación. Una expresión es una combinación de valores, variables y operadores
que se evalúan para producir un resultado. Los operadores son los símbolos que se
usan para realizar operaciones matemáticas, lógicas y de comparación.
Ejemplo:
Por ejemplo, consideremos la siguiente expresión:
En esta expresión, 5 y 3 son los valores, = y + son los operadores y x es una variable.
Esta expresión se evalúa como 8 y se guarda en una variable.
Reto:
Usa los operadores aritméticos para realizar las siguientes operaciones: suma, res-
ta, multiplicación y división entre 10 y 2. Imprime los resultados de las operaciones
en la consola.
24
3 GRAMÁTICA
Las palabras clave en JavaScript son términos reservados que tienen un significado
específico en el lenguaje y no pueden ser utilizados como identificadores. Algunas
de las palabras clave más comunes en JavaScript son var, function, if, else, for,
while, do, switch, etc.
Un identificador, por otro lado, es un nombre que le das a una variable, función o
objeto en JavaScript. Por ejemplo, podrías crear una variable llamada nombre y
asignarle un valor:
Ejemplo:
Aquí, let es una palabra clave al igual que var para crear una variable y nombre
es un identificador que está asociado con el valor qJuanr. var y let tienen algunas
diferencias que vas a aprender después.
Reto:
Escribe un programa que multiplique 3 y 2 y guarde el resultado en una variable
usando var. Luego, imprime la variable en la consola.
Una sentencia es una unidad de código que realiza una acción. Por ejemplo, la
sentencia console.log("Hola mundo") imprime el textoqHola mundoren la pantalla.
25
3 GRAMÁTICA
Los bloques en JavaScript son una forma de agrupar código para que sea más fácil
de leer y mantener. Esto se logra mediante la indentación, que es el proceso de
alinear el código para que sea más fácil de leer.
26
3 GRAMÁTICA
Los bloques se definen usando llaves {} y se usan para agrupar código relacionado.
Por ejemplo:
En este ejemplo, todo el código dentro de las llaves {} se considera parte del bloque
de la función saludar(). Vamos a ver funciones más adelante.
La indentación se usa para hacer que el código sea más fácil de leer. Por ejemplo,
en el ejemplo anterior, todas las líneas de código dentro del bloque de la función
saludar() están indentadas para indicar que forman parte del mismo bloque.
Reto:
Intenta escribir una función que imprima un saludo y una pregunta en la consola.
Asegúrate de usar bloques y indentación correctamente.
Las estructuras de control de flujo son una parte importante de cualquier lenguaje
de programación, y JavaScript no es una excepción. Estas estructuras nos permiten
controlar el flujo de ejecución de nuestro código, permitiéndonos ejecutar ciertas
partes del código solo si se cumplen ciertas condiciones.
Las estructuras de control de flujo más comunes en JavaScript son:
• if: Esta estructura nos permite ejecutar un bloque de código si una condición
es verdadera.
27
3 GRAMÁTICA
Las excepciones o errores son otra parte importante de JavaScript. Estas nos per-
miten controlar errores en nuestro código, permitiéndonos ejecutar un bloque de
código si se produce un error. Esto nos permite evitar que nuestro código se deten-
ga si se produce un error.
Las excepciones en JavaScript se manejan con la palabra clave try/catch.
Reto:
Crea un programa que muestre un mensaje diferente dependiendo de si es mayor
o menor de edad.
28
3 GRAMÁTICA
Reto:
Añade un emoji deqrostro felizr(que es un caracter de Unicode) a la variableqhappyr
.
29
4 TIPOS Y VARIABLES
4 Tipos y variables
• Números: Estos son números enteros o decimales, como por ejemplo: 3, 3.14,
-5.
• Cadenas de texto: Estas son secuencias de caracteres entre comillas, como
por ejemplo: "Hola mundo", "Esto es una cadena de texto".
30
4 TIPOS Y VARIABLES
• Booleanos: Estos son valores lógicos que pueden ser true o false, como por
ejemplo: true, false.
• Valores nulos: Estos son valores especiales que representan la ausencia de
un valor, como por ejemplo: null.
• Valores indefinidos: Estos son valores especiales que representan un valor
desconocido, como por ejemplo: undefined.
Ejemplo:
Reto:
Crea una variable llamada edad y asígnale un valor numérico de 25. Luego, crea una
variable llamada nombre y asígnale un valor de cadena de textoqJuanr. Finalmente,
crea una variable llamada estaRegistrado y asígnale un valor booleano true.
Los tipos de datos no primitivos en JavaScript son aquellos que no son números,
cadenas de texto, booleanos, ni valores especiales como null o undefined. Estos
tipos de datos son objetos, arreglos, funciones y expresiones regulares.
Ejemplo:
31
4 TIPOS Y VARIABLES
Reto:
Crea una lista que contenga: mazanas, naranjas, y piñas.
4.3 Primitivos
4.3.1 Texto
32
4 TIPOS Y VARIABLES
Reto:
Crea una variable qarcon 33 como texto.
4.3.2 Número
33
4 TIPOS Y VARIABLES
Reto:
Escribe un programa en JavaScript que calcule el área de un rectángulo con una
base de 10 y una altura de 5.
34
4 TIPOS Y VARIABLES
Reto:
Crea un programa que devuelva el resultado de la suma de los dos números
987654321000 y 987654321001 usando BigInt.
4.3.4 Buleano
En JavaScript, un booleano es un tipo de dato que solo puede tener dos valores:
true o false. Estos valores se utilizan para representar una condición verdadera o
falsa.
Ejemplo:
El siguiente código determina si el número 5 es igual a 5 y almacena el resultado en
una variable booleana:
Reto:
35
4 TIPOS Y VARIABLES
4.3.5 Indefinido
En JavaScript, el valor indefinido se usa para indicar que una variable no tiene un
valor asignado. Esto significa que la variable no se ha inicializado o que se ha elimi-
nado una propiedad de un objeto.
Ejemplo:
4.3.6 Símbolo
36
4 TIPOS Y VARIABLES
Ejemplo:
Reto:
Crea un símbolo y una cadena de texto. Luego, imprime cada uno.
4.3.7 Nulo
Nulo en JavaScript es un valor especial que se utiliza para indicar que una variable
no tiene un valor asignado. Esto es distinto de undefined ya que si es definido pero
tiene valo nulo. Se representa con la palabra clave null.
Ejemplo:
Reto:
37
4 TIPOS Y VARIABLES
Crea una variable llamada miNombre y asígnale el valor null. Luego, imprime el valor
de la variable en la consola.
4.4 Objetos
Los objetos en JavaScript son una forma de almacenar y organizar datos. Estos
datos se almacenan en forma de pares clave-valor, donde la clave es una cadena
de texto y el valor puede ser cualquier tipo de dato.
Un ejemplo práctico de un objeto en JavaScript es el siguiente:
Reto:
Crea un objeto en JavaScript que represente una computadora, con sus respectivas
características (marca, modelo, procesador, memoria RAM, etc).
38
4 TIPOS Y VARIABLES
Supongamos que tenemos un objeto llamado persona con los siguientes atributos:
También podemos acceder a los atributos del objeto usando la notación de corche-
tes:
39
4 TIPOS Y VARIABLES
Reto:
Crea un objeto llamado libro con los siguientes atributos: título, autor, año de publi-
cación y editorial. Usa la notación de punto y la notación de corchetes para acceder
a los atributos del objeto y mostrar los valores en la consola.
4.6.1 Mapas
Los mapas en JavaScript son una forma de representar datos en una estructura de
clave-valor. Esto significa que cada elemento de datos se asigna a una clave única, y
luego se puede acceder a los datos a través de la clave. Esto es útil para almacenar
y recuperar datos de manera eficiente.
Ejemplo:
Supongamos que queremos almacenar los nombres de los estudiantes de una clase
y sus calificaciones. Podemos usar un mapa para hacer esto de la siguiente mane-
ra:
40
4 TIPOS Y VARIABLES
Reto:
Crea un mapa que almacene los nombres de los estudiantes y sus edades. Luego,
imprime la edad de un estudiante específico.
4.6.2 Sets
Los Sets en JavaScript son una estructura de datos que almacena valores únicos.
Esto significa que no puede haber dos elementos iguales dentro de un Set. Esto los
hace útiles para almacenar conjuntos de datos sin duplicados.
Ejemplo:
Supongamos que queremos almacenar los nombres de los estudiantes de una cla-
se. Podemos usar un Set para almacenar los nombres de los estudiantes sin dupli-
cados.
41
4 TIPOS Y VARIABLES
Reto:
Crea un Set que almacene los nombres de los estudiantes de una clase y luego agre-
ga los nombres de los estudiantes que faltan. Luego, imprime el Set para verificar
que los nombres se hayan agregado correctamente.
4.6.3 WeakMaps
WeakMaps en JavaScript son una estructura de datos que se utiliza para almacenar
pares clave-valor. Esta estructura de datos es similar a un Map, pero con la diferencia
de que los objetos usados como claves deben ser objetos débiles. Esto significa que
los objetos usados como claves no se contarán para el recuento de referencias, lo
que significa que no se mantendrán en memoria. Esto hace que los WeakMaps sean
útiles para evitar fugas de memoria.
Ejemplo:
Supongamos que queremos almacenar algunos datos relacionados con un usuario
en un WeakMap. Podemos hacer esto de la siguiente manera:
42
4 TIPOS Y VARIABLES
4.6.4 WeakSets
43
4 TIPOS Y VARIABLES
Reto:
Crea un WeakSet que almacene objetos de usuario y luego usa el método has()
para verificar si un usuario específico está en el WeakSet.
4.7 Listas
Las listas en JavaScript son una estructura de datos que nos permite almacenar una
colección de elementos. Estos elementos pueden ser de cualquier tipo, desde nú-
meros hasta objetos. También los vas a encontrar con otros nombres como arreglos,
matrices, arrays, etc.
Ejemplo:
A continuación se muestra un ejemplo de una lista en JavaScript:
44
4 TIPOS Y VARIABLES
Reto:
Crea una lista con 5 elementos y accede al tercer elemento de la lista.
45
4 TIPOS Y VARIABLES
4.9 Fechas
Reto:
Crea una fecha y cambia el formato removiendo qyear: onumericprdel ejemplo.
Las expresiones regulares son una secuencia de caracteres que forman un patrón
de búsqueda. Estas son usadas para buscar y reemplazar patrones dentro de ca-
denas de texto. En JavaScript, las expresiones regulares son objetos, y se crean
usando la notación literal / para abrir y cerrar la expresión o el constructor RegExp.
Ejemplo:
46
4 TIPOS Y VARIABLES
Para buscar todas las palabras que comienzan con la letra qaren una cadena de
texto, se puede usar la siguiente expresión regular:
Esta expresión regular buscará todas las palabras que comienzan con la letra qar
en una cadena de texto.
Las expresiones regulares requieren su propio curso ya que usan patrones bastan-
tes complejos pero miraremos algunos ejemplos más adelante.
Reto:
Crea una expresión regular para buscar todas las palabras que comienzan con la
letra qbren una cadena de texto.
var es una palabra clave en JavaScript que se utiliza para declarar variables. Una
variable es un contenedor para almacenar datos. Esto significa que una variable
puede cambiar su valor a lo largo del tiempo.
let es una palabra clave en JavaScript que se usa para declarar variables. Esta
palabra clave es similar a la palabra clave var, pero con una diferencia importante:
let limita el alcance de la variable a la declaración de bloque en la que se encuentra.
Esto significa que la variable solo estará disponible dentro del bloque de código en
el que se declaró.
Ejemplo:
47
4 TIPOS Y VARIABLES
Reto:
Crea un programa que use la palabra clave let para declarar dos variables, una
dentro de un bloque de código y otra fuera del bloque de código. Luego, imprime el
valor de cada variable en la consola.
4.12 Constantes
Las constantes en JavaScript son variables que no pueden ser reasignadas. Esto
significa que una vez que se asigna un valor a una constante, este no puede ser
cambiado.
Ejemplo:
48
4 TIPOS Y VARIABLES
Reto:
Crea una constante llamada SALUDO y asígnale el valor "Hola Planeta". Luego,
imprime el valor de la constante en la consola.
Las plantillas de texto en JavaScript son una forma de crear cadenas de texto con
una sintaxis especial. Estas plantillas permiten la interpolación de variables y expre-
siones dentro de la cadena de texto. Esto significa que podemos insertar variables
y expresiones dentro de una cadena de texto sin tener que concatenar cadenas de
texto.
Ejemplo:
Supongamos que queremos imprimir un saludo personalizado para un usuario. Po-
demos usar una plantilla de texto para hacer esto:
49
4 TIPOS Y VARIABLES
Reto:
Crea una plantilla de texto que imprima una frase con un nombre, un adjetivo y una
comida. Por ejemplo: qJohn es un chico hambriento que ama la pizzar.
Chequear el tipo de una variable en JavaScript es una tarea común que se realiza
para asegurar que los datos sean del tipo correcto. Esto se puede hacer usando la
palabra typeof de JavaScript. Esta palabra devuelve una cadena que indica el tipo
de la variable.
Ejemplo:
Reto:
Remplaza el ejemplo usando todos los tipos de datos que has visto hasta ahora.
50
4 TIPOS Y VARIABLES
4.16 Coerción
51
4 TIPOS Y VARIABLES
que los datos sean del tipo correcto para una operación específica. Por ejemplo, si
se intenta realizar una operación matemática con una cadena de texto, JavaScript
intentará convertir la cadena de texto a un número antes de realizar la operación.
Ejemplo:
52
5 OPERADORES
5 Operadores
Ejemplo:
53
5 OPERADORES
Reto:
Usa los operadores de aritméticos para calcular el área de un círculo con radio 5.
54
5 OPERADORES
Por ejemplo, si queremos calcular la suma de dos números, pero queremos que
se realice la multiplicación primero, podemos usar el operador de agrupación para
asegurarnos de que la multiplicación se realice primero.
Reto:
Utiliza el operador de agrupación para que el resultado de la siguiente expresión
sea 20: 2 + 3 * 4
55
5 OPERADORES
Reto:
Une los texto qFatboyry qSlimrcon el operador + añadiendo un espacio entre las
palabras.
5.4 Operadores de asignación (=, +=, -=, *=, /=, %=, **=, //=)
• +=: Esto significa qagregar ar. Esto significa que el valor de la variable se
incrementará en la cantidad especificada.
Ejemplo:
56
5 OPERADORES
• -=: Esto significa qrestar der. Esto significa que el valor de la variable se
reducirá en la cantidad especificada.
Ejemplo:
• *=: Esto significa qmultiplicar porr. Esto significa que el valor de la variable
se multiplicará por la cantidad especificada.
Ejemplo:
57
5 OPERADORES
• /=: Esto significa qdividir entrer. Esto significa que el valor de la variable se
dividirá entre la cantidad especificada.
Ejemplo:
• %=: Esto significa qmódulo der. Esto significa que el valor de la variable se
calculará como el resto de la división entre la cantidad especificada.
Ejemplo:
58
5 OPERADORES
Ejemplo:
• //=: Esto significaqdividir entre y redondear hacia abajor. Esto significa que el
valor de la variable se dividirá entre la cantidad especificada y se redondeará
hacia abajo.
Ejemplo:
59
5 OPERADORES
Reto:
Usa los operadores de asignación para calcular el área de un cuadrado donde el
lado es igual a 5.
Los operadores comparativos en JavaScript son usados para comparar dos valores
y determinar si son iguales o diferentes. Estos operadores son:
• == (igual a)
• != (no igual a)
• > (mayor que)
• < (menor que)
• >= (mayor o igual que)
• <= (menor o igual que)
Ejemplo:
60
5 OPERADORES
Reto:
Escribe un programa que compare dos números y determina si el primero es mayor,
menor o igual al segundo.
Comparar por valor significa comparar los valores de dos variables para determinar
si son iguales.
Ejemplo:
61
5 OPERADORES
Las variables primitivas se pasanqpor valorry los objetos, listas, y datos no primitivos
se pasan qpor referenciar. Esto quiere decir que al compararlos se compara la
dirección en la memoria y no su valor.
Ejemplo:
Esta es una de las fuentes más comunes de errores al trabajar con JavaScript en la
industria de software. Un solución común es usar librerías o JSON.stringify() para
convertir los objetos a texto y comparar su valor.
Reto:
Crea dos variables de tipo lista con el mismo valor y comprueba si son iguales usan-
do el operador de igualdad (==).
Los operadores lógicos en JavaScript son && (AND), || (OR) y ! (NOT). Estos ope-
radores se usan para realizar comparaciones entre expresiones y devolver un valor
booleano (verdadero o falso).
El operador && (AND) devuelve verdadero si ambas expresiones son verdaderas.
Ejemplo:
62
5 OPERADORES
Reto:
Escribe una línea de código que devuelva true si x es mayor que 0 y y es menor que
0.
• & (AND)
• | (OR)
• ~ (NOT)
• ^ (XOR)
• >> (Desplazamiento a la derecha)
• << (Desplazamiento a la izquierda)
• >>> (Desplazamiento a la derecha sin signo)
Ejemplo:
A continuación se muestra un ejemplo de código que usa los operadores de bits
para realizar una operación bit a bit:
63
5 OPERADORES
En este ejemplo se usa el operador & para realizar una operación AND bit a bit entre
los números a y b. El resultado de esta operación es 0.
Reto:
Para reforzar lo aprendido, el reto consiste en realizar una operación bit a bit usando
el operador | entre los números a y b del ejemplo anterior. El resultado de esta
operación debe ser 15 (1111 en binario).
Los operadores unarios son un tipo de operador que toma un solo operando (un
argumento) para realizar una operación. En JavaScript, hay tres operadores unarios
principales: delete, typeof y void.
El operador delete se utiliza para eliminar una propiedad de un objeto. Por ejemplo,
si tenemos un objeto llamado persona con una propiedad llamada edad, podemos
eliminar la propiedad edad con el siguiente código:
64
5 OPERADORES
El operador typeof se utiliza para determinar el tipo de una variable. Por ejemplo, si
tenemos una variable llamada nombre que contiene una cadena, podemos determi-
nar su tipo con el siguiente código:
El operador void se utiliza para evaluar una expresión y devolver undefined. Por
ejemplo, si queremos evaluar una expresión y devolver undefined, podemos usar el
siguiente código:
Reto:
Intenta crear un objeto llamado auto con una propiedad llamada marca y luego eli-
minar la propiedad marca usando el operador delete.
65
5 OPERADORES
Los operadores relacionales en JavaScript son usados para comparar dos valores
y determinar si son iguales o no. Estos operadores incluyen in y instanceof.
El operador in se usa para determinar si una propiedad existe en un objeto. Devuelve
true si la propiedad existe en el objeto, de lo contrario devuelve false.
Ejemplo:
66
5 OPERADORES
Reto:
Usa instanceof para ver la instancia de un número.
El operador spread (...) es una característica de JavaScript que permite expandir una
expresión en varios argumentos o elementos. Esto significa que se puede usar para
expandir una lista, un objeto o una cadena de texto en lugares donde se esperan
varios argumentos o elementos.
Ejemplo:
Supongamos que tenemos una lista de números y queremos imprimir cada elemento
de la lista.
67
5 OPERADORES
Reto:
Usa el operador spread para crear una nueva lista que contenga los elementos de
dos listas diferentes.
68
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.1 Condicionales
6.1.1 if
if es una estructura de control de flujo en JavaScript que permite ejecutar una sec-
ción de código si una condición es verdadera. Si la condición es falsa, se puede
ejecutar otra sección de código.
Ejemplo:
69
6 ESTRUCTURAS DE CONTROL DE FLUJO
Reto:
Escribe un código que compruebe si un número es par o impar.
6.1.2 iffelse
if...else es una estructura de control de flujo en JavaScript que permite a los progra-
madores tomar decisiones basadas en condiciones. Esta estructura se compone de
dos partes: una condición (if) y una acción (else). Si la condición se evalúa como
verdadera, se ejecuta la acción asociada al if; de lo contrario, se ejecuta la acción
asociada al else.
Ejemplo:
Supongamos que queremos escribir un programa que imprima un mensaje diferente
dependiendo de si una variable es mayor o menor que 10. Podemos hacer esto con
una estructura iffelse:
70
6 ESTRUCTURAS DE CONTROL DE FLUJO
En este ejemplo, la variable num se evalúa para ver si es mayor que 10. Si es así,
se imprime el mensaje qEl número es mayor que 10r; de lo contrario, se imprime
el mensaje qEl número es menor que 10r.
Reto:
Escribe un programa que imprima un mensaje diferente dependiendo de si una va-
riable es mayor, menor o igual a 10.
6.1.3 iffeliffelse
if...elif...else es una estructura de control de flujo en JavaScript que permite a los pro-
gramadores tomar decisiones basadas en una o más condiciones. Esta estructura
se compone de tres partes: if, elif y else.
Ejemplo:
71
6 ESTRUCTURAS DE CONTROL DE FLUJO
Reto:
Escribe un programa que imprima un mensaje que indique si el usuario puede jubi-
larse, es mayor a 80 o ambas cosas.
72
6 ESTRUCTURAS DE CONTROL DE FLUJO
Reto:
Escribe una línea de código usando el operador ternario para asignar el valor qEs
parra la variable qmensajersi el número qnumerores par, o qEs imparrsi el
número qnumerores impar.
73
6 ESTRUCTURAS DE CONTROL DE FLUJO
Este código funciona pero se debe evitar ya que complica la legibilidad. En su lugar
se recomienda usar claúsulas de guarda.
Reto:
Escribe un código que evalúe si un número es mayor que 10 y menor que 20. Si se
cumple, imprime qEl número está entre 10 y 20r. Si no se cumple, imprime qEl
número no está entre 10 y 20r.
6.1.6 switch
switch en JavaScript es una estructura de control que nos permite evaluar una ex-
presión y ejecutar un bloque de código específico dependiendo del resultado de
la evaluación. Esta estructura de control es útil cuando hay una gran cantidad de
posibles resultados para una expresión.
Ejemplo:
74
6 ESTRUCTURAS DE CONTROL DE FLUJO
75
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2 Bucles
6.2.1 for
for es una estructura de control en JavaScript que se utiliza para iterar sobre una se-
cuencia de elementos. Esta estructura de control se compone de una inicialización,
una condición de parada y una actualización.
Ejemplo:
6.2.2 while
while es una estructura de control de flujo en JavaScript que se usa para ejecutar
una serie de instrucciones mientras se cumpla una condición. Esta condición se
evalúa antes de cada iteración del bucle.
Ejemplo:
76
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2.3 dofwhile
do...while es una estructura de control de bucle en JavaScript que ejecuta una sen-
tencia o bloque de código una vez, y luego continúa ejecutándolo mientras se cumpla
una condición. Esta estructura es útil cuando se necesita asegurar que una senten-
cia se ejecute al menos una vez.
Ejemplo:
77
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2.4 continue
continue es una palabra clave en JavaScript que se usa para saltar a la siguiente ite-
ración de un bucle. Esto significa que cuando se encuentra una instrucción continue,
el código de la iteración actual se salta y se continúa con la siguiente iteración.
Ejemplo:
Por ejemplo, si queremos imprimir todos los números pares entre 0 y 10, podemos
usar un bucle for con una instrucción continue para saltar los números impares:
78
6 ESTRUCTURAS DE CONTROL DE FLUJO
0
2
4
6
8
10
Reto:
Escribe un programa que imprima los números impares entre 0 y 10 usando un bucle
for y una instrucción continue.
6.2.5 break
break es una palabra clave en JavaScript que se usa para salir de un bucle. Esto
significa que cuando se encuentra una instrucción break, el bucle se detiene y el
control se transfiere a la siguiente instrucción después del bucle.
Ejemplo:
79
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2.6 Etiquetas
Una etiqueta en JavaScript es una forma de etiquetar una instrucción para que sea
más fácil de identificar (no confundir con etiquetas de HTML). Esto se hace mediante
una palabraqetiquetarseguida de dos puntos y un bucle. Se puede indicar que hacer
después de break o continue indicando la etiqueta.
Ejemplo:
80
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2.7 forfin
for...in es una estructura de control de bucle en JavaScript que se utiliza para iterar
sobre los elementos de un objeto. Esta estructura de control se utiliza para recorrer
los elementos de un objeto y realizar una acción para cada elemento.
Ejemplo:
Supongamos que tenemos un objeto llamado persona con los siguientes atributos:
81
6 ESTRUCTURAS DE CONTROL DE FLUJO
Podemos usar for...in para recorrer los atributos de este objeto y mostrar su valor
en la consola:
nombre: Juan
edad: 25
ciudad: Madrid
Reto:
Crea un objeto llamado libro con los siguientes atributos: título, autor, año de publi-
cación y género. Usa for...in para recorrer los atributos del objeto y mostrar su valor
en la consola.
82
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.2.8 forfof
for...of es una estructura de control de bucle en JavaScript que se utiliza para iterar
sobre los elementos de un objeto iterable, como una lista, una cadena o un objeto.
Esta estructura de control de bucle es una forma más moderna de bucle que se
introdujo en ES6.
Ejemplo:
A continuación se muestra un ejemplo de cómo usar forfof para iterar sobre los
elementos de una lista:
Reto:
Utiliza forfof para iterar sobre los elementos de este mapa y mostrar los valores en
la consola.
83
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.3 Excepciones
Ejemplo:
84
6 ESTRUCTURAS DE CONTROL DE FLUJO
Reto:
Escribe un código que intente acceder a un elemento de una lista que no existe, lo
que provocará una excepción de referencia.
6.3.2 tryfcatch
85
6 ESTRUCTURAS DE CONTROL DE FLUJO
En este ejemplo, el bloque de código dentro del try se ejecutará primero. Si se pro-
duce un error, el bloque de código dentro del catch se ejecutará para manejar el
error.
Reto:
El reto consiste en acceder a una lista. Esta función debe utilizar la sentencia
try/catch para imprimir el error en caso de que la lista no exista.
Los objetos de errores en JavaScript son objetos que se utilizan para representar
errores que ocurren durante la ejecución de un programa. Estos objetos contienen
información sobre el error, como el nombre del error, una descripción del error, y una
pila de llamadas que muestra dónde se produjo el error.
Ejemplo:
Reto:
Crea código que produzca un error. Atrápalo con tryfcatch y revisa sus propieda-
des.
86
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.3.4 tryfcatchffinally
Reto:
Intenta escribir código con problemas de sintaxis y utiliza tryfcatchffinally para
controlar los errores.
87
6 ESTRUCTURAS DE CONTROL DE FLUJO
6.3.5 throw
La sentencia throw en JavaScript permite lanzar una excepción, es decir, una si-
tuación anormal que interrumpe el flujo normal de un programa. Esta sentencia se
utiliza para generar errores personalizados, y se debe usar dentro de un bloque
try...catch para poder controlar el error.
Ejemplo:
88
7 FUNCIONES
7 Funciones
En JavaScript, una función es un bloque de código diseñado para realizar una ta-
rea específica. Las funciones se pueden definir para realizar cualquier tarea, desde
realizar cálculos hasta mostrar mensajes en la pantalla.
Ejemplo:
Por ejemplo, aquí hay una función simple que calcula el área de un cuadrado dado
su lado:
Reto:
Escribe una función que calcule el área de un círculo dado su radio.
89
7 FUNCIONES
metros son los nombres de variables que se usan para recibir los argumentos dentro
de la función.
Ejemplo:
Supongamos que tenemos una función llamada sumar() que recibe dos parámetros:
a y b.
90
7 FUNCIONES
Reto:
Escribe una función llamada calcularArea que tome dos parámetros, ancho y alto,
e imprima el área de un rectángulo. Si alguno de los parámetros no se proporciona,
asígnale el valor predeterminado de 10.
Los parámetros de descanso (rest) en JavaScript son una forma de recopilar argu-
mentos en una función. Esto significa que, en lugar de recibir una cantidad fija de
argumentos, una función puede recibir un número variable de argumentos.
Ejemplo:
91
7 FUNCIONES
Reto:
Crea una función que tome una cantidad variable de cadenas de texto e imprima
una cadena de texto con todas las cadenas concatenadas.
92
7 FUNCIONES
Reto:
Crea una función que tome un número variable de argumentos y devuelva la suma
de todos los argumentos pasados.
7.6 Retorno
return en JavaScript es una palabra que se usa dentro de una función para devolver
un valor. Esto significa que una vez que se ejecuta una función, el valor devuelto se
puede usar en otra parte del código. Esto es útil para evitar la repetición de código
y para ahorrar tiempo.
Ejemplo:
Por ejemplo, consideremos una función que calcula el área de un círculo.
93
7 FUNCIONES
94
7 FUNCIONES
Ejemplo:
A continuación se muestra un ejemplo de una función declarada y una función ex-
presada:
95
7 FUNCIONES
Reto:
Crea una función declarada como expresión llamada calcularSuma que tome dos
números como parámetros y devuelva la suma de los dos números.
Una función anidada es una función que se encuentra dentro de otra función. Esto
significa que la función anidada solo está disponible dentro de la función que la
contiene. Esto es útil para crear funciones que se usan solo dentro de otra función.
Ejemplo:
96
7 FUNCIONES
Reto:
Intenta crear una función anidada que tome un parámetro y lo multiplique por dos.
97
7 FUNCIONES
98
7 FUNCIONES
de los dos números y un número local. Asegúrate de que la función tenga el alcance
correcto para que los parámetros sean accesibles dentro de la función.
En este ejemplo, la función saludar recibe como argumento el nombre de una perso-
na y una función (la devolución de llamada). La función saludar imprime un saludo
con el nombre de la persona y luego ejecuta la función que se le pasó como ar-
gumento (la devolución de llamada). En este caso, la devolución de llamada es la
función despedirse, que imprime una despedida.
99
7 FUNCIONES
Reto:
El reto consiste en crear una función que reciba como argumento un número y dos
funciones (una devolución de llamada y otra devolución de llamada opcional). La
función debe imprimir el número recibido como argumento y luego ejecutar la de-
volución de llamada. Si se recibe una segunda devolución de llamada, esta debe
ejecutarse después de la primera.
En este ejemplo, aunque la variable message se está utilizando antes de ser de-
clarada, no produce un error. Esto se debe a que, en realidad, la declaración de la
variable se eleva al inicio del scope en el que se encuentra. Por lo tanto, el código
anterior es equivalente a:
100
7 FUNCIONES
Las funciones también son elevadas en JavaScript. Esto significa que puedes invo-
car una función antes de haberla declarado en el código.
Ejemplo:
En este ejemplo, la función saludar es invocada antes de ser declarada, pero toda-
vía se ejecuta correctamente. Esto se debe a que la declaración de la función es
elevada al inicio del scope en el que se encuentra. Por lo tanto, el código anterior
es equivalente a:
101
7 FUNCIONES
Es importante tener en cuenta que, a diferencia de las variables, las funciones de-
claradas con la palabra clave function son elevadas en su totalidad, incluido su
cuerpo. Mientras que las funciones declaradas como expresiones de función (const
miFuncion = function() {...}) son elevadas solo hasta la declaración de la variable,
no su cuerpo.
Reto:
Crea un pequeño programa en el que declares una función como expresión de fun-
ción y luego la invoques antes de haberla declarada. Verifica que haya un error y
explica por qué sucede.
7.12 Recursividad
102
7 FUNCIONES
Reto:
Crea una función recursiva para calcular el n-ésimo número de Fibonacci. El n-ésimo
número de Fibonacci es el resultado de la suma de los dos números anteriores en
la secuencia. Por ejemplo, el número de Fibonacci de 5 es 5 (3 + 2).
103
7 FUNCIONES
Reto:
Crea una función que tome una cadena como argumento y devuelva una función
que tome una cadena como argumento y devuelva la cadena original concatenada
con la cadena pasada como argumento.
Las funciones de flecha son una forma abreviada de escribir funciones en JavaS-
cript. Estas funciones son similares a las funciones regulares, pero tienen una sin-
taxis más corta. Esto significa que puedes escribir una función en una sola línea.
Estas funciones también son conocidas como funciones lambda, ya que se basan
en la notación lambda de la programación funcional.
Ejemplo:
104
7 FUNCIONES
Reto:
Crea una función de flecha que tome dos números como argumentos y devuelva su
producto.
105
8 USO AVANZADO DE DATOS
Reto:
Utiliza la función Math.min() para encontrar el número más pequeño de la lista [2, 4,
6, 8].
Los números decimales en JavaScript son números que contienen un punto decimal.
Estos números se usan para representar fracciones o números con decimales.
Ejemplo:
Reto:
Crea una variable llamada numeroDecimal y asígnale un número decimal. Luego,
imprime el valor de la variable en la consola.
Los números binarios son un sistema de numeración que utiliza solo dos dígitos, 0 y
1. Estos números se utilizan en computadoras para representar información, ya que
106
8 USO AVANZADO DE DATOS
los circuitos electrónicos de una computadora solo pueden entender dos estados:
encendido o apagado. Estos dos estados se representan con 0 y 1, respectivamen-
te.
En JavaScript, los números binarios se representan con el prefijo 0b. Por ejemplo,
el número binario 1101 se representa como 0b1101.
Ejemplo:
Reto:
Utiliza el prefijo 0b para convertir el número binario 1100 a decimal.
Los números octales en JavaScript son una forma de representar números enteros
usando una base 8. Esto significa que cada dígito en un número octal representa
una potencia de 8. Los números octales se escriben con un prefijo de 0o (cero y la
letra o).
Ejemplo:
107
8 USO AVANZADO DE DATOS
Reto:
Escribe un programa que tome un número octal como entrada y lo convierta a un
número decimal.
Reto:
Crea una variable llamada hexNumber2 y asígnale el valor 0xA3. Luego, imprime el
valor de la variable en la consola.
108
8 USO AVANZADO DE DATOS
8.1.5 Infiniy
Reto:
Escribe una función que tome dos números como argumentos y devuelva el resul-
tado de dividir el primer número entre el segundo. Si el segundo número es 0, la
función debe devolver Infinity.
8.1.6 NaN
NaN (Not a Number) es un valor especial en JavaScript que se devuelve cuando una
operación matemática no puede ser realizada. Por ejemplo, si intentamos dividir un
número por cero, el resultado será NaN.
Ejemplo:
109
8 USO AVANZADO DE DATOS
Reto:
Escribe una función llamada esNaN que tome un argumento y devuelva true si el
argumento es NaN y false si no lo es.
110
8 USO AVANZADO DE DATOS
Ejemplo:
Reto:
Utiliza los métodos del objeto Number para crear una función que tome un número
111
8 USO AVANZADO DE DATOS
como parámetro y devuelva una cadena con el número formateado con dos decima-
les.
Reto:
Crea una variable llamada maxValue y asígnale el valor de Number.MAX_VALUE.
Luego, imprime el valor de maxValue en la consola.
112
8 USO AVANZADO DE DATOS
Reto:
Utiliza la constante Number.MAX_VALUE para calcular el resultado de la siguiente
operación:
1.7976931348623157e+308 + 1
Reto:
Crea una variable llamada y y asígnale el valor de Number.POSITIVE_INFINITY.
Luego, imprime el valor de y en la consola.
113
8 USO AVANZADO DE DATOS
Reto:
Crea una función que tome dos números como parámetros y devuelva el número
más pequeño. Si alguno de los números es Number.NEGATIVE_INFINITY, la fun-
ción debe devolver Number.NEGATIVE_INFINITY.
114
8 USO AVANZADO DE DATOS
Reto:
Crea una función que tome un número como argumento y devuelva true si el nú-
mero es menor o igual que Number.MAX_SAFE_INTEGER y false si el número es
mayor.
Propiedades Las propiedades del objeto Math son constantes que contienen va-
lores matemáticos específicos. Algunos ejemplos de propiedades son:
115
8 USO AVANZADO DE DATOS
Métodos Los métodos del objeto Math son funciones que realizan operaciones
matemáticas. Algunos ejemplos de métodos son:
• Math.abs(): Devuelve el valor absoluto de un número.
• Math.ceil(): Devuelve el entero más pequeño mayor o igual al número especi-
ficado.
• Math.floor(): Devuelve el entero más grande menor o igual al número especifi-
cado.
Ejemplo:
Supongamos que queremos calcular el área de un círculo con un radio de 5. Pode-
mos usar el método Math.PI para obtener el valor de pi y el método Math.pow() para
elevar el radio al cuadrado. El código para calcular el área sería el siguiente:
Reto:
Utiliza los métodos y propiedades del objeto Math para calcular el área de un rec-
tángulo con un ancho de 10 y un alto de 5.
116
8 USO AVANZADO DE DATOS
Propiedades
• MAX_SAFE_INTEGER: Esta propiedad es una constante que contiene el nú-
mero entero más grande que se puede representar con seguridad en JavaS-
cript.
• MIN_SAFE_INTEGER: Esta propiedad es una constante que contiene el nú-
mero entero más pequeño que se puede representar con seguridad en JavaS-
cript.
Métodos
• BigInt(): Esta función se usa para convertir un número entero a un BigInt.
• toString(): Esta función se usa para convertir un BigInt a una cadena.
• valueOf(): Esta función se usa para convertir un BigInt a un número entero.
• toLocaleString(): Esta función se usa para convertir un BigInt a una cadena
con formato local.
Ejemplo:
A continuación se muestra un ejemplo de cómo usar BigInt en JavaScript:
Reto:
Intenta crear una función que tome un BigInt como argumento y devuelva el número
entero más grande que se puede representar con seguridad en JavaScript.
117
8 USO AVANZADO DE DATOS
El objeto Date en JavaScript es un objeto nativo que nos permite trabajar con fechas
y horas. Está diseñado para ser compatible con la mayoría de los navegadores y
sistemas operativos.
Propiedades Las propiedades del objeto Date nos permiten obtener información
sobre la fecha y hora actual. Algunas de las propiedades más comunes son:
Métodos Los métodos del objeto Date nos permiten realizar operaciones con fe-
chas y horas. Algunos de los métodos más comunes son:
Ejemplo:
A continuación se muestra un ejemplo de cómo usar el objeto Date para obtener la
fecha y hora actuales:
118
8 USO AVANZADO DE DATOS
Reto:
Utiliza el objeto Date para crear una función que devuelva la fecha y hora de una
semana a partir de la fecha y hora actuales.
119
8 USO AVANZADO DE DATOS
se mostrará como:
Esta cadena contiene una barra invertida: \
Reto:
Escribe una cadena de texto que contenga una tabulación y un salto de línea. Usa
la secuencia de escape adecuada para mostrar el resultado correcto.
120
8 USO AVANZADO DE DATOS
Reto:
Crea una función que tome una cadena de texto como argumento y devuelva un
número entero. La cadena de texto puede contener números enteros o decimales. Si
la cadena de texto contiene un número decimal, la función debe devolver el número
entero más cercano.
121
8 USO AVANZADO DE DATOS
Ejemplo:
Supongamos que queremos contar el número de veces que aparece una letra en
una cadena de texto. Para ello, podemos utilizar el método indexOf() para encontrar
la primera aparición de la letra y luego utilizar el método replace() para reemplazar-
la por una cadena vacía. Luego, podemos contar el número de veces que se ha
reemplazado la letra para obtener el número de veces que aparece en la cadena de
texto.
Reto:
Crea una función que reciba una cadena de texto y un carácter como parámetros y
devuelva el número de veces que aparece el carácter en la cadena de texto.
122
8 USO AVANZADO DE DATOS
Reto:
Busca en línea la expresión regular para validar una dirección de correo electrónico
e intenta decifrar lo que hace.
Las búsquedas con banderas en expresiones regulares en JavaScript son una for-
ma de modificar el comportamiento de una expresión regular. Estas banderas se
123
8 USO AVANZADO DE DATOS
Ejemplo:
Supongamos que queremos buscar la palabra qholaren un texto. Si usamos la
expresión regular /hola/ sin banderas, sólo encontrará la primera coincidencia.
Si usamos la expresión regular /hola/g, buscará todas las coincidencias en el tex-
to.
Reto:
Escribe una expresión regular que busque todas las palabras que empiecen por
qholaren un texto, sin importar si están en mayúsculas o minúsculas.
El objeto RegExp en JavaScript es una expresión regular que se utiliza para realizar
búsquedas de patrones en cadenas de texto. Está formado por una serie de propie-
dades y métodos que permiten realizar operaciones sobre cadenas de texto.
124
8 USO AVANZADO DE DATOS
125
8 USO AVANZADO DE DATOS
En este ejemplo, hemos creado una expresión regular con la propiedad global para
buscar todas las palabras que comienzan con la letra qaren la cadena de texto.
Luego, hemos utilizado el método match() para buscar las coincidencias y almacenar
los resultados en un array.
Reto:
Utiliza el objeto RegExp para buscar todas las palabras que comienzan con la letra
qbren una cadena de texto.
Insertar elementos en una lista en JavaScript es una tarea sencilla. Esto se puede
hacer usando el método push(). El método push() agrega un elemento al final de
una lista y devuelve la nueva longitud de la lista.
Ejemplo:
126
8 USO AVANZADO DE DATOS
Reto:
Crea una lista con los números del 1 al 5 y agrega el número 6 al final de la lista
usando el método push().
127
8 USO AVANZADO DE DATOS
Reto:
Crea una lista con 5 elementos y usa los métodos push(), pop(), shift() y unshift()
para modificar los elementos de la lista.
En JavaScript, hay varias formas de borrar elementos de una lista. Una forma es
usar el método splice(). Este método toma dos argumentos: el índice del elemento
que se desea borrar y la cantidad de elementos que se desean borrar. Por ejemplo,
para borrar el tercer elemento de una lista, se usaría el siguiente código:
128
8 USO AVANZADO DE DATOS
Otra forma de borrar elementos de una lista es usar el método pop(). Este método
borra el último elemento de la lista. Por ejemplo, para borrar el último elemento de
una lista, se usaría el siguiente código:
Reto:
Crea una lista con 5 elementos y borra el tercer elemento usando el método
splice().
El objeto Array en JavaScript es un objeto global que se utiliza para almacenar y ma-
nipular datos. Está formado por una serie de propiedades y métodos que permiten
trabajar con los datos de una forma más eficiente.
129
8 USO AVANZADO DE DATOS
• push(): Este método añade uno o más elementos al final del array.
• pop(): Este método elimina el último elemento del array.
• shift(): Este método elimina el primer elemento del array.
• unshift(): Este método añade uno o más elementos al principio del array.
• sort(): Este método ordena los elementos del array.
Ejemplo:
Supongamos que tenemos un array con los números del 1 al 10:
Podemos usar el método sort() para ordenar los elementos del array de forma as-
cendente:
Reto:
Crea un array con los nombres de tus amigos y usa el método sort() para ordenarlos
alfabéticamente.
130
8 USO AVANZADO DE DATOS
length length es una propiedad de los objetos de JavaScript que devuelve la lon-
gitud de una cadena, un array o un objeto. Esta propiedad es útil para determinar el
número de elementos en una cadena, un array o un objeto.
Ejemplo:
Supongamos que tenemos un array llamado qcoloresrque contiene los siguientes
elementos:
Reto:
Crea una función llamada qcontarElementosrque tome un array como parámetro
y devuelva el número de elementos en el array.
131
8 USO AVANZADO DE DATOS
Métodos de lista concat() y join() Los métodos de lista concat() y join() son dos
métodos de JavaScript que se utilizan para manipular cadenas de texto. El método
concat() se utiliza para unir dos o más cadenas de texto, mientras que el método
join() se utiliza para unir los elementos de una matriz en una sola cadena de texto.
Método concat() El método concat() se utiliza para unir dos o más cadenas de
texto. Acepta uno o más argumentos y devuelve una nueva cadena de texto que
contiene la unión de los argumentos.
Ejemplo:
Reto:
Utiliza el método concat() para unir tres cadenas de texto y guarda el resultado en
una variable.
Métodos de lista indexOf() y find() Los métodos de lista indexOf() y find() son
métodos de JavaScript que se utilizan para buscar elementos en una lista. El método
indexOf() busca un elemento específico en una lista y devuelve su índice, mientras
que el método find() busca un elemento que cumpla con una condición específica y
devuelve el elemento.
132
8 USO AVANZADO DE DATOS
Reto:
Utiliza el método indexOf() para buscar un elemento en una lista y guardar su índice
en una variable.
Método de lista push() y pop() Los métodos push() y pop() son métodos de lista
en JavaScript que se utilizan para agregar y eliminar elementos de una lista. El
método push() agrega un elemento al final de la lista, mientras que el método pop()
elimina el último elemento de la lista.
Ejemplo:
133
8 USO AVANZADO DE DATOS
Reto:
Crea una lista con los números del 1 al 10 y usa los métodos push() y pop() para
agregar y eliminar elementos de la lista.
Método de lista shift() y unshift() Los métodos shift() y unshift() son métodos de
lista en JavaScript que se utilizan para agregar y eliminar elementos de una lista.
El método shift() elimina el primer elemento de una lista y devuelve el elemento
eliminado. El método unshift() agrega un elemento al principio de una lista y devuelve
la nueva longitud de la lista.
Ejemplo:
134
8 USO AVANZADO DE DATOS
Reto:
Crea una lista con los números del 1 al 5 y usa los métodos shift() y unshift() para
eliminar y agregar elementos a la lista.
Método de lista slice() y splice() El método slice() se usa para extraer una parte
de una matriz y devolver una nueva matriz. Esta nueva matriz contiene los elementos
extraídos, desde el índice inicial hasta el índice final (no incluido). El método splice()
se usa para agregar o eliminar elementos de una matriz.
Ejemplo:
135
8 USO AVANZADO DE DATOS
Reto:
Crea una matriz con los nombres de los meses del año y usa slice() para extraer los
meses de verano (junio, julio y agosto) y guardalos en una nueva matriz.
136
8 USO AVANZADO DE DATOS
Reto:
Crea una lista con números enteros y usa los métodos sort() y reverse() para orde-
narla de forma ascendente y descendente.
Método de lista forEach() y map() El método forEach() se usa para iterar sobre
una lista de elementos y ejecutar una función para cada elemento. Esta función se
ejecuta una vez por cada elemento de la lista.
Ejemplo:
137
8 USO AVANZADO DE DATOS
El método map() también se usa para iterar sobre una lista de elementos, pero en
lugar de ejecutar una función para cada elemento, devuelve una nueva lista con los
resultados de la función aplicada a cada elemento.
Ejemplo:
138
8 USO AVANZADO DE DATOS
Reto:
Crea una lista de números del 1 al 10 y usa el método map() para devolver una
nueva lista con los números elevados al cuadrado.
Método de lista filter() filter() es una función de JavaScript que se utiliza para
filtrar elementos de una matriz. Esta función toma una función de devolución de
llamada como argumento y devuelve una nueva matriz con todos los elementos
que pasan la prueba implementada por la función de devolución de llamada.
Ejemplo:
Supongamos que tenemos una matriz de números enteros y queremos filtrar los
números mayores que 5.
Reto:
Utiliza la función filter() para filtrar los elementos de una matriz de cadenas que
contengan la letra qar.
139
8 USO AVANZADO DE DATOS
través de los elementos del array, llamando a la función de acumulación para cada
uno de ellos y devuelve un único valor.
Ejemplo:
Supongamos que tenemos un array de números y queremos calcular la suma de
todos los elementos del array. Podemos usar reduce() para hacer esto:
Reto:
Utiliza reduce() para calcular el promedio de los elementos de un array de núme-
ros.
140
8 USO AVANZADO DE DATOS
Reto:
Crea un arreglo multidimensional que contenga los nombres de tus amigos y sus
edades.
Los arreglos tipados son arreglos especiales en JavaScript que almacenan valores
de un solo tipo de datos. Estos arreglos son más eficientes que los arreglos nor-
males, ya que los valores se almacenan en un formato de datos específico. Esto
significa que los arreglos tipados son más rápidos y usan menos memoria.
Existen varios tipos de arreglos tipados pero los más comunes son Int8Array y
Uint8Array. Int8Array almacena valores enteros de 8 bits, mientras que Uint8Array
almacena valores sin signo de 8 bits.
Ejemplo:
141
8 USO AVANZADO DE DATOS
Reto:
Crea un arreglo tipado Uint8Array con los valores [255, 128, 64, 32]. Luego, imprime
los valores del arreglo en la consola.
142
8 USO AVANZADO DE DATOS
Reto:
Crea una función que tome un ArrayBuffer y una cadena de texto como argumentos,
y escriba la cadena de texto en el ArrayBuffer. Luego, crea otra función que tome
un ArrayBuffer como argumento y devuelva la cadena de texto almacenada en el
ArrayBuffer.
143
8 USO AVANZADO DE DATOS
Una vez que tenemos el objeto creado, podemos agregar elementos a él usando la
sintaxis de punto:
144
8 USO AVANZADO DE DATOS
Reto:
Crea un objeto con tres elementos y luego imprímelo en la consola.
8.6.2 Desestructuración
Podemos usar la desestructuración para extraer los datos del objeto y asignarlos a
variables:
145
8 USO AVANZADO DE DATOS
Reto:
Crea un objeto con información de una película y usa la desestructuración para
extraer los datos y asignarlos a variables. Luego, imprime los datos en la consola.
146
8 USO AVANZADO DE DATOS
Reto:
Crea un objeto con tres propiedades y modifica una de ellas usando la notación de
punto y la notación de corchetes.
147
8 USO AVANZADO DE DATOS
Reto:
Crea un objeto con tres propiedades y elimina una de ellas usando la palabra clave
delete.
148
8 USO AVANZADO DE DATOS
Object es uno de los objetos básicos de JavaScript. Está disponible en todos los
navegadores y se usa para crear objetos y trabajar con ellos.
Las propiedades de Object son:
149
8 USO AVANZADO DE DATOS
Ejemplo:
Supongamos que queremos comprobar si un objeto tiene una propiedad específica.
Podemos usar el método hasOwnProperty() para hacer esto:
Reto:
Crea un objeto con algunas propiedades y usa el método propertyIsEnumerable()
para comprobar si una propiedad es enumerable.
150
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea un objeto llamado miObjeto que tenga las mismas propiedades y métodos que
el objeto prototipo. Usa el método create() para crear el objeto.
9.1 Paradigma
151
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
objetos se relacionan entre sí para formar una estructura de datos compleja. JavaS-
cript es un lenguaje de programación orientado a objetos, lo que significa que los
programadores pueden crear objetos y usarlos para construir aplicaciones.
Ejemplo:
A continuación se muestra un ejemplo de una clase de objeto en JavaScript. No
tienes que entenderla ahora ya que en las siguientes lecciones veremos todos los
detalles.
Reto:
Crea un de objeto llamado Auto que tenga los atributos marca, modelo y año. Agrega
un método llamado mostrarInfo que imprima en la consola la información del auto.
Crea 2 objetos más para otros autos para que veas que requiere mucho código
repetido que podremos simplificarlo con los conocimientos de este capítulo.
152
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Una función constructora es una función especial en JavaScript que se usa para
crear objetos. Esta función se define con la palabra clave new y se usa para crear
una instancia de un objeto. Esta función se usa para crear objetos con propiedades
y métodos específicos.
Ejemplo:
A continuación se muestra un ejemplo de una función constructora en JavaScript
para crear un objeto Persona con propiedades nombre y edad:
Reto:
Crea una función constructora en JavaScript para crear un objeto Auto con propieda-
des marca, modelo y año. Luego, crea una instancia de Auto y muestra los valores
de sus propiedades en la consola.
153
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
9.3 Contexto
Ahora, supongamos que queremos crear una función que imprima el nombre y la
edad de la persona. Para hacer esto, podemos usar la palabra clave this para acce-
der a las propiedades del objeto persona dentro de la función.
154
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea un objeto llamado libro con dos propiedades: título y autor. Luego, crea una
función llamada imprimirLibro que imprima el título y el autor del libro usando la
palabra clave this. Finalmente, llama a la función imprimirLibro y pasa el objeto libro
como el contexto de la función.
155
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
call() El método call() permite llamar a una función con un contexto de ejecución
específico. El primer argumento de call() es el contexto de ejecución, seguido de los
argumentos de la función.
Ejemplo:
apply() El método apply() funciona de manera similar al método call(), con la dife-
rencia de que los argumentos de la función se pasan como una lista.
Ejemplo:
156
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
bind() El método bind() crea una nueva función con el contexto de ejecución espe-
cificado. Esta nueva función puede ser llamada posteriormente con los argumentos
especificados.
Ejemplo:
157
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Intenta crear una función que use call(), apply() y bind() para cambiar el contexto de
ejecución de una función.
158
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
9.4 Prototipo
159
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea un objeto qProfesorrque herede las propiedades y métodos de qPersonar.
Agrega una propiedad qmateriaral objeto qProfesorry asígnale un valor. Luego,
imprime el valor de la propiedad qmateriaren la consola.
160
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea un objeto prototipo llamado vehiculo con las propiedades marca y modelo, y
un método encender que imprima en la consola "El vehículo está encendido". Lue-
go, crea un objeto que herede de vehiculo y asigna los valores apropiados a las
propiedades. Finalmente, llama al método encender para verificar que funciona.
161
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
9.6 Clases
Las clases en JavaScript son una forma de definir objetos con una sintaxis más clara
y concisa (en lugar de las lecciones revisadas en este capítulo usando funciones).
Estas clases se definen usando la palabra clave class y se pueden usar para crear
objetos con propiedades y métodos similares.
Ejemplo:
Por ejemplo, podemos crear una clase llamada Persona que tenga propiedades
como nombre, edad y genero:
constructor() es una función especial en JavaScript que se usa para crear e inicializar
objetos. Esta función se usa para crear una nueva instancia de un objeto, asignar
valores a sus propiedades y luego devolver el objeto.
Ahora podemos crear una instancia de esta clase usando el constructor:
162
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
new en JavaScript es una palabra clave que se usa para crear una nueva instancia
de un objeto. Esto significa que se usa para crear un objeto a partir de una clase o
constructor.
Reto:
Crea una clase llamada Auto que tenga propiedades como marca, modelo y año.
Luego, crea una instancia de esta clase usando el constructor.
Las declaraciones de clases en JavaScript son una forma de definir una clase y sus
miembros. Estas declaraciones se usan para crear una nueva clase con propiedades
y métodos. Por otro lado, las expresiones de clases son una forma de definir una
clase y sus miembros en una sola línea. Estas expresiones se usan para crear una
nueva clase con propiedades y métodos en una sola línea.
Ejemplo:
Declaración de Clase:
163
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Expresión de Clase:
164
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Crea una clase llamada Vehiculo con dos propiedades: marca y modelo. Agrega
un método llamado mostrarInfo que imprima en consola la marca y el modelo del
vehículo.
Ahora, podemos crear una instancia de la clase Persona y usar el método getEdad()
para obtener la edad de la persona:
165
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea una clase llamada CuentaBancaria con los atributos nombre y saldo. Agrega
un método llamado depositar() que reciba una cantidad como parámetro y aumente
el saldo de la cuenta en esa cantidad.
Los campos públicos en JavaScript son variables o métodos que se pueden acceder
desde cualquier parte del código. Esto significa que no hay necesidad de crear una
instancia de una clase para acceder a estos campos.
Ejemplo:
166
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea una clase llamada Vehículo con un campo público llamado ruedas y asígnale
el valor 4. Luego, crea una instancia de la clase y accede al campo público para
imprimir su valor en la consola.
Los campos privados en JavaScript son aquellos que no se pueden acceder desde
fuera de la clase o objeto. Esto significa que los campos privados no se pueden
modificar desde fuera de la clase o objeto. Se aplican a propiedades y métodos
nombrándolos con el símbolo #.
Ejemplo:
167
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
168
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea una clase llamada CuentaBancaria que tenga dos campos privados: saldo y
interes. Agrega un método llamado calcularInteres que calcule el interes y lo agregue
al saldo.
169
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
Reto:
Crea una clase llamada Vehiculo que tenga una propiedad estática llamada
numeroDeVehiculos que se incremente cada vez que se crea una nueva instancia
de la clase.
Los getters y setters son funciones especiales en JavaScript que nos permiten ob-
tener y establecer valores de un objeto. Estas funciones nos permiten controlar el
acceso a los datos de un objeto, permitiendo que los datos sean leídos y escritos
de forma segura.
Ejemplo:
170
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
171
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
9.13 Herencia
172
9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)
extends es una palabra clave para heredar propiedades y métodos de una clase a
otra.
super() es una palabra clave que se usa para llamar al constructor de la clase padre y
pasar argumentos. Esto significa que se puede acceder a los métodos y propiedades
de la clase padre desde la clase hija.
173
10 ASINCRONÍA
Reto:
Crea una clase Persona que tenga las propiedades nombre, edad y genero, y los
métodos saludar() y cumpleaños(). Luego, crea una clase Estudiante que herede de
Persona y tenga las propiedades curso y promedio, y el método estudiar().
10 Asincronía
10.1 Temporizadores
174
10 ASINCRONÍA
Reto:
Escribe un código que muestre un mensaje en la consola después de 10 segundos.
Luego, cancela la ejecución del mensaje.
175
10 ASINCRONÍA
Reto:
Crea una función que imprima un número en la consola cada segundo, desde el
número 1 hasta el número 10. Utiliza setInterval() y clearInterval() para lograrlo.
10.2 Promesas
176
10 ASINCRONÍA
177
10 ASINCRONÍA
Reto:
Crea una función que tome una lista de números como argumento y devuelva la
suma de todos los números usando encadenamiento de promesas.
178
10 ASINCRONÍA
179
10 ASINCRONÍA
Las promesas en JavaScript son objetos que representan el resultado de una ope-
ración asíncrona. Esto significa que una promesa puede tener uno de tres estados:
pendiente, satisfecha o rechazada. Las promesas múltiples son una forma de ma-
nejar varias promesas al mismo tiempo. Esto significa que puedes ejecutar varias
promesas al mismo tiempo y recibir una sola respuesta cuando todas las promesas
se hayan completado.
180
10 ASINCRONÍA
Ejemplo:
Supongamos que queremos obtener los datos de dos APIs diferentes. Podemos
usar promesas múltiples para hacer esto de la siguiente manera:
Reto:
Crea una función que use promesas múltiples para obtener los datos de tres APIs
diferentes. La función debe devolver una promesa que se resuelva con los datos de
las tres APIs.
Propiedades
181
10 ASINCRONÍA
Métodos
• Promise.all(): Esta función toma una matriz de promesas y devuelve una pro-
mesa que se resuelve cuando todas las promesas de la matriz se han resuelto.
• Promise.race(): Esta función toma una lista de promesas y devuelve una pro-
mesa que se resuelve o rechaza tan pronto como una de las promesas de la
lista se resuelve o rechaza.
• Promise.reject(): Esta función devuelve una promesa rechazada con un valor
especificado.
• Promise.resolve(): Esta función devuelve una promesa resuelta con un valor
especificado.
Ejemplo:
A continuación se muestra un ejemplo de código que usa los métodos Promise.all()
y Promise.race() para resolver una matriz de promesas:
182
10 ASINCRONÍA
Reto:
Intenta crear una promesa que se resuelva después de 5 segundos y luego imprime
un mensaje en la consola.
10.3 async/await
183
11 MÓDULOS
En este ejemplo, la función obtenerDatos es una función asíncrona que usa fetch
para obtener datos de una URL y luego imprimirlos en la consola. La palabra clave
await se usa para esperar a que la promesa devuelta por fetch se resuelva antes de
continuar con el código.
Reto:
Escribe una función asíncrona que use fetch para obtener una lista de usuarios de
una URL y luego imprima el nombre de cada usuario en la consola.
11 Módulos
Los módulos en JavaScript son una forma de organizar el código para que sea más
fácil de mantener y compartir. Esta característica fue introducida en ECMAScript
6 (ES6) en 2015, y desde entonces se ha convertido en una parte integral de la
programación en JavaScript.
184
11 MÓDULOS
185
11 MÓDULOS
Reto:
Crea un módulo que contenga una función para calcular el área de un rectángulo.
Luego, importa el módulo en un archivo principal y usa la función para calcular el
área de un rectángulo con lados de 5 y 10.
11.1.2 CommonJS
186
11 MÓDULOS
Reto:
Crea un archivo llamado math.js que contenga una función para calcular el área de
un rectángulo. Luego, en otro archivo, importa la función areaDelRectangulo usando
CommonJS y usa la función para calcular el área de un rectángulo con un ancho de
4 y un alto de 5. Corre el código en Node.js.
11.1.3 Webpack
187
11 MÓDULOS
11.1.4 Babel
Sin embargo, los navegadores antiguos no entienden las funciones de flecha. Por
lo tanto, si queremos que nuestro código funcione en todos los navegadores, ne-
cesitamos usar Babel para convertir nuestro código en una versión compatible con
navegadores antiguos. El código convertido por Babel se vería así:
188
11 MÓDULOS
Reto:
Revisa la documentación de Babel y convierte un tipo de módulo a otro.
Las extensiones .mjs y .js son dos tipos de archivos de JavaScript. La extensión .mjs
se usa para archivos de JavaScript modulares, mientras que la extensión .js se usa
para archivos de JavaScript estándar. La extensión .mjs es necesaria en Node.js
para indicar que se usen módulos de JavaScript, de otra manera utiliza módulos
CommonJS.
Un ejemplo práctico de la diferencia entre .mjs y .js es el siguiente:
Archivo .mjs
Archivo .js
189
11 MÓDULOS
11.2 Exportar
Exportar en JavaScript es una forma de compartir código entre archivos. Esto sig-
nifica que un archivo puede exportar variables, funciones y objetos para que otros
archivos los puedan usar.
Ejemplo:
Supongamos que tenemos un archivo llamado math.js que contiene una función
para calcular el área de un círculo:
190
11 MÓDULOS
Para que otros archivos puedan usar esta función, necesitamos exportarla. Esto se
hace usando la palabra clave export:
Reto:
Crea un archivo llamado math.js que exporte una función llamada sumar que tome
191
11 MÓDULOS
dos números como argumentos y devuelva la suma de ellos. Luego, crea otro archi-
vo llamado app.js que importe la función sumar y la use para imprimir la suma de
dos números en la consola.
11.3 Importar
Ahora, si queremos usar esta función en otro archivo, podemos importarla usando
la palabra clave import:
192
11 MÓDULOS
Reto:
Crea un archivo llamado math.js que contenga una función para calcular el área de
un rectángulo. Luego, importa la función en otro archivo y usala para calcular el área
de un rectángulo con lados de 3 y 4.
193
11 MÓDULOS
Reto:
Crea un archivo JavaScript llamado miModulo.js que exporte una clase llamada Mi-
Clase. Luego, crea un archivo main.js que importe la clase MiClase y cree una ins-
tancia de la misma. Por último, imprime el nombre de la clase en la consola.
194
11 MÓDULOS
Ejemplo:
Reto:
Intenta importar un módulo y asignarle un alias para su uso.
195
11 MÓDULOS
Reto:
Instala un paquete con npm. Puedes visitar el sitio web de npm https://www.npmjs.com/
y ver la documentación en instrucciones de instalación de cientos de librerías.
196
11 MÓDULOS
Reto:
Importa un móduloa que has creado previamente de forma dinámica.
197
12 ITERADORES Y GENERADORES
12 Iteradores y generadores
Los objetos iteradores en JavaScript son objetos que permiten iterar sobre un con-
junto de elementos. Estos objetos tienen un método llamado next() que devuelve el
siguiente elemento en la secuencia.
198
12 ITERADORES Y GENERADORES
En este ejemplo vemos que hemos creado el objeto iterador manualmente pero
JavaScript viene con objetos iteradores que se generan a partir de un objeto iterable
como una lista. Veremos más detalles en las siguientes lecciones.
Reto:
Crea un objeto iterador que itere sobre una lista de textos y devuelva cada elemento
de la lista como un objeto con dos propiedades: una para el índice y otra para el
valor.
Los objetos iterables en JavaScript son aquellos que se pueden recorrer con un
bucle. Esto significa que se pueden usar para recorrer una colección de elementos,
como un array o un objeto.
199
12 ITERADORES Y GENERADORES
Reto:
Crea un array con los nombres de tus amigos y usa un bucle for para mostrar cada
uno de ellos por pantalla.
next() en JavaScript es una función que se utiliza para iterar sobre un objeto iterable.
Esto significa que se puede usar para recorrer una secuencia de elementos, como
una lista, un texto o un objeto.
Ejemplo:
200
12 ITERADORES Y GENERADORES
Reto:
Crea una función que use la función next() para recorrer una matriz de números y
devolver la suma de todos los elementos.
201
12 ITERADORES Y GENERADORES
Reto:
Crea una función generadora que devuelva una secuencia de números del 1 al 10.
Luego, usa el objeto generador para imprimir cada número en la consola.
12.5 yield
yield es una palabra clave en JavaScript que se usa para crear generadores. Un ge-
nerador es una función especial que puede devolver múltiples valores a lo largo del
tiempo. Esto significa que un generador puedeqrecordarrsu estado entre llamadas,
lo que le permite devolver valores diferentes cada vez que se llama.
Ejemplo:
A continuación se muestra un ejemplo de un generador que devuelve los números
pares entre 0 y 10:
202
13 INTERNACIONALIZACIÓN
Reto:
Crea un generador que devuelva los números impares entre 0 y 10.
13 Internacionalización
203
13 INTERNACIONALIZACIÓN
Por ejemplo, podemos usar el objeto Intl para formatear una fecha en un formato
específico. Por ejemplo, para formatear una fecha en el formato de fecha larga de
Estados Unidos, podemos usar el siguiente código:
Reto:
Utilizando el objeto Intl, escribe una función que tome una fecha como parámetro
y devuelva una cadena con la fecha formateada en el formato de fecha corta de
España.
204
13 INTERNACIONALIZACIÓN
Reto:
Utilizando el objeto DateTimeFormat, crea una función que tome una fecha y hora
como parámetro y devuelva una cadena de texto con la fecha y hora formateadas
en el formato qdd/mm/aaaa hh:mmr.
205
13 INTERNACIONALIZACIÓN
Reto:
Utiliza el objeto NumberFormat para formatear el número 1234567.89 para mostrarlo
con tres decimales, un separador de miles y el símbolo de la moneda euro.
206
14 META
Reto:
Crea una función que tome una lista de palabras en español como parámetro y
devuelva la lista ordenada usando el objeto Collator.
14 Meta
El objeto Proxy en JavaScript es una herramienta que nos permite interceptar y ma-
nipular cualquier operación realizada sobre un objeto. Esto significa que podemos
controlar el comportamiento de un objeto cuando se realizan operaciones como lec-
tura, escritura, enumeración, invocación, etc.
Ejemplo:
Por ejemplo, podemos usar un objeto Proxy para controlar el comportamiento de un
objeto cuando se intenta leer una propiedad. Por ejemplo, podemos usar un Proxy
para devolver un valor predeterminado si la propiedad no existe:
207
14 META
Reto:
Crea un objeto Proxy que controle el comportamiento de un objeto cuando se intenta
escribir una propiedad. El Proxy debe validar que el valor de la propiedad sea un
número entero y, si no es así, debe lanzar un error.
El objeto Reflect es una API de JavaScript que proporciona métodos para interactuar
con los objetos de JavaScript. Esta API proporciona una forma de interactuar con
los objetos de JavaScript de una manera más sencilla y segura. Esto significa que
los desarrolladores pueden usar el objeto Reflect para realizar tareas como definir
propiedades, definir métodos, establecer y obtener valores, etc.
208
15 SIGUIENTES PASOS
Ejemplo:
Por ejemplo, el siguiente código muestra cómo usar el objeto Reflect para definir
una propiedad en un objeto:
Reto:
Crea una función que use el objeto Reflect para definir una propiedad en un objeto
y luego imprima el valor de la propiedad.
15 Siguientes pasos
15.1 Herramientas
209
15 SIGUIENTES PASOS
15.2 Recursos
210
15 SIGUIENTES PASOS
1. Practicar JavaScript: Una vez que hayas aprendido los conceptos básicos de
JavaScript, es importante practicar para mejorar tus habilidades. Puedes hacer
esto escribiendo código en un editor de texto y ejecutándolo en un navegador
web.
2. Aprender un marco de JavaScript: Un marco de JavaScript es un conjunto
de herramientas y librerías que te ayudan a desarrollar aplicaciones web más
rápido. Algunos de los marcos más populares son React, Angular y Vue.
3. Aprender una biblioteca de JavaScript: Una biblioteca de JavaScript es un con-
junto de funciones y herramientas que te ayudan a realizar tareas comunes de
desarrollo web. Algunas de las bibliotecas más populares son jQuery, Lodash
y Underscore.
4. Aprender una herramienta de desarrollo de JavaScript: Una herramienta de
desarrollo de JavaScript es una herramienta que te ayuda a escribir, depurar y
optimizar tu código. Algunas de las herramientas más populares son Webpack,
Babel y Gulp.
5. Aprender una base de datos relacional: Una base de datos relacional es una
base de datos que almacena datos en tablas relacionadas entre sí. Algunas
de las bases de datos relacionales más populares son MySQL, PostgreSQL y
SQLite.
6. Aprender una base de datos no relacional: Una base de datos no relacional es
una base de datos que almacena datos en formato de documentos. Algunas
de las bases de datos no relacionales más populares son MongoDB, CouchDB
y Redis.
211
15 SIGUIENTES PASOS
1. ¿Qué es JavaScript?
212
15 SIGUIENTES PASOS
• Una clase es una plantilla para crear objetos. En JavaScript, las clases se
definen usando la palabra clave qclassr.
213
15 SIGUIENTES PASOS
• Una etiqueta es una palabra clave que se utiliza para marcar una sección de
código. En JavaScript, las etiquetas se escriben entre corchetes.
214
15 SIGUIENTES PASOS
• Una sentencia de control es una instrucción que se utiliza para controlar el flujo
de un programa. En JavaScript, las sentencias de control se escriben usando
la palabra clave qswitchr.
• Una sentencia de salto es una instrucción que se utiliza para saltar a una parte
específica de un programa. En JavaScript, las sentencias de salto se escriben
usando la palabra clave qbreakr.
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
sección de código. En JavaScript, las sentencias de etiqueta se escriben usan-
do la palabra clave qlabelr.
215
15 SIGUIENTES PASOS
• Una sentencia de función es una instrucción que se utiliza para definir una fun-
ción. En JavaScript, las sentencias de función se escriben usando la palabra
clave qfunctionr.
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
sección de código. En JavaScript, las sentencias de etiqueta se escriben usan-
do la palabra clave qlabelr.
• Una sentencia de clase es una instrucción que se utiliza para definir una clase.
En JavaScript, las sentencias de clase se escriben usando la palabra clave
qclassr.
216
15 SIGUIENTES PASOS
• Una sentencia de objeto es una instrucción que se utiliza para crear un objeto.
En JavaScript, las sentencias de objeto se escriben usando la palabra clave
qnewr.
217
15 SIGUIENTES PASOS
218
15 SIGUIENTES PASOS
219