13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 1/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

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

about:blank 2/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

3.7 Bloques e indentación . . . . . . . . . . . . . . . . . . . . . . . . 26

3.8 Estructuras de control de flujo y excepciones . . . . . . . . . . . . . 27
3.9 Conjunto de caracteres . . . . . . . . . . . . . . . . . . . . . . . 29
3.10 Sensibilidad de mayúsculas y minúsculas . . . . . . . . . . . . . . 29

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

about:blank 3/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

4.15 Conversión de tipos de datos . . . . . . . . . . . . . . . . . . . . 51

4.16 Coerción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

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

6 Estructuras de control de flujo 69

6.1 Condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
6.1.1 if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
6.1.2 iffelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
6.1.3 iffeliffelse . . . . . . . . . . . . . . . . . . . . . . . . . 71
6.1.4 Operador ternario (?) . . . . . . . . . . . . . . . . . . . . . 72
6.1.5 Condicionales anidados . . . . . . . . . . . . . . . . . . . 73
6.1.6 switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.2 Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.2.1 for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.2.2 while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
6.2.3 dofwhile . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.2.4 continue . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.2.5 break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

about:blank 4/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

8 Uso avanzado de datos 106

8.1 Uso de números . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
8.1.1 Numeros decimales . . . . . . . . . . . . . . . . . . . . . 106
8.1.2 Numeros binarios . . . . . . . . . . . . . . . . . . . . . . . 106

about:blank 5/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

8.1.3 Números octales . . . . . . . . . . . . . . . . . . . . . . . 107

8.1.4 Números hexadecimales . . . . . . . . . . . . . . . . . . . 108
8.1.5 Infiniy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
8.1.6 NaN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
8.1.7 Propiedades y métodos del objeto Number . . . . . . . . . . 110
8.1.8 Propiedades comunes del objeto Number . . . . . . . . . . . 112
8.1.9 Propiedades y métodos del objeto Math . . . . . . . . . . . . 115
8.1.10 Propiedades y métodos del objeto BigInt . . . . . . . . . . . 116
8.2 Uso de fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
8.2.1 Propiedades y métodos del objeto Date . . . . . . . . . . . . 118
8.3 Uso de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
8.3.1 Secuencias de escape . . . . . . . . . . . . . . . . . . . . 119
8.3.2 Convertir texto a números . . . . . . . . . . . . . . . . . . 120
8.3.3 Propiedades y métodos del objeto String . . . . . . . . . . . 121
8.4 Uso de expresiones regulares . . . . . . . . . . . . . . . . . . . . 123
8.4.1 Crear una expresión regular . . . . . . . . . . . . . . . . . 123
8.4.2 Búsqueda con banderas en expresiones regulares . . . . . . 123
8.4.3 Propiedades y métodos del objeto RegExp . . . . . . . . . . 124
8.5 Uso de listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
8.5.1 Insertar elementos en una lista . . . . . . . . . . . . . . . . 126
8.5.2 Modificar elementos de listas . . . . . . . . . . . . . . . . . 127
8.5.3 Borrar elementos de listas . . . . . . . . . . . . . . . . . . 128
8.5.4 Propiedades y métodos del objeto Array . . . . . . . . . . . 129
8.5.5 Propiedades comunes de listas . . . . . . . . . . . . . . . . 131
8.5.6 Métodos comunes de listas . . . . . . . . . . . . . . . . . . 132
8.5.7 Arreglos multidimensionales . . . . . . . . . . . . . . . . . 140
8.5.8 Arreglos tipados (Int8Array, Uint8Array) . . . . . . . . . . . . 141
8.5.9 Array buffer . . . . . . . . . . . . . . . . . . . . . . . . . . 142
8.6 Uso de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
8.6.1 Insertar elementos en un objeto . . . . . . . . . . . . . . . . 144

about:blank 6/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

8.6.2 Desestructuración . . . . . . . . . . . . . . . . . . . . . . 145

8.6.3 Modificar propiedades de objetos . . . . . . . . . . . . . . . 146
8.6.4 Borrar propiedades de objetos . . . . . . . . . . . . . . . . 147
8.6.5 Crear métodos . . . . . . . . . . . . . . . . . . . . . . . . 148
8.6.6 Propiedades y métodos del objeto Object . . . . . . . . . . . 149
8.6.7 Métodos comunes de objetos . . . . . . . . . . . . . . . . . 151

9 Programación orientada a objetos (POO) 151

9.1 Paradigma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
9.2 Función constructora . . . . . . . . . . . . . . . . . . . . . . . . . 153
9.3 Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
9.3.1 Contexto usando this . . . . . . . . . . . . . . . . . . . . . 154
9.3.2 Vinculación (call(), apply(), bind()) . . . . . . . . . . . . . . . 155
9.3.3 this en funciones flecha . . . . . . . . . . . . . . . . . . . . 158
9.4 Prototipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
9.5 Herencia prototípica . . . . . . . . . . . . . . . . . . . . . . . . . 161
9.6 Clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
9.7 Declaración y expresion de clases . . . . . . . . . . . . . . . . . . 163
9.8 Métodos de una instancia . . . . . . . . . . . . . . . . . . . . . . 165
9.9 Campos públicos . . . . . . . . . . . . . . . . . . . . . . . . . . 166
9.10 Campos privados . . . . . . . . . . . . . . . . . . . . . . . . . . 167
9.11 Campos estáticos . . . . . . . . . . . . . . . . . . . . . . . . . . 169
9.12 Captadores (getters) y establecedores (setters) . . . . . . . . . . . 170
9.13 Herencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

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

about:blank 7/219
13/7/24, 22:54 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

10.2.2 Encadenamiento de promesas . . . . . . . . . . . . . . . . 178

10.2.3 Propagación de errores de promesas . . . . . . . . . . . . . 179
10.2.4 Fetch API . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
10.2.5 Multiples promesas . . . . . . . . . . . . . . . . . . . . . . 180
10.2.6 Propiedades y métodos del objeto Promise . . . . . . . . . . 181
10.3 async/await . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

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

12 Iteradores y generadores 198

12.1 Objetos iteradores . . . . . . . . . . . . . . . . . . . . . . . . . . 198
12.2 Objetos iterables . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
12.3 Método de iterador next() . . . . . . . . . . . . . . . . . . . . . . 200
12.4 Funciones generadoras . . . . . . . . . . . . . . . . . . . . . . . 201
12.5 yield . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

13 Internacionalización 203
13.1 El objeto Intl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

about:blank 8/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

Contenido

13.2 El objeto DateTimeFormat . . . . . . . . . . . . . . . . . . . . . . 204

13.3 El objeto NumberFormat . . . . . . . . . . . . . . . . . . . . . . . 205
13.4 El objeto Collator . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

14 Meta 207
14.1 El objeto Proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
14.2 El objeto Reflect . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

15 Siguientes pasos 209

15.1 Herramientas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
15.2 Recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
15.3 ¿Que viene después? . . . . . . . . . . . . . . . . . . . . . . . . 211
15.4 Preguntas de entrevista . . . . . . . . . . . . . . . . . . . . . . . 212

about:blank 9/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

1 INTRODUCCIÓN

1 Introducción

1.1 Bienvenida

Bienvenid@ a este libro de Academia X en donde aprenderás JavaScript práctico.

Hola, mi nombre es Xavier Reyes Ochoa y soy el autor de este libro. He trabajado co-
mo consultor en proyectos para Nintendo, Google, entre otros proyectos top-tier, tra-
bajé como líder de un equipo de desarrollo por 3 años, y soy Ingeniero Ex-Amazon.
En mis redes me conocen como Programador X y comparto videos semanalmente
en YouTube desde diversas locaciones del mundo con el objetivo de guiar y motivar a
mis estudiantes mientras trabajo haciendo lo que más me gusta: la programación.
En este libro vas a aprender estos temas:

• 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

about:blank 10/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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!

1.1.1 Libro vivo

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:

• Se revizan los temas con un enfoque práctico incluyendo ejemplos y retos.

• Se evita incluir material de relleno ya que no es eficiente.
• Se evita entrar en detalle en temas simples o avanzados no-prácticos.

Si deseas profundizar en algún tema, te dejo varios recursos populares y avanzados

en la lección de recursos como el estándar de esta tecnología (que puede ser difícil
de leer si recién estás empezando).

11

about:blank 11/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

1 INTRODUCCIÓN

1.2 Prerequisitos

Antes de aprender JavaScript, necesitas lo siguiente:

1. Un computador: cualquier computador moderno tiene las capacidades de co-

rrer este lenguaje. Te recomiendo un monitor de escritorio o laptop ya que
dispositivos móviles o ipads no son cómodos para programar.
2. Sistema operativo: conocimiento básico de cómo utilizar el sistema operativo
en el que se ejecutará JavaScript (por ejemplo, Windows, MacOS, Linux). Te
recomiendo tener el sistema operativo actualizado.
3. Conocimiento básico de la línea de comandos: se utiliza para ejecutar progra-
mas en JavaScript.
4. Un editor de texto: lo necesitas para escribir código de JavaScript. Los editores
de texto más populares son Visual Studio Code, Sublime Text, Atom y Notepad
++.
5. Un navegador web y conexión al internet: es útil para investigar más sobre
esta tecnología cuando tengas dudas. Los navegadores más populares son
Google Chrome, Mozilla Firefox, Safari y Microsoft Edge. Se recomienda tener
el navegador actualizado.

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.

1.3 ¿Cómo evitar bloqueos?

Para sacarle el mayor provecho a este libro:

12

about:blank 12/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

2.1 Visión general

2.1.1 ¿Qué es y porqué debes aprenderlo?

JavaScript es un lenguaje de programación de alto nivel y dinámico que se utiliza

en el desarrollo web para agregar interactividad y dinamismo a las páginas web.
JavaScript permite a los desarrolladores crear funcionalidades en las páginas web
como formularios interactivos, animaciones, juegos, aplicaciones y mucho más.
Hay varias razones por las que deberías aprender JavaScript:

1. Es ampliamente utilizado: JavaScript es uno de los lenguajes de programación

más populares y ampliamente utilizados en el mundo, lo que significa que hay
una gran demanda de desarrolladores JavaScript.

13

about:blank 13/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

En resumen, JavaScript es un lenguaje de programación importante y versátil que

te permitirá desarrollar una amplia gama de aplicaciones y proyectos. Aprender Ja-
vaScript puede ser una inversión valiosa en tu futuro profesional.

2.1.2 ¿En dónde se utiliza?

JavaScript se utiliza en una amplia variedad de contextos y plataformas, incluyen-

do:

1. Desarrollo web: JavaScript es un lenguaje de programación clave para el de-

sarrollo web. Se utiliza para crear funcionalidades interactivas y dinámicas en
las páginas web, como formularios interactivos, animaciones, galerías de imá-
genes, menús desplegables, juegos y mucho más.
2. Aplicaciones web: JavaScript se utiliza para crear aplicaciones web complejas
y avanzadas, como herramientas de productividad, aplicaciones de negocios,
plataformas de e-commerce y mucho más.
3. Aplicaciones móviles: JavaScript se utiliza en la creación de aplicaciones mó-
viles mediante tecnologías como React Native y PhoneGap.
4. Internet de las cosas (IoT): JavaScript se utiliza para desarrollar aplicaciones
IoT, que permiten a los dispositivos conectados a internet interactuar entre sí.

14

about:blank 14/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

5. Desarrollo de servidor: JavaScript se utiliza en el lado del servidor para crear

aplicaciones y servicios web. Con Node.js, puedes crear aplicaciones y servi-
cios web complejos con JavaScript en el lado del servidor.

En resumen, JavaScript es un lenguaje de programación versátil que se utiliza en

una amplia variedad de contextos y plataformas, desde el desarrollo web hasta las
aplicaciones móviles y IoT.

2.1.3 ¿Qué trabajos puedes conseguir?

Aprender JavaScript puede abrirte la puerta a una amplia gama de oportunidades

de carrera, incluyendo:

1. Desarrollador web front-end: Los desarrolladores web front-end utilizan JavaS-

cript para crear y mejorar la experiencia de usuario en las páginas web.
2. Desarrollador web full-stack: Los desarrolladores web full-stack utilizan JavaS-
cript en conjunto con otros lenguajes de programación para crear aplicaciones
web complejas y avanzadas.
3. Desarrollador de aplicaciones móviles: Los desarrolladores de aplicaciones
móviles utilizan JavaScript para crear aplicaciones móviles y hacerlas compa-
tibles con diferentes plataformas.
4. Desarrollador de juegos: Los desarrolladores de juegos utilizan JavaScript pa-
ra crear juegos interactivos y emocionantes para la web y dispositivos móviles.
5. Desarrollador de aplicaciones IoT: Los desarrolladores de aplicaciones IoT
utilizan JavaScript para crear aplicaciones que permiten a los dispositivos co-
nectados a internet interactuar entre sí.
6. Desarrollador de inteligencia artificial y machine learning: JavaScript se utiliza
para crear aplicaciones y algoritmos de inteligencia artificial y machine lear-
ning.

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

about:blank 15/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

móviles y la inteligencia artificial.

2.1.4 ¿Cuánto puedes ganar?

El salario que puedes ganar al utilizar JavaScript en tu trabajo depende de varios

factores, incluyendo tu nivel de experiencia, el tipo de trabajo que desempeñes, la
ubicación geográfica y la industria en la que trabajes.
En general, los desarrolladores web con experiencia en JavaScript pueden esperar
ganar salarios competitivos en comparación con otros profesionales de la tecnolo-
gía. Según Glassdoor, el salario promedio de un desarrollador web en los Estados
Unidos es de aproximadamente $75,000 al año.
Es importante tener en cuenta que estos son solo promedios y que el salario real que
puedes ganar puede ser mayor o menor, dependiendo de los factores mencionados
anteriormente. Además, siempre es una buena idea investigar y hacer preguntas
sobre los salarios y las condiciones laborales antes de aceptar un trabajo.

2.1.5 ¿Cuales son las preguntas más comunes?

Algunas de las preguntas más comunes sobre JavaScript incluyen:

1. ¿Qué es JavaScript y cómo funciona?

2. ¿Qué se puede hacer con JavaScript?
3. ¿Cómo se compara JavaScript con otros lenguajes de programación?
4. ¿Cómo se instala y configura JavaScript en una computadora?
5. ¿Cómo se utiliza JavaScript para crear aplicaciones web y móviles?
6. ¿Cómo se integra JavaScript con otros lenguajes de programación y marcos
de trabajo?
7. ¿Cómo se debuggear y solucionar errores en el código de JavaScript?
8. ¿Cuáles son las mejores prácticas para escribir código JavaScript eficiente y
mantenible?

16

about:blank 16/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

9. ¿Cómo se puede mejorar la seguridad de las aplicaciones de JavaScript?

10. ¿Qué recursos y comunidades pueden ayudar a aprender y mejorar en JavaS-
cript?

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.

2.2 Historia, evolución, y versiones

JavaScript es un lenguaje de programación interpretado, dinámico y orientado a

objetos. Fue creado por Brendan Eich en 1995 para la empresa Netscape Commu-
nications Corporation. Originalmente fue diseñado para ser un lenguaje de scripting
para la web, pero ahora se usa ampliamente en aplicaciones web, servidores y apli-
caciones móviles.
La primera versión de JavaScript fue lanzada en 1996 como parte de Netscape Navi-
gator 2.0. Desde entonces, ha habido varias versiones de JavaScript, cada una con
nuevas características y mejoras. Las versiones más recientes incluyen ECMAScript
6 (ES6) y ECMAScript 7 (ES7).

Las versiones más antiguas de JavaScript se conocen como JavaScript 1.0 y JavaS-
cript 1.1. Estas versiones fueron reemplazadas por JavaScript 1.2, que fue lanzada
en 1997. Esta versión introdujo nuevas características como el soporte para objetos,
la capacidad de crear objetos personalizados y la capacidad de crear funciones.
En 1999, se lanzó JavaScript 1.3, que introdujo mejoras en la velocidad de ejecución
y la capacidad de crear objetos más complejos. Esta versión también introdujo el
soporte para la programación orientada a objetos.

17

about:blank 17/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

En el año 2015, se lanzó ECMAScript 6 que introdujo mejoras en la velocidad de

ejecución y la capacidad de crear objetos más complejos. Esta versión también in-
trodujo el soporte para la programación orientada a objetos.
Desde ES6, cada año se presenta una nueva versión con mejoras siendo la versión
14 para el año 2023.

2.3 Características y ventajas

JavaScript es un lenguaje de programación interpretado, orientado a objetos y mul-

tiplataforma. Está diseñado para crear aplicaciones web interactivas y dinámicas.
Características:

• Es un lenguaje de programación interpretado, lo que significa que no necesita

ser compilado antes de su ejecución.
• Es orientado a objetos, lo que significa que los programas se escriben usando
objetos y sus propiedades.
• Es multiplataforma, lo que significa que se puede ejecutar en diferentes siste-
mas operativos.
• Es compatible con la mayoría de los navegadores web, lo que significa que se
puede ejecutar en la mayoría de los navegadores web.

Ventajas:

• Es fácil de aprender y usar.

• Es un lenguaje de programación versátil, lo que significa que se puede usar
para crear aplicaciones web, aplicaciones de escritorio y aplicaciones móviles.
• Es un lenguaje de programación dinámico, lo que significa que los programas
se pueden cambiar en tiempo de ejecución.
• Es un lenguaje de programación seguro, lo que significa que los programas se
ejecutan en un entorno aislado.

18

about:blank 18/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

• Es un lenguaje de programación escalable, lo que significa que se puede usar

para crear aplicaciones de gran tamaño.

2.4 Diferencias con otros lenguajes de programación

JavaScript es un lenguaje de programación interpretado, lo que significa que el có-

digo se ejecuta directamente sin necesidad de compilarlo. Esto lo hace único entre
los lenguajes de programación, ya que la mayoría de los lenguajes de programación
requieren que el código se compile antes de que se pueda ejecutar.
Otra diferencia importante entre JavaScript y otros lenguajes de programación es
que JavaScript es un lenguaje orientado a objetos. Esto significa que los programa-
dores pueden crear objetos y usarlos para almacenar y manipular datos. Esto es
diferente de otros lenguajes de programación, como C, que son lenguajes estructu-
rados y no orientados a objetos.

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

about:blank 19/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

2 PRIMEROS PASOS

2.5.2 Entorno

Para usar JavaScript en tu computador, no necesitas instalar ningún software es-

pecial, ya que JavaScript es un lenguaje interpretado y se ejecuta en el navegador
web. Sin embargo, hay algunas cosas que debes tener en cuenta:

1. Navegador web: es recomendable tener un navegador web actualizado, como

Google Chrome, Mozilla Firefox, Safari, etc.
2. Editor de texto: puedes usar un editor de texto sencillo como el Bloc de notas
en Windows o TextEdit en Mac, pero también puedes usar un editor de código
más avanzado como Visual Studio Code, Sublime Text, etc.
3. Conocimiento básico de HTML y CSS: ya que JavaScript se utiliza para agre-
gar dinamismo y interactividad a las páginas web, es importante tener una
comprensión básica de HTML y CSS.

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.

2.6 Hola Mundo

qHola Mundores un ejemplo clásico que se utiliza para mostrar el funcionamiento

básico de un lenguaje de programación.
Ejemplo:

En este ejemplo, se imprime el texto qHola Mundoren la consola.

20

about:blank 20/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

La sintaxis de un lenguaje de programación es la estructura de un lenguaje de pro-

gramación, que incluye reglas para la construcción de programas. Estas reglas se
refieren a la forma en que los elementos de un programa se relacionan entre sí,
como los operadores, variables, palabras clave, etc. La sintaxis también se refiere
a la forma en que los programas se escriben, como la indentación y la estructura de
los bloques de código.

3.2 Comentarios (una sola línea y multilínea)

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

about:blank 21/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

Hay dos formas de agregar comentarios en JavaScript:

1. Comentarios de una línea: Se pueden crear comentarios de una sola línea

usando dos barras (//). Por ejemplo:

1. Comentarios de múltiples líneas: Se pueden crear comentarios de múltiples

líneas usando /* */. Por ejemplo:

Ejemplo:

22

about:blank 22/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

Reto:

Comenta este código para que ya no corra y se lea como comentario:

3.3 Literales y tipos de datos

En JavaScript, los literales son valores que se escriben directamente en el código

y no pueden ser modificados. Algunos de los tipos de literales más comunes en
JavaScript son números, texto, booleanos, objetos y arreglos.
Ejemplo:

23

about:blank 23/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

En este ejemplo, se utilizan literales que representan diferentes valores.

Reto:
Crea un arreglo que represente una lista de personas y muestra este arreglo en la
consola.

3.4 Operadores y expresiones

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

about:blank 24/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

3.5 Palabras clave e idenficadores

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.

3.6 Sentencias, declaraciones, y tipado

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

about:blank 25/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

Las declaraciones en JavaScript son sentencias (oraciones o frases) de código que

se utilizan para realizar una tarea específica. Por ejemplo, una declaración puede
ser la creación de una variable, la asignación de un valor a una variable, etc. Las
declaraciones finalizan con punto y coma.

Ejemplo:

En este ejemplo, se ha creado una variable llamada qnombrery se le ha asignado

el valor qJuanr.
El tipado en JavaScript es el proceso de asignar un tipo de datos a una variable.
Por ejemplo, la declaración let x = 5 asigna el tipo de dato entero a la variable x.
JavaScript no es un leguaje tipado por lo que el tipo es inferido implícitamente. Si
deseas usar JavaScript como lenguaje tipado puedes revisar otro lenguaje que se
llama TypeScript en un futuro.

Reto:
Crea 3 variables diferentes (x, y, z) y asígnales los valores de 10, qHola Mundory
true. Luego, imprime los valores de esas variables en la consola.

3.7 Bloques e indentación

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

about:blank 26/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

3.8 Estructuras de control de flujo y excepciones

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

about:blank 27/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 28/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

3 GRAMÁTICA

3.9 Conjunto de caracteres

JavaScript es un lenguaje de programación que utiliza el conjunto de caracteres Uni-

code, que es un conjunto de caracteres amplio y universal que incluye caracteres
de muchos idiomas y símbolos. Esto significa que puede trabajar con caracteres en
muchos idiomas y símbolos diferentes, lo que lo hace ideal para desarrollar aplica-
ciones que deben ser utilizadas por personas de diferentes partes del mundo.

Ejemplo:
Por ejemplo, puedes usar la funciónqcharAt()rpara acceder a un carácter específico
en una cadena:

Reto:
Añade un emoji deqrostro felizr(que es un caracter de Unicode) a la variableqhappyr
.

3.10 Sensibilidad de mayúsculas y minúsculas

JavaScript es un lenguaje de programación case-sensitive, lo que significa que dis-

tingue entre mayúsculas y minúsculas en el nombre de variables, funciones y pala-
bras clave. Esto significa que qHolaMundory qholamundorson considerados dos
nombres de variables diferentes.
Ejemplo:

29

about:blank 29/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

En este ejemplo, se declaran dos variables con nombres diferentes debido a su

sensibilidad a mayúsculas y minúsculas. Cuando se imprimen en la consola, se
muestran los valores asignados a cada una de las variables.
Reto:
Crea dos variables con nombres diferentes debido a la sensibilidad a mayúsculas y
minúsculas y asígnales valores diferentes 10 y 100. La primera variable esoelefantep
y la segunda es la misma palabra en mayúsculas. Imprime los valores de ambas
variables en la consola.

4 Tipos y variables

4.1 Tipos de datos primitivos

Los tipos de datos primitivos en JavaScript son:

• 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

about:blank 30/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

4.2 Tipos de datos no-primitivos

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

about:blank 31/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

Por ejemplo, podemos crear una lista de compañías:

Reto:
Crea una lista que contenga: mazanas, naranjas, y piñas.

4.3 Primitivos

4.3.1 Texto

El texto en JavaScript es un tipo de datos primitivo y se representa mediante la

utilización de comillas simples o dobles.
Ejemplo:

Puedes concatenar dos o más cadenas de texto utilizando el operador de adición

(+). Por ejemplo:

32

about:blank 32/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

Reto:
Crea una variable qarcon 33 como texto.

4.3.2 Número

JavaScript es un lenguaje de programación que permite trabajar con números. Estos

números pueden ser enteros (como 1, 2, 3, etc.), decimales (como 0.1, 0.2, 0.3, etc.)
o números en notación científica (como 1e2, 1e3, 1e4, etc.).
Ejemplo:
Supongamos que queremos calcular el área de un círculo con un radio de 5. Pode-
mos usar la siguiente fórmula para calcular el área:
Area = PI * radio^2
En JavaScript, podemos escribir el código para calcular el área de la siguiente ma-
nera:

33

about:blank 33/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

4.3.3 Entero grande

Entero grande en JavaScript es una forma de representar números enteros de un

tamaño mayor que el que se puede representar con el tipo de datos nativo Number.
Esto se logra mediante la creación de un objeto BigInt, que permite representar
números enteros de hasta 2^53 - 1.
Ejemplo:

Supongamos que queremos representar el número entero 2^53. Esto no se puede

hacer con el tipo de datos nativo Number, ya que el límite es 2^53 - 1. Para repre-
sentar este número, podemos usar un objeto BigInt:

34

about:blank 34/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 35/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

Crea una variable opuedeIngresarpque almacene en un valor booleano indicando

que el usuario no está permitido de ingresar a una app.

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:

En el ejemplo anterior, la variable x no tiene un valor asignado, por lo que se imprime

undefined.
Reto:

Crea una variable indefinida llamada sumar e imprime la variable que debe devolver
undefined.

4.3.6 Símbolo

Un símbolo en JavaScript es un tipo de dato primitivo que representa un valor único

e inmutable. Es decir, no puede ser cambiado. Estos símbolos se utilizan para crear
identificadores únicos para propiedades de objetos y son tipo es poco utilizados en
práctica. Vamos a ver más sobre objetos después.

36

about:blank 36/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 37/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

4.5 Acceder a propiedades de objetos

Acceder en JavaScript es una forma de obtener información de un objeto. Esto se

puede hacer usando la notación de punto o la notación de corchetes.

Ejemplo:

38

about:blank 38/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

Supongamos que tenemos un objeto llamado persona con los siguientes atributos:

Podemos acceder a los atributos del objeto usando la notación de punto:

También podemos acceder a los atributos del objeto usando la notación de corche-
tes:

39

about:blank 39/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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 Colecciones con llave

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

about:blank 40/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 41/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 42/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

En este ejemplo, creamos un WeakMap llamado datosDeUsuario y luego creamos

un objeto usuario con un nombre. Luego, usamos el método set para almacenar
algunos datos relacionados con el usuario en el WeakMap. Finalmente, usamos el
método get para recuperar los datos almacenados.
Reto:
Crea un WeakMap y almacena algunos datos relacionados con un usuario. Luego,
usa el método get para recuperar los datos almacenados.

4.6.4 WeakSets

WeakSets en JavaScript son una colección de objetos únicos que no se pueden

iterar. Esto significa que no se pueden usar bucles para recorrerlos. Esto los hace
útiles para almacenar objetos que no se quieren mantener en memoria por mucho
tiempo.
Ejemplo:
Supongamos que queremos almacenar objetos de usuario en un WeakSet. Esto nos
permitirá mantener una referencia a los usuarios sin mantenerlos en memoria por
mucho tiempo.

43

about:blank 43/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 44/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

En este ejemplo, la lista contiene cinco elementos enteros.

Reto:
Crea una lista en JavaScript que contenga los nombres de los meses del año.

4.8 Acceder a elementos de listas

Acceder a elementos de listas en JavaScript es una tarea sencilla. Para acceder a

un elemento de una lista, simplemente necesitamos conocer el índice del elemento
que queremos acceder. El índice de un elemento de una lista comienza en 0.

Ejemplo:

Reto:

Crea una lista con 5 elementos y accede al tercer elemento de la lista.

45

about:blank 45/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

4.9 Fechas

JavaScript proporciona un objeto de fecha incorporado que permite trabajar con

fechas y horas. El objeto Date se usa para representar una fecha, y se crea con el
constructor Date().
Ejemplo:

Reto:
Crea una fecha y cambia el formato removiendo qyear: onumericprdel ejemplo.

4.10 Expresiones regulares

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

about:blank 46/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

4.11 Declaracion e inicialización (var y let)

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

about:blank 47/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 48/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

4.13 Plantillas de texto

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

about:blank 49/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

4.14 Chequear tipo

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

about:blank 50/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

4 TIPOS Y VARIABLES

4.15 Conversión de tipos de datos

JavaScript es un lenguaje de programación dinámico, lo que significa que los tipos

de datos de una variable pueden cambiar durante la ejecución del programa. Esto
significa que, a veces, es necesario convertir un tipo de datos a otro para que el
programa funcione correctamente.
Ejemplo:
Supongamos que tenemos una variable llamada numero que contiene el valor "5".
Esto es una cadena de caracteres, pero necesitamos convertirlo a un número para
poder realizar operaciones matemáticas con él. Para hacer esto, podemos usar la
función parseInt():

Ahora, numeroEntero contiene el valor 5, que es un número entero.

Reto:
Crea un programa que tome una cadena de caracteres que contiene un número
con decimales (por ejemplo, "3.14") y conviértalo a un número con decimales (por
ejemplo, 3.14).

4.16 Coerción

Coerción en JavaScript es una técnica de programación que se utiliza para convertir

un valor de un tipo de datos a otro automáticamente. Esto se hace para asegurar

51

about:blank 51/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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:

En el ejemplo anterior, la variable x es una cadena de texto, mientras que la variable

y es un número. Al intentar realizar la operación de suma, JavaScript realiza una
coerción de la cadena de texto a un número antes de realizar la operación. Esto
resulta en un resultado de 510.
En JavaScript, se dice que qtodo es un objetorya que existe coerción detrás de
escena para que los tipos primitivos tengan propiedades más avanzadas de objetos
como propiedades y métodos. Esto lo veremos en práctica más adelante.
Reto:
Intenta sumar revertir el orden deel ejemplo como y + x. ¿Qué sucede?

52

about:blank 52/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

5 Operadores

5.1 Operadores de aritméticos (+, -, *, /, %, **, //, ++, t)

Los operadores de aritméticos en JavaScript son usados para realizar operaciones

matemáticas básicas. Estos operadores incluyen:

• +: Suma dos números.

• -: Resta dos números.
• *: Multiplica dos números.
• /: Divide dos números.
• %: Calcula el resto de una división entre dos números.
• **: Calcula la potencia de un número.
• //: Realiza una división entera entre dos números.
• ++: Incrementa un número en uno.
• --: Decrementa un número en uno.

Ejemplo:

53

about:blank 53/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:
Usa los operadores de aritméticos para calcular el área de un círculo con radio 5.

5.2 Operador de agrupación (())

El operador de agrupación en JavaScript es un operador que se utiliza para agrupar

expresiones y forzar la prioridad de una operación. Esto significa que el operador de
agrupación se utiliza para asegurar que una operación se realice antes que otra.
Ejemplo:

54

about:blank 54/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

5.3 Operadores de texto (+, +=)

Los operadores de texto en JavaScript nos permiten concatenar cadenas

Ejemplo:

55

about:blank 55/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:

Une los texto qFatboyry qSlimrcon el operador + añadiendo un espacio entre las
palabras.

5.4 Operadores de asignación (=, +=, -=, *=, /=, %=, **=, //=)

Los operadores de asignación en JavaScript son usados para asignar un valor a

una variable. Estos operadores consisten en un signo igual (=) seguido de uno de
los siguientes operadores:

• +=: Esto significa qagregar ar. Esto significa que el valor de la variable se
incrementará en la cantidad especificada.

Ejemplo:

56

about:blank 56/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 57/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 58/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

• **=: Esto significa qelevar a la potenciar. Esto significa que el valor de la

variable se elevará a la potencia especificada.

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

about:blank 59/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:

Usa los operadores de asignación para calcular el área de un cuadrado donde el

lado es igual a 5.

5.5 Operadores comparativos (==, !=, >, <, >=, <=)

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

about:blank 60/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:
Escribe un programa que compare dos números y determina si el primero es mayor,
menor o igual al segundo.

5.6 Comparar por valor y por referencia

Comparar por valor significa comparar los valores de dos variables para determinar
si son iguales.
Ejemplo:

61

about:blank 61/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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 (==).

5.7 Operadores lógicos (&&, ||, !)

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

about:blank 62/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

5.8 Operadores de bits (&, |, ~, ^, », «, »>)

Los operadores de bits en JavaScript son un conjunto de operadores que permiten

realizar operaciones bit a bit sobre los números enteros. Estos operadores son:

• & (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

about:blank 63/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

5.9 Operadores unarios (delete, typeof, void)

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

about:blank 64/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 65/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

5.10 Operadores relacionales (in, instanceof)

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:

El operador instanceof se usa para determinar si un objeto es una instancia de una

clase determinada. Devuelve true si el objeto es una instancia de la clase, de lo
contrario devuelve false.
Ejemplo:

66

about:blank 66/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:
Usa instanceof para ver la instancia de un número.

5.11 Operador spread (f)

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

about:blank 67/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

5 OPERADORES

Reto:

Usa el operador spread para crear una nueva lista que contenga los elementos de
dos listas diferentes.

5.12 Operador de coma (,)

El operador de coma en JavaScript es un operador binario que se utiliza para separar

expresiones individuales dentro de una sentencia. Esto significa que cada expresión
se evalúa por separado y el resultado de la última expresión se devuelve como
resultado de la sentencia.

Ejemplo:
Por ejemplo, el siguiente código usa el operador de coma para evaluar dos expre-
siones y devolver el resultado de la segunda expresión:

68

about:blank 68/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

En este ejemplo, primero se evalúa la primera expresión (x++), que incrementa el

valor de x en 1. Luego, se evalúa la segunda expresión (y++), que incrementa el valor
de y en 1. El resultado de la segunda expresión (11) se devuelve como resultado de
la sentencia.
Reto:

Escribe una sentencia que use el operador de coma para evaluar tres expresiones
y devolver el resultado de la tercera expresión.

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

about:blank 69/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 70/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 71/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

6.1.4 Operador ternario (?)

El operador condicional ternario en JavaScript es una forma abreviada de escribir

una condición if-else. Esta sintaxis es útil para evaluar una expresión y asignar un
valor basado en el resultado de la evaluación.
Ejemplo:

72

about:blank 72/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

6.1.5 Condicionales anidados

Los condicionales anidados en JavaScript son una forma de estructurar el código

para que se ejecute de manera diferente dependiendo de una serie de condiciones.
Esto se logra anidando varios condicionales dentro de uno.
Ejemplo:

73

about:blank 73/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 74/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

En este ejemplo, la variable diaSemana se evalúa en el switch y dependiendo del

resultado, se ejecuta un bloque de código específico.
default es la condición en caso de que ninguna otra se cumpla.

break evita que corra las siguientes comparaciones y termina el condicional.

Reto:
Crea un programa que evalúe una variable numero y dependiendo del resultado,
imprima un mensaje diferente. Si el número es mayor a 10, imprime qEl número es
mayor a 10r. Si el número es menor a 10, imprime qEl número es menor a 10r.
Si el número es igual a 10, imprime qEl número es igual a 10r.

75

about:blank 75/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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:

En este ejemplo, la inicialización es let i = 0, la condición de parada es i < 10 y la

actualización es i++. Esto significa que el ciclo se ejecutará hasta que i sea mayor
que 10.
Reto:
Escribe un ciclo for que imprima los números del 1 al 10 en orden ascendente.

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

about:blank 76/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

En el ejemplo anterior, se inicializa una variable i con el valor 0. Luego, se ejecuta

un bucle while que se ejecutará mientras i sea menor que 10. Dentro del bucle, se
imprime el valor de i en la consola y se incrementa en 1.
Reto:
Crea un bucle while que imprima los números del 1 al 10 en la consola.

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

about:blank 77/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

En el ejemplo anterior, la sentencia console.log(i) se ejecutará al menos una vez, ya

que la condición i < 5 se evalúa al final de cada iteración.

Reto:
Escribe un programa que imprima los números del 1 al 10 usando un bucle dof
while.

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

about:blank 78/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

Esto imprimirá los números pares entre 0 y 10:

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

about:blank 79/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

A continuación se muestra un ejemplo de cómo usar break para salir de un bucle:

En este ejemplo, el bucle se ejecutará hasta que se encuentre la instrucción break.

Cuando se encuentra, el bucle se detiene y el control se transfiere a la siguiente
instrucción después del bucle.

Reto:
Escribe un programa que imprima los números del 1 al 5, excepto el 3. Utiliza la
palabra clave break para salir del bucle cuando se encuentre el número 3.

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

about:blank 80/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

En este caso, al llegar a continue, saltará a qbucle2r.

Reto:
Reemplaza qcontinue bucle2;rcon qcontinue bucle1;rpara que veas el cambio de
dirección de flujo del código.

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

about:blank 81/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

Podemos usar for...in para recorrer los atributos de este objeto y mostrar su valor
en la consola:

Esto imprimirá 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

about:blank 82/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 83/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

6.3 Excepciones

6.3.1 Tipos de excepciones

Las excepciones en JavaScript son errores que se producen durante la ejecución

de un programa. Estas excepciones pueden ser de varios tipos, entre los que se
incluyen:

• Excepciones de sintaxis: Estas excepciones se producen cuando el código

contiene errores de sintaxis.
• Excepciones de referencia: Estas excepciones se producen cuando el có-
digo contiene errores de referencia. Por ejemplo, si se intenta acceder a un
elemento de una lista que no existe, se producirá una excepción de tiempo de
ejecución.
• Excepciones de tipo: Estas excepciones se producen cuando se intenta rea-
lizar una operación con un tipo de datos incorrecto. Por ejemplo, si se intenta
cambiar una constante.

Ejemplo:

84

about:blank 84/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

La sentencia try/catch en JavaScript es una forma de controlar errores en tiempo de

ejecución. Esta sentencia permite ejecutar un bloque de código y, en caso de que
se produzca un error, ejecutar un bloque de código para manejar el error.
Ejemplo:
A continuación se muestra un ejemplo de cómo se puede utilizar la sentencia
try/catch en JavaScript:

85

about:blank 85/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

6.3.3 Utilizando objectos de errores

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

about:blank 86/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

6 ESTRUCTURAS DE CONTROL DE FLUJO

6.3.4 tryfcatchffinally

try...catch...finally es una estructura de control de flujo en JavaScript que se utiliza

para controlar errores en el código. Esta estructura se compone de tres partes: try,
catch y finally.
finally es la tercera y última parte de la estructura. Aquí se coloca el código que se
ejecutará independientemente de si hay un error en el código de la sección try o
no.
Ejemplo:

Reto:

Intenta escribir código con problemas de sintaxis y utiliza tryfcatchffinally para

controlar los errores.

87

about:blank 87/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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:

En el ejemplo anterior, si el número no se encuentra dentro de ese rango, se lanza

una excepción con la sentencia throw y se muestra un mensaje de error.

Reto:
Verifica si un número es par o impar. Si el número no es un entero, lanza una excep-
ción con la sentencia throw.

88

about:blank 88/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

7 Funciones

7.1 Declarar y llamar 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.

7.2 Parámetros y argumentos

Los argumentos y los parámetros son conceptos relacionados en JavaScript. Los

argumentos son los valores que se pasan a una función cuando se llama. Los pará-

89

about:blank 89/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

Cuando llamamos a la función sumar() pasamos dos argumentos: 2 y 3. Esto permite

reutilizar la función de forma dinámica con diferentes valores.

En este ejemplo, los parámetros son a y b, y los argumentos son 2 y 3.

Reto:

Crea una función llamada multiplicar() que reciba dos parámetros e imprima el re-
sultado de multiplicar los dos argumentos. Luego, llama a la función con dos argu-
mentos y comprueba que el resultado sea correcto.

90

about:blank 90/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

7.3 Parámetros predeterminados

Los parámetros predeterminados en JavaScript son una forma de asignar valores

predeterminados a los parámetros de una función si no se proporcionan argumentos.
Esto significa que si una función espera recibir un argumento, pero no se proporcio-
na, el valor predeterminado se usará en su lugar.
Ejemplo:

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.

7.4 Parámetros de descanso (rest)

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

about:blank 91/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

7.5 El objeto arguments

El objeto arguments es un objeto especial que se pasa a cada función en JavaS-

cript. Está disponible dentro de la función como una variable local. Esto significa
que puede acceder a los argumentos pasados a la función, sin importar cuántos
sean.

Ejemplo:

92

about:blank 92/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 93/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

En este ejemplo, la función areaCirculo toma un radio como argumento y devuelve

el área del círculo. Esto significa que una vez que se ejecuta la función, el valor
devuelto se puede usar en otra parte del código.

Reto:
Escribe una función que tome dos números como argumentos y devuelva el mayor
de los dos.

7.7 Declaración y expresion de funciones

Existen dos formas principales de crear funciones en JavaScript: declaración de

funciones y expresión de funciones.

Declaración de funciones Una declaración de función es una forma de crear una

función en JavaScript. Esta es la sintaxis básica para crear una función:

94

about:blank 94/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

En esta sintaxis, nombreDeFuncion es el nombre de la función, parametros son los

parámetros que se pasan a la función y el cuerpo de la función es el código que se
ejecuta cuando se invoca la función.

Expresión de funciones Una expresión de función es otra forma de crear una

función en JavaScript. Esta es la sintaxis básica para crear una función:

Ejemplo:

A continuación se muestra un ejemplo de una función declarada y una función ex-

presada:

95

about:blank 95/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

7.8 Funciones anidadas

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

about:blank 96/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

Reto:
Intenta crear una función anidada que tome un parámetro y lo multiplique por dos.

7.9 Ámbito global y local

El ámbito global y local en JavaScript se refiere a la visibilidad de variables y funcio-

nes dentro de un programa. El ámbito global se refiere a la visibilidad de variables y
funciones en todo el programa, mientras que el ámbito local se refiere a la visibilidad
de variables y funciones solo dentro de una función.
Ejemplo:

97

about:blank 97/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

En el ejemplo anterior, la variable nombre es global, por lo que es visible en todo

el programa. La función saludar también es global, por lo que es visible en todo el
programa. La variable nombre dentro de saludarAnidada es local, por lo que solo es
visible dentro de la función al igual que la función saludarLocal.
Reto:
Escribe una función que tome dos números como parámetros y devuelva la suma

98

about:blank 98/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

7.10 Devolución de llamada (Callbacks)

Una devolución de llamada (callback) en JavaScript es una función que se pasa

como argumento a otra función. Esta función se ejecuta cuando la función a la que
se le pasó como argumento termina de ejecutarse. Esto permite que se ejecuten
ciertas acciones una vez que una función ha terminado de ejecutarse.
Ejemplo:
Un ejemplo práctico de una devolución de llamada (callback) en JavaScript es el
siguiente:

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

about:blank 99/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

7.11 Elevación de variables y funciones (Hoisting)

La elevación de variables y funciones es un comportamiento en JavaScript en el

que las declaraciones de variables y funciones son qelevadasral inicio del sco-
pe (alcance) en el que se encuentran, independientemente de su ubicación en el
código.
Esto significa que puedes utilizar una variable o una función antes de haberla decla-
rado en el código.
Ejemplo:

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

about:blank 100/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 101/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

La recursividad es un concepto de programación en el que una función se llama a sí

misma. Esto permite a los programadores crear soluciones a problemas complejos
de manera más simple.
Ejemplo:
Un ejemplo de recursividad en JavaScript es una función para calcular el factorial de
un número. El factorial de un número es el producto de todos los números enteros

102

about:blank 102/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

positivos menores o iguales que el número dado. Por ejemplo, el factorial de 5 es 5

* 4 * 3 * 2 * 1 = 120.

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

7.13 Cierres (Clojures)

Los cierres (closures) en JavaScript son una característica de la programación fun-

cional que permite a una función recordar y acceder a su entorno de ejecución,
incluso cuando la función se ha ejecutado fuera de su entorno original. Esto signifi-
ca que una función puede recordar y acceder a las variables y funciones definidas
en su entorno de ejecución, incluso cuando se ejecuta fuera de él.
Ejemplo:

103

about:blank 103/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

7.14 Funciones de flecha

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

about:blank 104/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

7 FUNCIONES

Reto:
Crea una función de flecha que tome dos números como argumentos y devuelva su
producto.

7.15 Funciones predefinidas

Las funciones predefinidas en JavaScript son aquellas que ya vienen incluidas en

el lenguaje y que nos permiten realizar tareas comunes de forma sencilla.
Un ejemplo práctico de una función predefinida en JavaScript es la función
Math.max(), que nos permite encontrar el número más grande de una lista de
números. Por ejemplo, si queremos encontrar el número más grande de la lista [1,
5, 10, 3], podemos usar la función Math.max() de la siguiente manera:

105

about:blank 105/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

8 Uso avanzado de datos

8.1 Uso de números

8.1.1 Numeros decimales

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.

8.1.2 Numeros binarios

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

about:blank 106/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.1.3 Números octales

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

about:blank 107/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.1.4 Números hexadecimales

Los números hexadecimales en JavaScript son una forma de representar números

enteros usando una notación de base 16. Esta notación se usa para representar
valores binarios en una forma más fácil de leer. Los números hexadecimales se
escriben con un prefijo de 0x seguido de una secuencia de dígitos hexadecimales.

Ejemplo:

Reto:
Crea una variable llamada hexNumber2 y asígnale el valor 0xA3. Luego, imprime el
valor de la variable en la consola.

108

about:blank 108/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.1.5 Infiniy

Infinity en JavaScript es un valor especial que representa un número infinito. Esto

significa que no hay límite superior para el valor de Infinity.
Ejemplo:

Un ejemplo práctico de Infinity en JavaScript es cuando se usa para calcular el re-

sultado de una división por cero. Por ejemplo, si dividimos 10 entre 0, el resultado
será Infinity:

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

about:blank 109/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.1.7 Propiedades y métodos del objeto Number

El objeto Number en JavaScript es un objeto global que se utiliza para represen-

tar números. Tiene propiedades y métodos que permiten realizar operaciones con
números.

Propiedades Las propiedades del objeto Number son:

• MAX_VALUE: El número más grande que se puede representar en JavaScript.

• MIN_VALUE: El número más pequeño que se puede representar en JavaS-
cript.
• NEGATIVE_INFINITY: Representa el valor infinito negativo.
• POSITIVE_INFINITY: Representa el valor infinito positivo.
• NaN: Representa un valor no numérico.

Métodos Los métodos del objeto Number son:

110

about:blank 110/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

• toExponential(): Devuelve una cadena que representa el número en notación

exponencial.
• toFixed(): Devuelve una cadena que representa el número con el número de
decimales especificado.
• toPrecision(): Devuelve una cadena que representa el número con el número
de dígitos especificado.
• toString(): Devuelve una cadena que representa el número.
• valueOf(): Devuelve el valor numérico del número.

Ejemplo:

Reto:
Utiliza los métodos del objeto Number para crear una función que tome un número

111

about:blank 111/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

como parámetro y devuelva una cadena con el número formateado con dos decima-
les.

8.1.8 Propiedades comunes del objeto Number

Number.MIN_VALUE Number.MIN_VALUE es una constante de JavaScript que

representa el número más pequeño representable en una variable de tipo Number.
Esta constante es igual a 5e-324.

Ejemplo:

Reto:
Crea una variable llamada maxValue y asígnale el valor de Number.MAX_VALUE.
Luego, imprime el valor de maxValue en la consola.

Number.MAX_VALUE Number.MAX_VALUE en JavaScript es una constante que

representa el número más grande que se puede representar en JavaScript. Esta
constante es igual a 1.7976931348623157e+308.

Ejemplo:

112

about:blank 112/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

Number.POSITIVE_INFINITY Number.POSITIVE_INFINITY es una propiedad de

JavaScript que representa el valor infinito positivo. Esto significa que el valor es
mayor que cualquier otro número.
Ejemplo:

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

about:blank 113/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

Number.NEGATIVE_INFINITY Number.NEGATIVE_INFINITY es una propiedad

de JavaScript que representa el número infinito negativo. Esta propiedad se utiliza
para representar un valor numérico que es menor que cualquier otro número.
Ejemplo:

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.

Number.MAX_SAFE_INTEGER Number.MAX_SAFE_INTEGER en JavaScript

es una constante que representa el número entero más grande que se puede
representar de manera segura en JavaScript. Esto significa que cualquier número
mayor que esta constante puede perder precisión al ser representado. El valor de
esta constante es 9007199254740991.
Ejemplo:

114

about:blank 114/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.1.9 Propiedades y métodos del objeto Math

El objeto Math en JavaScript es un objeto global que proporciona métodos y propie-

dades para realizar operaciones matemáticas.

Propiedades Las propiedades del objeto Math son constantes que contienen va-
lores matemáticos específicos. Algunos ejemplos de propiedades son:

• Math.PI: El número pi (3.14159f)

• Math.E: El número e (2.71828f)
• Math.SQRT2: La raíz cuadrada de 2 (1.41421f)

115

about:blank 115/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.1.10 Propiedades y métodos del objeto BigInt

BigInt es un nuevo tipo de datos en JavaScript que permite representar números

enteros de tamaño arbitrario. Esto significa que los números enteros más grandes
que se pueden representar con el tipo de datos Number de JavaScript ya no son un
problema.

116

about:blank 116/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 117/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.2 Uso de fechas

8.2.1 Propiedades y métodos del objeto Date

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:

• getFullYear(): Devuelve el año actual.

• getMonth(): Devuelve el mes actual.
• getDate(): Devuelve el día del mes actual.
• getHours(): Devuelve la hora actual.
• getMinutes(): Devuelve los minutos actuales.

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:

• setFullYear(): Establece el año actual.

• setMonth(): Establece el mes actual.
• setDate(): Establece el día del mes actual.
• setHours(): Establece la hora actual.
• setMinutes(): Establece los minutos actuales.

Ejemplo:

A continuación se muestra un ejemplo de cómo usar el objeto Date para obtener la

fecha y hora actuales:

118

about:blank 118/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.3 Uso de texto

8.3.1 Secuencias de escape

Las secuencias de escape en JavaScript son caracteres especiales que se usan

para representar caracteres especiales o caracteres de control. Estas secuencias
de escape se escriben como una barra invertida seguida de una letra o un número.
Ejemplo:
Por ejemplo, para mostrar una barra invertida en una cadena de texto, se usa la
secuencia de escape \. Por lo tanto, la siguiente cadena de texto:

119

about:blank 119/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.3.2 Convertir texto a números

En JavaScript, podemos convertir una cadena de texto a un número usando la fun-

ción parseInt() o parseFloat(). Estas funciones toman una cadena de texto como
argumento y devuelven un número entero o un número de punto flotante, respecti-
vamente.
Ejemplo:

120

about:blank 120/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.3.3 Propiedades y métodos del objeto String

El objeto String en JavaScript es un objeto global que se utiliza para representar

cadenas de texto. Está compuesto por una serie de propiedades y métodos que
permiten manipular y trabajar con cadenas de texto.

Propiedades Las propiedades del objeto String son:

• length: Esta propiedad devuelve la longitud de la cadena de texto.

Métodos Los métodos del objeto String son:

• charAt(): Esta función devuelve el carácter en la posición especificada de la

cadena de texto.

121

about:blank 121/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

• indexOf(): Esta función devuelve la posición de la primera aparición de un ca-

rácter o subcadena en la cadena de texto.
• replace(): Esta función reemplaza un carácter o subcadena por otro carácter
o subcadena en la cadena de texto.

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

about:blank 122/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.4 Uso de expresiones regulares

8.4.1 Crear una expresión regular

Una expresión regular en JavaScript es una secuencia de caracteres que forma un

patrón de búsqueda, que se utiliza para encontrar una coincidencia con una cadena
de texto dada. Las expresiones regulares son tema bastante avanzado y complejo
por lo que requieren su propio libro.

Ejemplo:

Reto:
Busca en línea la expresión regular para validar una dirección de correo electrónico
e intenta decifrar lo que hace.

8.4.2 Búsqueda con banderas en expresiones regulares

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

about:blank 123/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

colocan al final de la expresión regular y se usan para cambiar el comportamiento

de la búsqueda.
Las banderas más comunes son:

• i: Esta bandera hace que la búsqueda sea insensible a mayúsculas y minús-

culas.
• g: Esta bandera hace que la búsqueda sea global, es decir, que busque todas
las coincidencias en el texto.
• m: Esta bandera hace que la búsqueda sea multilínea, es decir, que busque
coincidencias en todas las líneas del texto.

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.

8.4.3 Propiedades y métodos del objeto RegExp

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.

Propiedades Las propiedades del objeto RegExp son:

• global: Indica si la búsqueda debe ser global o no.

124

about:blank 124/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

• ignoreCase: Indica si la búsqueda debe ser sensible a mayúsculas y minúscu-

las o no.
• multiline: Indica si la búsqueda debe ser realizada en múltiples líneas o no.
• lastIndex: Indica el índice de la última coincidencia encontrada.
• source: Devuelve la expresión regular como una cadena.

Métodos Los métodos del objeto RegExp son:

• exec(): Busca una coincidencia en una cadena de texto y devuelve un array

con los resultados.
• test(): Busca una coincidencia en una cadena de texto y devuelve un valor
booleano.

Métodos de texto con RegExp

• match(): Busca una coincidencia en una cadena de texto y devuelve un array
con los resultados.
• search(): Busca una coincidencia en una cadena de texto y devuelve el índice
de la primera coincidencia encontrada.
• replace(): Reemplaza una coincidencia en una cadena de texto con una cade-
na de reemplazo.
Ejemplo:
Supongamos que queremos buscar todas las palabras que comienzan con la letra
qaren una cadena de texto. Para ello, podemos utilizar el siguiente código:

125

about:blank 125/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.5 Uso de listas

8.5.1 Insertar elementos en una lista

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

about:blank 126/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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().

8.5.2 Modificar elementos de listas

Modificar elementos de listas en JavaScript es una tarea sencilla. Esto se puede

lograr mediante el uso de los métodos push(), pop(), shift() y unshift(). Estos métodos
permiten agregar, eliminar, mover y reemplazar elementos de una lista.
Ejemplo:

127

about:blank 127/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.5.3 Borrar elementos de listas

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

about:blank 128/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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().

8.5.4 Propiedades y métodos del objeto Array

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.

Propiedades Las propiedades del objeto Array en JavaScript son:

• length: Esta propiedad devuelve el número de elementos en el array.

129

about:blank 129/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

Métodos Los métodos del objeto Array en JavaScript son:

• 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

about:blank 130/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.5.5 Propiedades comunes de listas

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:

Podemos usar la propiedad length para determinar el número de elementos en el

array:

Reto:

Crea una función llamada qcontarElementosrque tome un array como parámetro

y devuelva el número de elementos en el array.

131

about:blank 131/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.5.6 Métodos comunes de listas

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

about:blank 132/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

indexOf() El método indexOf() busca un elemento específico en una lista y devuel-

ve su índice. Si el elemento no se encuentra en la lista, devuelve -1.
Ejemplo:

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

about:blank 133/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 134/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 135/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

Método de lista sort() y reverse() El método sort() en JavaScript es un método

de lista que se usa para ordenar los elementos de una lista de forma ascendente.
El método reverse() es un método de lista que se usa para invertir el orden de los
elementos de una lista.
Ejemplo:

136

about:blank 136/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 137/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 138/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

Método de lista reduce() reduce() es una función de JavaScript que se utiliza

para reducir un array a un solo valor. Esta función toma dos argumentos: una función
de acumulación y un valor inicial (opcional). La función de acumulación toma dos
argumentos: el valor acumulado y el elemento actual del array. Reduce() itera a

139

about:blank 139/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.5.7 Arreglos multidimensionales

Los arreglos multidimensionales en JavaScript son arreglos que contienen otros

arreglos. Esto significa que un arreglo multidimensional es un arreglo de arreglos.
Esto nos permite almacenar datos en una estructura de datos jerárquica.
Ejemplo:

140

about:blank 140/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

Reto:
Crea un arreglo multidimensional que contenga los nombres de tus amigos y sus
edades.

8.5.8 Arreglos tipados (Int8Array, Uint8Array)

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

about:blank 141/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.5.9 Array buffer

ArrayBuffer es un objeto en JavaScript que permite almacenar datos binarios en una

matriz de bytes. Esta matriz de bytes se puede usar para almacenar datos como
cadenas de texto, imágenes, audio, video, etc.
Ejemplo:
A continuación se muestra un ejemplo de cómo crear un ArrayBuffer y almacenar
una cadena de texto en él:

142

about:blank 142/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 143/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

8.6 Uso de objetos

8.6.1 Insertar elementos en un objeto

Insertar elementos en un objeto en JavaScript es una tarea sencilla. Para hacerlo,

primero debemos crear un objeto. Esto se puede hacer usando la sintaxis de objeto
literal:

Una vez que tenemos el objeto creado, podemos agregar elementos a él usando la
sintaxis de punto:

También podemos agregar elementos usando la sintaxis de corchetes:

144

about:blank 144/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

Reto:
Crea un objeto con tres elementos y luego imprímelo en la consola.

8.6.2 Desestructuración

La desestructuración es una característica de JavaScript que nos permite extraer

datos de arreglos u objetos y asignarlos a variables. Esto nos permite simplificar la
sintaxis y hacer nuestro código más legible.
Ejemplo:
Supongamos que tenemos un objeto con información de un usuario:

Podemos usar la desestructuración para extraer los datos del objeto y asignarlos a
variables:

145

about:blank 145/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.6.3 Modificar propiedades de objetos

Modificar propiedades de objetos en JavaScript es una tarea sencilla. Esto se puede

hacer usando la notación de punto o la notación de corchetes.
Ejemplo:

146

about:blank 146/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

8.6.4 Borrar propiedades de objetos

En JavaScript, podemos borrar propiedades de objetos usando la palabra clave

delete. Esta palabra clave elimina la propiedad especificada del objeto.
Ejemplo:

147

about:blank 147/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

Reto:
Crea un objeto con tres propiedades y elimina una de ellas usando la palabra clave
delete.

8.6.5 Crear métodos

JavaScript es un lenguaje de programación orientado a objetos, lo que significa que

podemos crear objetos y asignarles métodos. Un método es una función asociada
a un objeto que se puede usar para realizar una tarea específica.
Ejemplo:

Por ejemplo, podemos crear un objeto llamado Persona con un método llamado
saludar():

148

about:blank 148/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

8 USO AVANZADO DE DATOS

La palabra this permite acceder a otras propiedades y métodos del objeto.

Reto:
Crea un objeto llamado Cuenta con dos propiedades: saldo y interes. Agrega un mé-
todo llamado calcularInteres() que calcule el interés anual de la cuenta y lo agregue
al saldo.

8.6.6 Propiedades y métodos del objeto Object

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:

• constructor: Esta propiedad contiene una referencia al constructor de un obje-

to.
• prototype: Esta propiedad contiene una referencia al prototipo de un objeto.
• __proto__: Esta propiedad contiene una referencia al prototipo de un objeto.

149

about:blank 149/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 150/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 151/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 152/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 153/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 154/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 155/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 156/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 157/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

about:blank 158/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

En este ejemplo, el valor de this dentro de la función flecha es undefined, ya que la

función no está dentro del contexto del objeto.
Reto:

Crea una función flecha que imprima el valor de this dentro de un objeto.

9.4 Prototipo

Los prototipos en JavaScript son una característica de la programación orientada a

objetos que permite a los objetos heredar propiedades y métodos de otros objetos.
Esto significa que un objeto puede heredar propiedades y métodos de otro objeto
sin tener que definirlos explícitamente.
Ejemplo:

Supongamos que tenemos un objeto llamadoqPersonarcon las propiedadesqnom-

brery qedadr.

159

about:blank 159/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

Ahora, si queremos crear un objeto qEstudianterque herede las propiedades y

métodos de qPersonar, podemos hacerlo usando prototype:

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

about:blank 160/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

9.5 Herencia prototípica

La Herencia Prototípica en JavaScript es una forma de herencia basada en objetos,

en la que un objeto hereda las propiedades y métodos de otro objeto. Esto significa
que un objeto puede heredar de otro objeto sin necesidad de definir una clase.
Ejemplo:

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

about:blank 161/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 162/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.7 Declaración y expresion de clases

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

about:blank 163/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

Expresión de Clase:

Para estos ejemplos, la elevación o hoisting de clases es similar a la elevación de

funciones y variables respectivamente.

Reto:

164

about:blank 164/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.8 Métodos de una instancia

Los métodos de una instancia en JavaScript son funciones que se asocian a un

objeto y que se pueden invocar para realizar una acción específica. Estos métodos
se definen dentro de la clase a la que pertenece el objeto.
Ejemplo:
Supongamos que tenemos una clase llamada Persona con los atributos nombre y
edad. Si queremos agregar un método para obtener la edad de una persona, pode-
mos definir el siguiente método dentro de la clase Persona:

Ahora, podemos crear una instancia de la clase Persona y usar el método getEdad()
para obtener la edad de la persona:

165

about:blank 165/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.9 Campos públicos

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

about:blank 166/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.10 Campos privados

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

about:blank 167/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

168

about:blank 168/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.11 Campos estáticos

Las propiedades estáticas en JavaScript son aquellas que se definen directamente

en la clase y no en una instancia de la misma. Estas propiedades son compartidas
por todas las instancias de la clase, lo que significa que cualquier cambio realizado
en una instancia se verá reflejado en todas las demás.

Los métodos estáticos suelen ser funciones de utilidad, como funciones para crear
o clonar objetos, mientras que las propiedades estáticas son útiles para cachés,
configuración fija o cualquier otro dato que no necesite replicar entre instancias.

Ejemplo:

169

about:blank 169/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

9.12 Captadores (getters) y establecedores (setters)

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

about:blank 170/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

En este caso accedemos a las propiedades de forma indirecta en lugar de acce-

der directamente a #nombre y #edad y también se puede inclur lógica adicional al
acceder y cambiar propiedades como validaciones.
Reto:

Crea una clase llamada Libro con los atributos título, autor y editorial. Agrega los
getters y setters necesarios para leer y escribir los valores de los atributos.

171

about:blank 171/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

9 PROGRAMACIÓN ORIENTADA A OBJETOS (POO)

9.13 Herencia

La herencia en JavaScript es un mecanismo que permite a los objetos heredar pro-

piedades y métodos de otros objetos. Esto significa que un objeto puede heredar
las propiedades y métodos de otro objeto, lo que le permite compartir ciertas carac-
terísticas con otros objetos.
Ejemplo:
Por ejemplo, podemos crear una clase Vehículo que contenga las propiedades y
métodos comunes a todos los vehículos, como la velocidad, el color, etc. Luego,
podemos crear clases específicas para cada tipo de vehículo, como Coche, Moto y
Bicicleta, que hereden las propiedades y métodos de la clase Vehículo.

172

about:blank 172/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 173/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

10.1.1 setTimeout() y clearTimeout()

setTimeout() es una función disponible en ambientes de JavaScript que se utiliza

para programar una función para que se ejecute después de un tiempo específico.
Esta función toma dos parámetros: una función a ejecutar y un tiempo en milisegun-
dos.
clearTimeout() es una función disponible en ambientes de JavaScript que se utili-
za para cancelar una función programada con setTimeout(). Esta función toma un
parámetro: el identificador devuelto por setTimeout().
Ejemplo:

174

about:blank 174/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

10.1.2 setInterval() y clearInterval()

setInterval() es una función disponible en ambientes de JavaScript que se utiliza

para ejecutar una función o un bloque de código repetidamente, con un intervalo de
tiempo específico. Esta función toma dos parámetros: una función o un bloque de
código, y un intervalo de tiempo en milisegundos.
clearInterval() es una función disponible en ambientes de JavaScript que se utiliza
para detener la ejecución de una función o un bloque de código que se está ejecutan-
do repetidamente con setInterval(). Esta función toma un parámetro: el identificador
devuelto por setInterval().

Ejemplo:

175

about:blank 175/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

10.2.1 Crear una promesa

Una promesa en JavaScript es un objeto que representa el resultado de una opera-

ción asíncrona. Esto significa que una promesa puede ser resuelta con un valor o
rechazada con una excepción y puede demorar poco o largo tiempo de cumplirse.

Las garantías de promesas en JavaScript nos permiten asegurar que una prome-
sa se cumplirá. Esto significa que si una promesa no se cumple, se ejecutará una
función de fallo para manejar el error.

Ejemplo:

176

about:blank 176/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

10 ASINCRONÍA

then() es un callback que indica la acción a realizar si la resolución es positiva.

Recibe datos de la promesa cumplida como parámetro.

catch() es un callback que atrapa el error en caso de un rechazo en la promesa.

Recibe un error como parámetro.
Reto:

Crea una promesa que resuelva una operación asíncrona que devuelva un número

177

about:blank 177/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

10 ASINCRONÍA

aleatorio entre 0 y 1 lance un error si el número es mayor a 0.3.

10.2.2 Encadenamiento de promesas

El encadenamiento de promesas en JavaScript es una técnica que permite ejecutar

una serie de tareas asíncronas de forma secuencial. Esto significa que cada prome-
sa se ejecuta una vez que la promesa anterior se ha completado. Esto permite a los
desarrolladores escribir código asíncrono de forma más sencilla y mantenible.

Ejemplo:
Supongamos que queremos obtener una lista de usuarios de una base de datos y
luego obtener la información de cada usuario. Esto se puede lograr con el encade-
namiento de promesas de la siguiente manera:

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

about:blank 178/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

10 ASINCRONÍA

10.2.3 Propagación de errores de promesas

La propagación de errores de promesas en JavaScript es una forma de manejar

errores en promesas. Esto significa que si una promesa se rechaza, el error se
propagará a la promesa que la llamó.
Ejemplo:

En el ejemplo anterior, la promesa2 se resolverá con el resultado de la promesa1.

Si la promesa1 se rechaza, el error se propagará a la promesa2 y se mostrará en el
bloque catch.

Reto:
Crea una promesa que se rechace después de 5 segundos y otra promesa que se
resuelva con el resultado de la primera promesa. Luego, maneja el error en el bloque
catch.

179

about:blank 179/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

10 ASINCRONÍA

10.2.4 Fetch API

Fetch es una API (interfaz de programa de aplicación) disponible en ambientes de

JavaScript que nos permite realizar peticiones HTTP a un servidor. Fetch es una
promesa que permite indicar una URL y obtener datos de una API remota. Esta API
nos permite realizar peticiones de tipo GET, POST, PUT, DELETE, etc.
Ejemplo:

respuesta.json() entrega los datos del pedido sin metadatos.

Reto:
Crea una petición fetch para obtener los datos de una API externa y mostrar los
resultados en la consola.

10.2.5 Multiples promesas

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

about:blank 180/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

10.2.6 Propiedades y métodos del objeto Promise

Promise es un objeto que representa la terminación o el fracaso eventual de una ope-

ración asíncrona. Está diseñado para permitir que los flujos de control asíncronos
sean expresados de manera más clara y concisa.

Las propiedades y métodos del objeto Promise son los siguientes:

Propiedades

181

about:blank 181/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

10 ASINCRONÍA

• Promise.prototype: Esta propiedad es un objeto que contiene los métodos que

se pueden usar para manipular una promesa.

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

about:blank 182/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

Async/Await es una característica de JavaScript que permite escribir código asín-

crono de manera síncrona. Esto significa que puedes escribir código asíncrono como
si fuera código síncrono, lo que hace que sea mucho más fácil de leer y mantener.

Ejemplo:

183

about:blank 183/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

11.1 Módulos y herramientas

11.1.1 Historia de los 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

about:blank 184/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Los módulos permiten a los desarrolladores dividir su código en múltiples archivos,

lo que facilita la organización y la reutilización del código. Esto también permite a los
desarrolladores compartir código entre proyectos, lo que ahorra tiempo y esfuerzo.
Han existido varios sistemas y tipos de sintaxis para importar y eportar módulos en la
historia de JavaScript. Los más populares son módulos de JavaScript, CommonJS
(usados en Node.js), AMD y Requirejs (que son menos utilizados y considerados
legacy).

Ejemplo:
Supongamos que estamos creando una aplicación web que necesita una función
para calcular el área de un círculo. En lugar de escribir la función en el mismo ar-
chivo, podemos crear un módulo separado para la función y luego importarlo en el
archivo principal.

185

about:blank 185/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

CommonJS es una especificación de módulos para JavaScript que permite a los

desarrolladores crear y compartir código entre diferentes proyectos. Se utiliza prin-
cipalmente en Node.js que es un ambiente para correr JavaScript en el backend.
Ejemplo:

Supongamos que tenemos un archivo llamado math.js que contiene una función
para calcular el área de un círculo.

Ahora, en otro archivo, podemos importar la función areaDelCirculo usando Com-

monJS.

186

about:blank 186/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

Webpack es una herramienta de empaquetado de JavaScript que se usa para com-

pilar y empaquetar archivos o módulos de JavaScript, HTML, CSS y otros recursos
en un solo archivo. Esto permite a los desarrolladores crear aplicaciones web más
rápidas y escalables.
Ejemplo:
Supongamos que estamos creando una aplicación web que usa HTML, CSS y Ja-
vaScript. Usando Webpack, podemos empaquetar todos estos archivos en un solo
archivo JavaScript. Esto significa que en lugar de tener que cargar cada archivo por
separado, solo necesitamos cargar el archivo empaquetado. Esto acelera el tiem-
po de carga de la aplicación y mejora la experiencia del usuario. Webpack es un a
tecnología bastante amplia que requiere su propia documentación.
Reto:

187

about:blank 187/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Revisa la documentación de Webpack y empaca algunos archivos de JavaScript en

uno solo.

11.1.4 Babel

Babel es un compilador de JavaScript que convierte código JavaScript moderno

en código JavaScript compatible con versiones anteriores de los navegadores. Es-
to significa que puedes usar características de JavaScript modernas, como clases,
funciones de flecha, etc., y Babel se encargará de convertirlo en código que los nave-
gadores antiguos puedan entender. Esta herramienta puede ser útil para cambiar el
tipo de módulos utilizados en JavaScript. Babel es un a tecnología bastante amplia
que requiere su propia documentación.
Ejemplo:
Por ejemplo, si quisiéramos usar una función de flecha para crear una función que
sume dos números, podríamos escribir el siguiente código:

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

about:blank 188/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Reto:

Revisa la documentación de Babel y convierte un tipo de módulo a otro.

11.1.5 Extensiones .mjs vs .js

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

about:blank 189/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

En el ejemplo anterior, el archivo .mjs importa la función sumar desde el archivo

math.js, mientras que el archivo .js define la función sumar directamente en el archi-
vo.
Reto:
Crea un archivo .mjs que importe la función sumar desde un archivo .js y luego use
la función sumar para imprimir el resultado de la suma de dos números.

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

about:blank 190/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Para que otros archivos puedan usar esta función, necesitamos exportarla. Esto se
hace usando la palabra clave export:

Ahora, en cualquier otro archivo, podemos importar la función usando la palabra

clave import:

Reto:
Crea un archivo llamado math.js que exporte una función llamada sumar que tome

191

about:blank 191/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

Importar en JavaScript es una forma de incluir código externo en un archivo JavaS-

cript. Esto permite a los desarrolladores reutilizar código y ahorrar tiempo al escribir
código.
Ejemplo:
Por ejemplo, supongamos que tenemos un archivo llamado math.js que contiene
una función para calcular el área de un círculo:

Ahora, si queremos usar esta función en otro archivo, podemos importarla usando
la palabra clave import:

192

about:blank 192/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

11.4 Exportación predeterminada

Exportación predeterminada en JavaScript es una característica de ES6 que permi-

te a los desarrolladores exportar una sola declaración o valor de un módulo. Esto
significa que un desarrollador puede exportar una sola clase, función, objeto o va-
riable desde un archivo JavaScript. Esto es útil para evitar la necesidad de escribir
muchas líneas de código para exportar varios elementos desde un archivo.
Ejemplo:

193

about:blank 193/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

11.5 Alias de importación

Los alias de importación en JavaScript nos permiten importar módulos y asignarles

un nombre más corto para su uso. Esto nos permite ahorrar tiempo y mejorar la
legibilidad del código.

194

about:blank 194/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Ejemplo:

Reto:
Intenta importar un módulo y asignarle un alias para su uso.

11.6 Importar paquetes

Importar paquetes en JavaScript es una forma de incluir código externo en nuestro

proyecto. Esto nos permite aprovechar la funcionalidad de otros desarrolladores sin
tener que escribir todo el código desde cero. Estos paquetes creados por compañías
o desarrolladores se pueden instalar usando herramientas como npm (que viene con
Node.js) o yarn.
Ejemplo:
Por ejemplo, si queremos usar la librería de React para construir una aplicación web,
podemos importarla en nuestro proyecto de la siguiente manera:

195

about:blank 195/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

11.7 Cargar módulos dinámicamente

Cargar módulos dinámicamente en JavaScript es una técnica que permite cargar

contenido de forma asíncrona. Esto significa que los usuarios pueden cargar módu-
los en cualquier parte del código.
Ejemplo:

196

about:blank 196/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

11 MÓDULOS

Reto:

Importa un móduloa que has creado previamente de forma dinámica.

11.8 Ámbito de un módulo

El ámbito de un módulo en JavaScript es el contexto en el que se ejecuta el código.

Esto significa que el ámbito determina qué variables y funciones están disponibles
para su uso. El ámbito de un módulo se establece cuando se crea el módulo y se
mantiene a lo largo de la ejecución del código.
Ejemplo:
Por ejemplo, considera el siguiente código:

197

about:blank 197/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

12 ITERADORES Y GENERADORES

En este ejemplo, el ámbito de main.js es diferente al ámbito de modulo.js. Esto

significa que la variable x en main.js tendrá un valor de 10, mientras que la variable
x en modulo.js tendrá un valor de 20. Esto significa que cuando se llama a la función
foo desde main.js, imprimirá el valor de 10, mientras que cuando se llama a la función
bar desde modulo.js, imprimirá el valor de 20.
Reto:
Escribe un programa que declare una variable x con un valor de 10 en un archivo
main.js y otra variable x con un valor de 20 en un archivo modulo.js. Luego, escribe
una función foo en main.js que imprima el valor de x y otra función bar en modulo.js
que imprima el valor de x. Finalmente, llama a ambas funciones desde main.js para
verificar que el ámbito de cada archivo se mantiene.

12 Iteradores y generadores

12.1 Objetos iteradores

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

about:blank 198/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

12 ITERADORES Y GENERADORES

Un ejemplo práctico de un objeto iterador en JavaScript es el siguiente:

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.

12.2 Objetos iterables

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

about:blank 199/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

12 ITERADORES Y GENERADORES

Un ejemplo práctico de un objeto iterable en JavaScript es un array. Por ejemplo,

podemos usar un bucle for para recorrer un array de números y mostrar cada uno
de ellos por pantalla:

Reto:
Crea un array con los nombres de tus amigos y usa un bucle for para mostrar cada
uno de ellos por pantalla.

12.3 Método de iterador next()

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

about:blank 200/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

12.4 Funciones generadoras

Una función generadora en JavaScript es una función especial que devuelve un

objeto iterable que puede ser usado para generar una secuencia de valores. Esto
significa que, en lugar de devolver un único valor, una función generadora devuelve
una secuencia de valores a medida que se va ejecutando.
Ejemplo:

201

about:blank 201/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

about:blank 202/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

13 INTERNACIONALIZACIÓN

Reto:
Crea un generador que devuelva los números impares entre 0 y 10.

13 Internacionalización

13.1 El objeto Intl

El objeto Intl (Internationalization) es una API de JavaScript que proporciona sopor-

te para la internacionalización de aplicaciones. Esta API proporciona una variedad
de funciones para manipular y formatear cadenas, números, fechas y horas, entre
otros.

Ejemplo:

203

about:blank 203/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

13.2 El objeto DateTimeFormat

El objeto DateTimeFormat es una interfaz de programación de aplicaciones (API)

que proporciona una forma de formatear y analizar cadenas de fecha y hora en
JavaScript. Esta API permite a los desarrolladores crear cadenas de fecha y hora
personalizadas para mostrar a los usuarios, así como analizar cadenas de fecha y
hora para obtener información sobre la fecha y la hora.
Ejemplo:

204

about:blank 204/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

13 INTERNACIONALIZACIÓN

A continuación se muestra un ejemplo de cómo usar el objeto DateTimeFormat para

formatear una fecha y hora en una cadena de texto:

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.

13.3 El objeto NumberFormat

El objeto NumberFormat en JavaScript es una herramienta para formatear números

y monedas. Esta herramienta permite a los desarrolladores especificar el formato
de los números, como el número de decimales, el separador de miles, el símbolo
de moneda, etc. Esto permite a los desarrolladores mostrar los números de manera
más legible para los usuarios.
Ejemplo:
Supongamos que queremos formatear el número 1234567.89 para mostrarlo con
dos decimales, un separador de miles y el símbolo de la moneda dólar. Esto se
puede hacer usando el objeto NumberFormat de la siguiente manera:

205

about:blank 205/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

13.4 El objeto Collator

El objeto Collator en JavaScript es una herramienta para comparar y ordenar cade-

nas de caracteres en diferentes lenguajes y configuraciones regionales. Esto signifi-
ca que puede usarse para comparar cadenas de caracteres en diferentes idiomas y
configuraciones regionales, como el español, el inglés, el francés, el alemán, etc.

Ejemplo:
Por ejemplo, si queremos ordenar una lista de palabras en español, podemos usar
el objeto Collator para hacerlo. Por ejemplo, si tenemos la lista de palabras ['casa',
'caballo', 'cocodrilo', 'cocina'], podemos usar el objeto Collator para ordenarla de la
siguiente manera:

206

about:blank 206/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

14.1 El objeto Proxy

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

about:blank 207/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

14.2 El objeto Reflect

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

about:blank 208/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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

Aprende las siguientes herramientas:

1. Node.js: Es un entorno de ejecución para JavaScript construido con el mo-

tor de JavaScript V8 de Chrome. Proporciona una plataforma para construir
aplicaciones de servidor y aplicaciones de línea de comandos con JavaScript.
2. React.js: Es una biblioteca de JavaScript de código abierto para crear interfa-
ces de usuario. Está diseñado para ayudar a los desarrolladores a construir

209

about:blank 209/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

aplicaciones web y móviles escalables.

3. Angular: Esta es una alternativa a React. Es un marco de JavaScript de código
abierto para desarrollar aplicaciones web. Está diseñado para ayudar a los
desarrolladores a construir aplicaciones web modernas y escalables.
4. TypeScript: Es un superconjunto de JavaScript que proporciona una sintaxis
más estructurada y una mejor administración de errores. Está diseñado para
ayudar a los desarrolladores a escribir código JavaScript más robusto y esca-
lable.

15.2 Recursos

1. MDN Web Docs: Es una de las fuentes de referencia más completas

para JavaScript. Ofrece documentación detallada sobre la sintaxis, los
conceptos y las API de JavaScript. También ofrece tutoriales y ejem-
plos para ayudar a los desarrolladores a aprender y usar JavaScript.
https://developer.mozilla.org/es/docs/Web/JavaScript
2. W3Schools: Es una de las fuentes de referencia más populares para JavaS-
cript. Ofrece tutoriales, ejemplos y referencias para ayudar a los desarrollado-
res a aprender y usar JavaScript. https://www.w3schools.com/js/
3. Stack Overflow: Es una de las comunidades de desarrolladores más grandes
en línea. Ofrece una gran cantidad de preguntas y respuestas sobre JavaS-
cript, así como una sección de discusión para discutir problemas y soluciones
relacionadas con JavaScript. https://stackoverflow.com/questions/tagged/javascript

4. Academia X: Ofrece una variedad de cursos interactivos para ayudar a los

desarrolladores a aprender y usar JavaScript. https://www.academia-x.com

210

about:blank 210/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

15.3 ¿Que viene después?

Estos son los siguientes pasos recomendados:

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

about:blank 211/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

15.4 Preguntas de entrevista

1. ¿Qué es JavaScript?

• JavaScript es un lenguaje de programación interpretado, orientado a objetos,

que se utiliza principalmente para crear contenido interactivo en páginas web.

2. ¿Qué es una variable en JavaScript?

• Una variable es un contenedor para almacenar datos. En JavaScript, una va-

riable se declara usando la palabra clave qvarr.

3. ¿Cómo se declara una variable en JavaScript?

• Una variable se declara usando la palabra clave qvarrseguida del nombre de

la variable y, opcionalmente, el valor que se le asignará.

4. ¿Qué es una función en JavaScript?

• Una función es un bloque de código que se puede ejecutar cuando se le llama.

Las funciones se utilizan para realizar tareas específicas y se pueden reutilizar
en diferentes partes de un programa.

5. ¿Cómo se define una función en JavaScript?

• Una función se define usando la palabra clave qfunctionrseguida del nombre

de la función y los parámetros que se pasarán a la función.

6. ¿Qué es un objeto en JavaScript?

• Un objeto es una colección de propiedades y métodos relacionados. Los obje-

tos se utilizan para representar entidades reales o abstractas en un programa.

7. ¿Cómo se crea un objeto en JavaScript?

• Un objeto se crea usando la palabra clave qnewrseguida del nombre del

constructor del objeto. El constructor es una función especial que se utiliza
para inicializar un objeto.

212

about:blank 212/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

8. ¿Qué es una cadena en JavaScript?

• Una cadena es una secuencia de caracteres. En JavaScript, las cadenas se

escriben entre comillas simples o dobles.

9. ¿Qué es una matriz en JavaScript?

• Una matriz es una colección ordenada de valores. En JavaScript, las matrices

se escriben entre corchetes.

10. ¿Qué es un bucle en JavaScript?

• Un bucle es una estructura de control que se utiliza para ejecutar un bloque de

código repetidamente. En JavaScript, los bucles se escriben usando la palabra
clave qforr.

11. ¿Qué es una condición en JavaScript?

• Una condición es una expresión que se evalúa como verdadera o falsa. En

JavaScript, las condiciones se escriben usando la palabra clave qifr.

12. ¿Qué es una expresión regular en JavaScript?

• Una expresión regular es un patrón de caracteres que se utiliza para buscar

y reemplazar cadenas de texto. En JavaScript, las expresiones regulares se
escriben entre barras.

13. ¿Qué es una clase en JavaScript?

• Una clase es una plantilla para crear objetos. En JavaScript, las clases se
definen usando la palabra clave qclassr.

14. ¿Qué es una excepción en JavaScript?

• Una excepción es un error que se produce durante la ejecución de un progra-

ma. En JavaScript, las excepciones se manejan usando la palabra clave qtryr
.

213

about:blank 213/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

15. ¿Qué es una etiqueta en JavaScript?

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

16. ¿Qué es una propiedad en JavaScript?

• Una propiedad es una característica de un objeto. En JavaScript, las propie-

dades se definen usando la palabra clave qthisr.

17. ¿Qué es un método en JavaScript?

• Un método es una función asociada a un objeto. En JavaScript, los métodos

se definen usando la palabra clave qthisr.

18. ¿Qué es una sentencia en JavaScript?

• Una sentencia es una instrucción que se ejecuta cuando se alcanza un punto

específico en un programa. En JavaScript, las sentencias se escriben usando
la palabra clave qreturnr.

19. ¿Qué es una declaración en JavaScript?

• Una declaración es una instrucción que se ejecuta cuando se alcanza un pun-

to específico en un programa. En JavaScript, las declaraciones se escriben
usando la palabra clave qvarr.

20. ¿Qué es una expresión en JavaScript?

• Una expresión es una combinación de valores, variables y operadores que se

evalúa como un valor. En JavaScript, las expresiones se escriben usando la
palabra clave qreturnr.

21. ¿Qué es un operador en JavaScript?

• Un operador es un símbolo que se utiliza para realizar una operación mate-

mática o lógica. En JavaScript, los operadores se escriben usando la palabra
clave qoperatorr.

214

about:blank 214/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

22. ¿Qué es una sentencia de control en JavaScript?

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

23. ¿Qué es una sentencia de iteración en JavaScript?

• Una sentencia de iteración es una instrucción que se utiliza para ejecutar un

bloque de código repetidamente. En JavaScript, las sentencias de iteración se
escriben usando la palabra clave qforr.

24. ¿Qué es una sentencia de salto en JavaScript?

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

25. ¿Qué es una sentencia de etiqueta en JavaScript?

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

26. ¿Qué es una sentencia de continuación en JavaScript?

• Una sentencia de continuación es una instrucción que se utiliza para saltar a la

siguiente iteración de un bucle. En JavaScript, las sentencias de continuación
se escriben usando la palabra clave qcontinuer.

27. ¿Qué es una sentencia de asignación en JavaScript?

• Una sentencia de asignación es una instrucción que se utiliza para asignar un

valor a una variable. En JavaScript, las sentencias de asignación se escriben
usando la palabra clave q=r.

28. ¿Qué es una sentencia de declaración en JavaScript?

215

about:blank 215/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

• Una sentencia de declaración es una instrucción que se utiliza para declarar

una variable. En JavaScript, las sentencias de declaración se escriben usando
la palabra clave qvarr.

29. ¿Qué es una sentencia de función en JavaScript?

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

30. ¿Qué es una sentencia de bloque en JavaScript?

• Una sentencia de bloque es una instrucción que se utiliza para agrupar un

conjunto de sentencias. En JavaScript, las sentencias de bloque se escriben
usando la palabra clave qblockr.

31. ¿Qué es una sentencia de etiqueta en JavaScript?

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

32. ¿Qué es una sentencia de excepción en JavaScript?

• Una sentencia de excepción es una instrucción que se utiliza para manejar

errores. En JavaScript, las sentencias de excepción se escriben usando la
palabra clave qtryr.

33. ¿Qué es una sentencia de clase en JavaScript?

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

34. ¿Qué es una sentencia de objeto en JavaScript?

216

about:blank 216/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

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.

35. ¿Qué es una sentencia de importación en JavaScript?

• Una sentencia de importación es una instrucción que se utiliza para importar

código de otro archivo. En JavaScript, las sentencias de importación se escri-
ben usando la palabra clave qimportr.

36. ¿Qué es una sentencia de exportación en JavaScript?

• Una sentencia de exportación es una instrucción que se utiliza para exportar

código a otro archivo. En JavaScript, las sentencias de exportación se escriben
usando la palabra clave qexportr.

37. ¿Qué es una sentencia de declaración de módulo en JavaScript?

• Una sentencia de declaración de módulo es una instrucción que se utiliza para

definir un módulo. En JavaScript, las sentencias de declaración de módulo se
escriben usando la palabra clave qmoduler.

38. ¿Qué es una sentencia de declaración de paquete en JavaScript?

• Una sentencia de declaración de paquete es una instrucción que se utiliza para

definir un paquete. En JavaScript, las sentencias de declaración de paquete
se escriben usando la palabra clave qpackager.

39. ¿Qué es una sentencia de declaración de interfaz en JavaScript?

• Una sentencia de declaración de interfaz es una instrucción que se utiliza para

definir una interfaz. En JavaScript, las sentencias de declaración de interfaz
se escriben usando la palabra clave qinterfacer.

40. ¿Qué es una sentencia de declaración de enumeración en JavaScript?

217

about:blank 217/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

• Una sentencia de declaración de enumeración es una instrucción que se utiliza

para definir una enumeración. En JavaScript, las sentencias de declaración de
enumeración se escriben usando la palabra clave qenumr.

41. ¿Qué es una sentencia de declaración de tipo en JavaScript?

• Una sentencia de declaración de tipo es una instrucción que se utiliza para

definir un tipo. En JavaScript, las sentencias de declaración de tipo se escriben
usando la palabra clave qtyper.

42. ¿Qué es una sentencia de declaración de constante en JavaScript?

• Una sentencia de declaración de constante es una instrucción que se utiliza

para definir una constante. En JavaScript, las sentencias de declaración de
constante se escriben usando la palabra clave qconstr.

43. ¿Qué es una sentencia de declaración de variable en JavaScript?

• Una sentencia de declaración de variable es una instrucción que se utiliza para

definir una variable. En JavaScript, las sentencias de declaración de variable
se escriben usando la palabra clave qvarr.

44. ¿Qué es una sentencia de declaración de función en JavaScript?

• Una sentencia de declaración de función es una instrucción que se utiliza para

definir una función. En JavaScript, las sentencias de declaración de función se
escriben usando la palabra clave qfunctionr.

45. ¿Qué es una sentencia de declaración de clase en JavaScript?

• Una sentencia de declaración de clase es una instrucción que se utiliza para

definir una clase. En JavaScript, las sentencias de declaración de clase se
escriben usando la palabra clave qclassr.

46. ¿Qué es una sentencia de declaración de objeto en JavaScript?

218

about:blank 218/219
13/7/24, 22:55 Academia X Java Script - imagenes en desarrollo por les gusta lo que se habla …

15 SIGUIENTES PASOS

• Una sentencia de declaración de objeto es una instrucción que se utiliza para

definir un objeto. En JavaScript, las sentencias de declaración de objeto se
escriben usando la palabra clave qobjectr.

47. ¿Qué es una sentencia de declaración de método en JavaScript?

• Una sentencia de declaración de método es una instrucción que se utiliza para

definir un método. En JavaScript, las sentencias de declaración de método se
escriben usando la palabra clave qmethodr.

48. ¿Qué es una sentencia de declaración de propiedad en JavaScript?

• Una sentencia de declaración de propiedad es una instrucción que se utiliza

para definir una propiedad. En JavaScript, las sentencias de declaración de
propiedad se escriben usando la palabra clave qpropertyr.

49. ¿Qué es una sentencia de declaración de evento en JavaScript?

• Una sentencia de declaración de evento es una instrucción que se utiliza para

definir un evento. En JavaScript, las sentencias de declaración de evento se
escriben usando la palabra clave qeventr.

50. ¿Qué es una sentencia de declaración de excepción en JavaScript?

• Una sentencia de declaración de excepción es una instrucción que se utiliza

para definir una excepción. En JavaScript, las sentencias de declaración de
excepción se escriben usando la palabra clave qexceptionr.

51. ¿Qué es una sentencia de declaración de interfaz en JavaScript?

• Una sentencia de declaración de interfaz es una instrucción que se utiliza para

definir una interfaz. En JavaScript, las sentencias de declaración de interfaz
se escriben usando la palabra clave qinterfacer.

219

about:blank 219/219