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 aprenderl rlo
o? . . . . . . . . . . . . . 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.
2.1.5
5 ¿C¿Cuauale
less so
sonn las pr
preg
egun
untatass má
máss co
comu
munnes?
es? . . . . . . . . . . 16
2.2 Historia, evolución, y versiones . . . . . . . . . . . . . . . . . . . . 17
2.3 Características y ventajas . . . . . . . . . . . . . . . . . . . . . . 18
2.4
2.4 Dife
Difere
renc
ncia
iass con
con otro
otross leng
lengua
uaje
jess de pr
prog
ogra
rama
maci
ción
ó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
3.2 Co
Come
mentntar
ariios (u
(una
na so
solla línea
ínea y multi
ultillínea
ínea)) . . . . . . . . . . . . . . . 21
3.3 Literales y tipos de datos . . . . . . . . . . . . . . . . . . . . . . . 23
3.4 Operadores y expresiones . . . . . . . . . . . . . . . . . . . . . . 24
3.5 Palabras clave e idenficadores . . . . . . . . . . . . . . . . . . . . 25
3.6 Sentencias, declaraciones, y tipado . . . . . . . . . . . . . . . . . 25

2
Contenido

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

3.8
3.8 Es
Esttruct
ructur
uras
as de co
cont
ntro
roll de fluj
lujo y ex
exce
cepc
pcio
ione
ness . . . . . . . . . . . . . 27

3
3..9
10 C
3.10 onsi
njuibil
Sens
Se ntloidad
bi idde cde
ad ara
mcayús
terúscu
ay escula
. s.y .[Link]ús
las in.úscu
.cul
. las
. . .. .. .. .. .. .. .. .. .. .. .. .. .. .. 29
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 De
Decl
cla
aracion e inicialización (var y let) . . . . . . . . . . . . . . . . 47
4.12 Constantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.13 Plantillas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4.14 Chequear tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

3
Contenido

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

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

5 Operadores 53
5.1 Operad
Operadores
ores de a aritmé
ritméticos
ticos (+, -, *, /, %, **, //, ++, ) . . . . . . . . . 53
5.2 Operador de agrupación (()) . . . . . . . . . . . . . . . . . . . . . 54
5.3 Operadores de texto (+, +=) . . . . . . . . . . . . . . . . . . . . . 55
5.4
5.4 Op
Opera
erado
dore
ress de as
asigigna
naci
ción
ón (= (=,, +=,
+=, -=
-=,, *=
*=,, /=
/=,, %=,
%=, **=
**=,, //
//=)
=) . . . . . . . 56
5.5
5.5 Op
Oper
erad
ador
ores
es comp
compar arat
ativ
ivos
os (=(==,
=, !=,
!=, >, <, >=>=,, <=)
<=) . . . . . . . . . . . . 60
5.6 Comparar por valor y por referencia . . . . . . . . . . . . . . . . . 61
5.7 Operadores lógicos (&&, ||, !) . . . . . . . . . . . . . . . . . . . . . 62
5.8 Operad
radores de bits (&, |, ~, ^, », «, »>) . . . . . . . . . . . . . . . . 63
5.9
5.9 Ope
pera
rado
dore
ress un
unarariios (d
(del
elet
ete,
e, type
typeofof,, void
void)) . . . . . . . . . . . . . . . 64
5.10
5.10 Opera
perado
dore
ress re
rellacio
aciona
nale
less (i
(in,
n, inst
instan
anceceofof)) . . . . . . . . . . . . . . . 66
5.11 Operador spread () . . . . . . . . . . . . . . . . . . . . . . . . . 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.
6.1.2
2 ifelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
6.1.
6.1.3
3 ifelifelse . . . . . . . . . . . . . . . . . . . . . . . . . 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.
6.2.3
3 dowhile . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
6.2.4 continue . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.2.5 break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

4
Contenido

6.2.6 Etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.2.
6.2.7
7 for
forin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81


6.2.
6.x2.8
6.3 E 8pcfor
ce fo
iornesof . .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 8
83
4
6.3.1 Tipos de excepciones . . . . . . . . . . . . . . . . . . . . . 84
6.3.
6.3.22 trycatch . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
6.3.3 Utilizando objectos de errores . . . . . . . . . . . . . . . . 86
6.3.
6.3.44 trycatchfinally . . . . . . . . . . . . . . . . . . . . . . . 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 Declcla
aración y expresion de funciones . . . . . . . . . . . . . . . . 94
7.8 Funciones anidadas . . . . . . . . . . . . . . . . . . . . . . . . . 96
7.9 Ámbito global y local . . . . . . . . . . . . . . . . . . . . . . . . . 97
7.10 Devo
vollución de llamada (Callbacks) . . . . . . . . . . . . . . . . . . 99
7.1
7.11 Eleva
Elevacición
ón de vari
variab
able
less y func
funcio
ione
ness (H
(Hoi
oist
stin
ing)
g) . . . . . . . . . . . . . 100
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

5
Contenido

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

8.1.4 Números hexadecimales . . . . . . . . . . . . . . . . . . . 108

8
8..1
1..5
6 INnafiN
niy .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 1
10
09
9
8.1.
8.1.7 7 Pr
Propopieieda
dadedess y méméto todo
doss dedell ob
objejeto
to Nu
Numb mber er . . . . . . . . . . 110
8.1.
8.1.8 8 Pr
Propopieieda
dadedess comu
comune ness de
dell ob
objejeto
to Nu
Numb mberer . . . . . . . . . . . 112
8.1.
8.1.9 9 Pr
Propopieieda
dadedess y méméto todo
doss dedell ob
objejeto
to Ma
Math th . . . . . . . . . . . . 115
8.1.
8.1.1010 P
Pro
ropipied
edad
ades es y méto
método doss dedell ob
objejeto
to Bi
BigI
gInt
nt . . . . . . . . . . . 116
8.2 Uso de fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
8.2.
8.2.1 1 Pr
Propopieieda
dadedess y méméto todo
doss dedell ob
objejeto
to Da
Date te . . . . . . . . . . . . 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.
8.3.3 3 Pr
Propopieieda
dadedess y méméto todo
doss dedell ob
objejeto
to St
Striring
ng . . . . . . . . . . . 12
121
1
8.4 Uso de expresiones regulares . . . . . . . . . . . . . . . . . . . . 123
8.4.1 Crear una expresión regular . . . . . . . . . . . . . . . . . 123
8.4.
8. 4.22 Bú
Búsq squeueda
da cocon n ba
bandndera
erass en ex exprpres
esioione
ness reg
regul
ular
ares
es . . . . . . 12
123
3
8.4.
8.4.3 3 Pr
Propopieieda
dadedess y méméto todo
doss dedell ob
objejeto
to Re
RegE gExpxp . . . . . . . . . . 124
124
8.5 Uso de listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
8.5.1 Insert rta
ar elementos en una lista . . . . . . . . . . . . . . . . 126
8.5.2 Modificar elementos de listas . . . . . . . . . . . . . . . . . 127
8.5.3 Borrar elementos de listas . . . . . . . . . . . . . . . . . . 128
8.5.
8.5.4 4 Pr
Propopiiedad
edades es y mét
métod odos
os del
del ob
objjeto
eto Ar
Arrarayy . . . . . . . . . . . 129
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.5.8 8 Ar
Arreregl
glos
os tipa
tipado
doss (I(Int
nt8A
8Arr rray
ay,, Ui
Uint
nt8A
8Arrrray
ay)) . . . . . . . . . . . . 141
141
8.5.9 Array buffer . . . . . . . . . . . . . . . . . . . . . . . . . . 142
8.6 Uso de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
8.6.1 Insert rta
ar elementos en un objeto . . . . . . . . . . . . . . . . 144

6
Contenido

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

8.6.
8.6.3
3 Mod
odif
ific
icar
ar pr
prop
opie
ieda
dade
dess de ob
obje
jettos . . . . . . . . . . . . . . . 146
146

8
8..6
6..5
4 Borerraarrm
C pé
[Link]. d.e .ob. je. to.s . .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 1
14
47
8
8.6.
8.6.6 6 Pr
Prop
opie ieda
dade
dess y mé métotodo
doss de
dell ob objejeto
to Ob
Objeject
ct . . . . . . . . . . . 149
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.
9.3.2
2 Vincu
incullac
ació
ión
n (c
(calall(
l(),
), ap
appl
ply(
y(),
), bind
bind()
())) . . . . . . . . . . . . . . . 155
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 Declcla
aración y expresion de clase sess . . . . . . . . . . . . . . . . . . 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
9.12 Capt
Captad
ador
ores
es (g
(get
ette
ters
rs)) y esta
establblec
eced
edor
ores
es (s
(set
ette
ters
rs)) . . . . . . . . . . . 170
170
9.13 Herencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
10 Asincronía 174
10.1 Temporizadores . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
10.1.1 setTimeout() y clearTimeout() . . . . . . . . . . . . . . . . . 174
10.1.2 se
setInterv
rva
al() y clearInterval() . . . . . . . . . . . . . . . . . 175
10.2 Promesas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
10.2.1 Cr
Crear una promesa . . . . . . . . . . . . . . . . . . . . . . 176

7
Contenido

10.2.2 En
Encadenamiento de promesas . . . . . . . . . . . . . . . . 178
10.2.3 Propagación de errores de promesas . . . . . . . . . . . . . 179

1
10
0..2
2..5
4FMeutlctihplA
Mu [Link]. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. 1
18
80
0
10.2
10 .2.6
.6 Pr
Prop
opie ieda
dade
dess y méto
método doss de
dell ob
obje
jeto
to Pr
Promomisise
e . . . . . . . . . . 181
181
10.3 async/await . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

11 Módulos 184
11.1 Mó
Módulos y herramientas . . . . . . . . . . . . . . . . . . . . . . . 184
11.1.1 Historia de los módulos . . . . . . . . . . . . . . . . . . . . 184
11.1.2 CCo
ommonJS . . . . . . . . . . . . . . . . . . . . . . . . . . 186
11.1.3 WWeebpack . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
11.1.4 BBa
abel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
11.1.5 Ex
Exttensiones .mjs vs .js . . . . . . . . . . . . . . . . . . . . 189
11.2 Exportar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
11.3 Importar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
11.4 Exportación predeterminada . . . . . . . . . . . . . . . . . . . . . 193
11.5 Al
Alias de importación . . . . . . . . . . . . . . . . . . . . . . . . . 194
11.6 Importar paquetes . . . . . . . . . . . . . . . . . . . . . . . . . . 195
11.7 Ca
Carga
rgar 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

8
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

9
1 INT
INTROD
RODUCC
UCCIÓN
IÓN

1 Introducción

1.1 Bienvenida
Bien
Bienven
venid
id@
@ a es
este
te lilibr
bro
o de Acad
Academ
emia
ia X en dond
donde
e ap
apren
rende
derá
ráss Java
JavaSc
Scri
ript
pt prá
práct
ctic
ico.
o.
Hola,, mi no
Hola nomb
mbrere es Xa
Xavi
vier
er Re
Reye
yess Oc
Ocho
hoa
a y soy
soy el au
auto
torr de este
este libr
libro.
o. He tr
trab
abaj
ajad
ado o co-
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 You
ouT Tub
ubee desd
desdee dive
diversa
rsass lo
loca
caci
cion
ones
es del
del mu
mund
ndoo co
con
n el ob
obje
jetitivo
vo de guia
guiarr y mo
motitiva
varr 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
• Estruc
Estructuras
turas de cont
control
rol de flujo
• Funciones
• Uso avanzado de datos
• Program
Programación
ación orien
orientada
tada a objetos (POO)
• Asincronía
• Módulos
• Iteradores y generadores
• Intern
Internacion
acionaliza
alización
ció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,
grande s, ya sea utilizar esta tecnol
tecnología
ogía para tus pasatiem
pasatiempos
pos creativos, aumenta
aumentarr
tus oportunidades laborales, o si tienes el espíritu emprendedor, incluso crear tu

10
1 INT
INTROD
RODUCC
UCCIÓN
IÓ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
[Link]
Esto es a lo que llamo un trabajo VIVO, esto quiere decir que será actualizado en

el tiempoela18
editada medida que
de abril deexistan cambios
2023. Si tienes en la tecnología.
correcciones La versiónpuedes
importantes, actual es 1.0.0
escribir-
nos a nuestra sección de contacto en [Link]

1.1.2 Alcance

El obje
objetitivo
vo de este
este lilibr
bro
o es llllen
enar
ar el va
vací
cío
o qu
que
e ex
exis
iste
te so
sobre
bre esta
esta te
tecn
cnol
olog
ogía
ía en Espa
Españo
ñoll
siguiendo el siguiente enfoque:
• Se revizan los temas con un enfoque prácti
práctico
co incluyendo
incluyendo ejempl
ejemplos
os y retos.
• Se evita incl
incluir
uir materi
material
al de relleno ya que no es eficient
eficiente.
e.
• Se evita entrar en detalle en temas simp
simples
les o avanzados no-prácticos
no-prácticos..
Si de
dese
seas
as prof
profun
undi
diza
zarr en algú
algún
n te
tema
ma,, te de
dejo
jo va
vari
rios
os re
recu
curso
rsoss popu
popula
lares
res y avan
avanza
zado
doss
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
1 INT
INTROD
RODUCC
UCCIÓN
IÓN

1.2 Prerequisitos

Antes de aprender JavaScript, necesitas lo siguiente:

1. Un computador:
computador: cualquie
cualquierr computador moder
moderno no tiene las capaci
capacidades
dades 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 ed
edititor
or de te
text
xto:
o: lo ne
nece
cesi
sita
tass pa
para
ra es
escri
cribi
birr có
códi
digo
go de Ja
JavaS
vaScri
cript
pt.. Lo
Loss ed
edititor
ores
es
de te
text
xto
o má
máss popu
popula
lare
ress so
son
n Vi
Visu
sual
al St
Stud
udio io Code
Code,, Su
Subl
blim
ime
e Text,
ext, At
Atom
om y No
Note
tepa
pad
d
++.
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
Goo gle Chr
Chrome
ome,, Moz
Mozill
illa
a Fir
Firefo
efox,
x, Sa
Safar
farii y Mic
Micros
rosoft
oft Edge.
Edge. Se rec
recomi
omiend
endaa ten
tener
er
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
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

1. No solo leas este libro. La práctica

práctica es esencial en este campo. Practica
Practica todos
los días y no pases de lección hasta que un concept
conceptoo 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
tengas pregu
preguntas
ntas usa Google
Google,, StackOverFlow
StackOverFlow,, y ChatGPT
4. Acepta
Acepta que en esta carrer
carrera,
a, mucho de tu tiempo lo vas utilizar
utilizar investig
investigando
ando 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é debe

debess aprenderlo?
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 desarrollad

JavaScript desarrolladores
ores crear funci
funcionali
onalidades
dades 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 am
ampl
plia
iame
ment
nte
e util
utiliz
izad
ado:
o: Ja
Java
vaSc
Scri
ript
pt es uno
uno de lo
loss le
leng
ngua
uaje
jess de pr
prog
ogra
rama
maci
ción
ón
más populares y ampliamente utilizados en el mundo, lo que significa que hay
una gran demanda de desarrolladores JavaScript.

13
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

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á
fáci
cill de ap
apre
rend
nder
er:: Ja
Java
vaSc
Scri
ript
pt es un le
leng
ngua
uaje
je de pro
progr
gram
amac
ació
iónn fá
fáci
cill de apren
apren--
der, especialmente para aquellos que ya tienen una comprensión básica de
programación.
4. Te abre puertas: Aprende
Aprenderr JavaSc
JavaScript
ript te permitirá
permitirá aprovechar
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
programación importa
importante
nte y versát
versátilil 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ónd

dóndee se utiliz
utiliza?
a?

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

do:
1. Desarrollo
Desarrollo web: JavaSc
JavaScript
ript es un lenguaje de programación
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
Internet de las cosas (IoT): JavaScrip
JavaScriptt se utili
utiliza
za para desarr
desarrollar
ollar aplica
aplicacione
cioness
IoT, que permiten a los dispositivos conectados a internet interactuar entre sí.

14
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

5. Desarrollo
Desarrollo de servidor: JavaS
JavaScript
cript se utili
utiliza
za en el lado del servidor para crear
aplicaciones y servicios web. Con [Link], 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. Desarro
Desarrollallador
dor web fro
front-
nt-end
end:: Los des
desarr
arroll
ollado
adores
res web fro
front-
nt-end
end utiliz
utilizan
an JavaS-
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 cr
crea
earr ju
jueg
egos
os in
inte
terac
ractitivo
voss y em
emoc
ocio
iona
nant
ntes
es pa
para
ra la we
web
b y disp
dispos
osititiv
ivos
os móvi
móvile
les.
s.
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
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

móviles y la inteligencia artificial.

2.1.4 ¿Cuán
¿Cuánto
to puede
puedess ganar?

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

factores,
factores, incluyen
incluyendo
do tu nivel de experiencia,
experiencia, el tipo de traba
trabajo
jo que desem
desempeñes,
peñ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
competitivos en compa
comparación
ración con otros profesio
profesionales
nales de la tecno
tecnolo-
lo-
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 impo
import
puedes rtan
ante
te puede
ganar tene
tenerr en cuen
cumayor
ser enta
ta qu
que
oemenor,
esto
estoss son
son solo
solo pr
prom
omed
dependiendo edio
deios
s yfactores
los qu
que
e el sala
samencionados
lari
rio
o re
real
al qu
que
e
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 JavaSc
JavaScript
ript y cómo funciona?
funciona?
2. ¿Qué se puede hacer con Java JavaScript
Script?
?
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 JavaSc
JavaScript
ript con otros lenguajes de programación
programación y marcos
marcos
de trabajo?
7. ¿Cómo se debugge
debuggear ar y solucionar
solucionar errores en el código de JavaScript
JavaScript? ?
8. ¿Cuál
¿Cuáles
es son las mejores prácti
prácticas
cas para escrib
escribir
ir código JavaScrip
JavaScriptt eficient
eficiente
ey
mantenible?

16
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

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,
Historia, evolución,
evolución, y versiones
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 prim
primer
era
a vers
versió
iónn de Java
JavaSc
Scri
ript
pt fue
fue lanz
lanzad
adaa en 1996
1996 como
como part
parte
e de Nets
Netsca
cape
pe Navi
Navi--
gator 2.0. Desde entonces, ha habido varias versiones de JavaScript, cada una con
nuevas
nue vas car
caract
acterí
erísti
sticas
cas y mej
mejoras
oras.. Las ver
versio
siones
nes más recient
recientes
es inc
incluy
luyen
en ECMASc
ECMAScrip
riptt
6 (ES6) y ECMA
ECMAScript
Script 7 (ES7).

La
Lass ve
criptversi
rsion
1.1. ones
es má
Estasmáss anti
antigu
guas
versiones as de Ja
fueronJava
vaSc
Scri
ript
pt se co
reemplazadas cono
noce
porcen n co
como
mo Ja
JavaScriptJava
vaSc
Scri
1.2, ript
quept 1.
1.0
0 ylanzada
fue Java
JavaS-
S-
en 1997
1997.. Esta
Esta ve
vers
rsió
ión
n in
intr
trod
oduj
ujo
o nu
nuev
evas
as ca
cara
ract
cter
erís
ístitica
cass co
como
mo el so
sopo
port
rte
e para
para obje
objeto
tos,
s,
la capacidad de crear objetos personalizados y la capacidad de crear funciones.
En 19
1999
99,, se la
lanz
nzó
ó Ja
Java
vaSc
Scri
ript
pt 1.3,
1.3, que
que in
intr
trod
oduj
ujo
o me
mejo
jora
rass en la ve
velo
loci
cida
dad
d de ejec
ejecuc
ució
ión
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
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

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

ejecución
ejecución y la capacidad de crear objetos más complejos
complejos.. Esta versión tambié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 apre
aprender
nder y usar
usar..
• Es un lenguaje de programación versátil, lo que significa que se puede usar
para crear
crear apl
aplica
icacio
ciones
nes web,
web, aplica
aplicacio
ciones
nes de escrit
escritori
orio
o y aplica
aplicacio
ciones
nes móv
móvile
iles.
s.
• 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, lloo que significa que los programas se
ejecutan en un entorno aislado.

18
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

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

para crear aplicaciones de gran tamaño.

2.4 Diferencias
Diferencias con otros
otros lenguajes
lenguajes de programación
programación

JavaScript es un lenguaje de program

JavaScript programación
ación interpre
interpretado,
tado, lo que signific
significaa que el có-
digo se ejecuta directamente sin necesidad de compilarlo. Esto lo hace único entre
lo
loss le
leng
ngua
uaje
jess de progr
program
amac
ació
ión,
n, ya qu
que
e la ma
mayo
yorí
ría
a de lo
loss le
leng
ngua
uaje
jess de pr
prog
ogra
rama
maci
ción
ó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
diferente crear
de otros objetos de
lenguajes y usarlos para almacenar
programación, como C, yque
manipular [Link]-
son lenguajes Esto es
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,
Brackets, Atom,
Atom, Sublime Text
Text,, Vim,
Vim, y Visual Studio Code
Code..
El editor recomendado para practicar el código que vamos a ver es Visual Studio
Code (o VSCode) que puedes bajar desde [Link]
[Link]

19
2 PRI
PRIMER
MEROS
OS PASOS
ASOS

2.5.2 Entorno

Para
pecial,usar
pecial JavaScript
, ya que enttu
JavaScrip
JavaScript escomputador, no necesitas
un lenguaje interpretado yinstalar
interpretado ningún
se ejecuta en elsoftware es-
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
Editor de texto
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. Conocimient
Conocimiento o básico de HTML y CSS: ya que JavaScript se utili
utiliza
za 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 eleme
elementos,
ntos, estarás
estarás list@ para escribir y ejecutar
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 escribi
escribirr códig
código
o JavaScript
JavaScript di-
rectamente en la consola del navegador.

2.6 Hola Mundo

 Hola Mundoes 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 Hola Mundoen la consola.

20
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

Tam
ambi
bién
én podr
podría
íass mo
modi
dififica
carr este
este có
códi
digo
go co
con
n tu no
nomb
mbre
re.. Si esJuan, deb
deberí
ería
a imprim
imprimir
ir
en la consola Hola, Juan.
Reto:
Modifica el ejemplo anterior para imprimir Hola Universoen la consola.

3 Gramática

3.1 Sintaxis

La sintaxis de un lenguaje
lenguaje de progra
programació
maciónn es la estructura
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 operado
operadores,
res, variable
variables,
s, palab
palabras
ras clave, etc. La sinta
sintaxis
xis también se refie
refiere
re
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
Comentarios (una
(una sola línea y multilínea)
multilínea)

Los comentarios
comentarios en JavaS
JavaScript
cript son línea
líneass de texto que no son inter
interpretad
pretadas
as como
parte del código. Son utilizados para agregar información adicional o notas sobre el
código que puede ser útil para otros desarrolladores o para uno mismo.

21
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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.
gramac ión. Una expresi
expresión
ón es una combi
combinación
nación de valore
valores,
s, variables y operad
operadores
ores
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 es
estexpresión
Esta ta expr
expres
expresi esi
ónión
ón,
se, evalúa
5 y 3 so
evalú son
n los va
a como val
8 lyor
ores
es,guarda
se , = y + so
son
n los
en los op
unaoper
erad
ador
ores
variablees
. y x es un
variable. una
a va
vari
riab
able
le..

Reto:
Usa los operadores aritméticos para realizar las siguientes operaciones: suma, res-
ta, multiplicación y división entre 10 y 2. Imprime los resultados de las operaciones
en la consola.

24
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

3.5 Palabras
Palabras clave e idenficad
idenficadores
ores

Las palabras
específico enclave en JavaScript
el lenguaje son términos
y no pueden reservados
ser utilizados como que tienen un significado
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 Juan. 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
Sentencias,, declaraciones
declaraciones,, y tipado

Una sentencia es una unidad de código que realiza una acción. Por ejemplo, la
sentencia
sentencia [Link]
[Link]("Hol
("Hola
a mundo
mundo")
") impri
imprime
me el textoHol
Hola
a mun
mundo
doen la pa
pant
ntal
alla
la..

25
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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 nombrey se le ha asignado

el valor Juan.
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, Hola Mundoy
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
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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
indentación se usa para hacer que el código sea más fácil de leer.
leer. Por ejemp
ejemplo,
lo,
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
Estructuras de control
control de flujo y excepciones
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
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

Las excepciones o errores son otra parte importante de JavaScript. Estas nos per-
miten controlar errores en nuestro código, permitiéndonos ejecutar un bloque de
código si se produce un error. Esto nos permite evitar que nuestro código se deten-
ga si se produce un error.
Las excepciones en JavaScript se manejan con la palabra clave try/catch.

Reto:
Crea un programa que muestre un mensaje diferente dependiendo de si es mayor
o menor de edad.

28
3 GR
GRAM
AMÁT
ÁTIC
ICA
A

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
idiomas y símbo
símbolos
los diferent
diferentes,
es, lo que lo hace ideal para desarr
desarrollar
ollar aplica-
ciones que deben ser utilizadas por personas de diferentes partes del mundo.
Ejemplo:
Por ej
Por ejem
empl
plo,
o, pu
pued
edes
es usar
usar la fu
func
nció
ión
ncharAt()pa
para
ra ac
acce
cede
derr a un ca
carác
rácte
terr espe
especí
cífifico
co
en una cadena:

Reto:
Añade un emoji deros
rostro
tro feliz
feliz(q
(que
ue es un cara
caract
cter
er de Unic
Unicod
ode)
e) a la vari
variab
able
lehappy
.

3.10 Sensibilida
Sensibilidad
d de mayúsculas
mayúsculas y minúsculas
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 HolaMundoy holamundoson considerados dos
nombres de variables diferentes.
Ejemplo:

29
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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ú
minúscscul
ulas
as y as
asíg
ígna
nale
less va
valo
lore
ress dife
difere
rent
ntes
es 10 y 10
100.
0. La prime
primera
ra vari
variab
able
le eselefante
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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

• 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
Crea una
una varivariab
able
le llam
llamad
adaa ed
edad
ad y asíg
asígna
nale
le un valo
valorr nu
numé
méri
rico
co de 25.
25. Lueg
Luego,
o, cr
crea
ea una
una
vari
variab
able
le llllam
amad
ada
a no
nombmbre
re y as
asíg
ígna
nale
le un va
valo
lorr de ca
cade
denana de te
text
xto
oJuan. Final
Finalmente
mente,,
crea una variable llamada estaRegistrado y asígnale un valor booleano true.

4.2 Tipos
Tipos de datos no-primiti
no-primitivos
vos

Los tipos de datos no primitivos en JavaScript son aquellos que no son números,
cadenas de texto, booleanos, ni valores especiales como null o undefined. Estos
tipos de datos son objetos, arreglos, funciones y expresiones regulares.
Ejemplo:

31
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Reto:
Crea una variable acon 33 como texto.

4.3.2 Número

JavaSc
JavaScri
ript
pt es un le
leng
ngua
uaje
je de pr
prog
ogram
ramac
ació
iónn qu
quee pe
perm
rmitite
e tr
trab
abajajar
ar co
conn nú
núme
mero
ros.
s. Esto
Estoss
núme
nú mero
ross pued
pueden
en ser
ser en
ente
tero
ross (c
(com
omoo 1, 2, 3, etc.
etc.),
), deci
decima
male less (c
(com
omo o 0.1,
0.1, 0.2,
0.2, 0.3,
0.3, etc.
etc.))
o números en notación científica (como 1e2, 1e3, 1e4, etc.).
Ejemplo:
Supongamos que queremo
Supongamos queremoss 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,
JavaScript, podemos escribir el código para calcular
calcular el área de la siguient
siguiente
e ma-
nera:

33
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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úmeross enteros de hasta 2^53 - 1.
número
Ejemplo:
Supongamos
Supongamos que querem
queremos
os representar el númer
número
o 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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Reto:
Crea un programa que devuelva el resultado de la suma de los dos números
987654321000 y 987654321001 usando BigInt.

4.3.4 Buleano

En JavaScript, un booleano es un tipo de dato que solo puede tener dos valores:
true o false. Estos valores se utilizan para representar una condición verdadera o
falsa.
Ejemplo:
El siguiente código determina si el número 5 es igual a 5 y almacena el resultado en
una variable booleana:

Reto:

35
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Crea una variable puedeIngresarque almacene en un valor booleano indicando

que el usuari
usuario
o no está permitido
permitido de ingre
ingresar
sar 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 ejem
ejempl
plo
o an
ante
teri
rior
or,, la vari
variab
able
le x no tien
tiene
e un valo
valorr asig
asigna
nado
do,, por
por lo qu
que
e se im
impr
prim
ime
e
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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Ejemplo:

Reto:

Crea un símbolo y una cadena de texto. Luego, imprime cada uno.

4.3.7 Nulo

Nulo en JavaScript es un valor especial que se utiliza para indicar que una variable
no tiene un valor asignado. Esto es distinto de undefined ya que si es definido pero
tiene valo nulo. Se representa con la palabra clave null.
Ejemplo:

Reto:

37
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Crea
Crea un
una
a va
vari
riab
able
le llllam
amad
ada
a mi
miNo
Nomb
mbre
re y asíg
asígna
nale
le el va
valo
lorr nu
nullll.. Lu
Lueg
ego,
o, im
impri
prime
me el valo
valorr
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 cualqu
cualquier
ier 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
Acceder a propiedades
propiedades de objetos
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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Supong
Supongamo
amoss que tenemo
tenemoss un objeto
objeto llamad
llamado
o per
person
sona
a con los sig
siguie
uiente
ntess atr
atribu
ibutos
tos::

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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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
clav
clave-
e-va
valo
lorr. Es
Esto
to si
sign
gnifific
ica
a qu
que
e ca
cada
da elem
elemen
ento
to de da
dato
toss se as
asig
igna
na a un
una
a cl
clav
ave
e ún
únic
ica,
a, 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:
Supong
Supo ngam
amosos qu
que
e qu
quer
erem
emos
os al
alma
mace
cena
narr lo
loss no
nomb
mbre
ress de lo
loss es
estu
tudi
dian
ante
tess de un
una
a cl
clas
ase
e
y sus calificaciones. Podemos usar un mapa para hacer esto de la siguiente mane-
ra:

40
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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 estudian
estudiantes
tes sin dupli
dupli--
cados.

41
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Reto:
Crea
Crea un Set
Set qu
que
e alma
almace
cene
ne los
los no
nomb
mbre
ress de los
los estu
estudi
dian
ante
tess de una
una clas
clase
e y lueg
luego
o ag
agre
re--
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
pare
pa ress cl
clav
ave-e-va
valo
lorr. Es
Esta
ta estr
estruct
uctur
ura
a de da
dato
toss es simi
simila
larr a un Ma
Map,
p, pe
pero
ro co
conn la dife
diferen
renci
cia
a
de que
que los
los obje
objeto
toss usad
usados
os como
como clav
claves
es de
debebenn ser
ser ob
objejeto
toss dé
débi
bile
les.
s. Es
Esto
to sign
signifific
ica
a qu
quee
los objetos usados como claves no se contarán para el recuento recuento de refere
referencias,
ncias, lo
que
qu e sign
signifific
ica
a qu
que e no se ma
mant
nten
endr
drán
án en memo
memori ria.
a. Esto
Esto hace
hace qu
que
e los
los WeakM
eakMap apss sean
sean
útiles para evitar fugas de memoria.
Ejemplo:
Supongamos que queremos almacenar algunos datos relacionados con un usuario
en un WeakMap. Podemos hacer esto de la siguiente manera:

42
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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:
Supong
Supongamamos
os qu
que
e qu
quer
erem
emos
os alma
almace
cena
narr ob
obje
jeto
toss de usua
usuari
rio
o en un Weak
WeakSe
Set.
t. Es
Esto
to no
noss
permitirá mantener una referencia a los usuarios sin mantenerlos en memoria por
mucho tiempo.

43
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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 list
Las listas
as en Java
JavaSc
Scri
ript
pt son
son un
una
a estr
estruc
uctu
tura
ra de dato
datoss qu
quee no
noss perm
permitite
e alma
almace
cena
narr un
una
a
colección de elementos. Estos elementos pueden ser de cualquier tipo, desde nú-
mero
me ross ha
hast
sta
a ob
obje
jeto
tos.
s. Tam
ambi
bién
én lo
loss va
vass a en
enco
cont
ntrar
rar co
conn otro
otross no
nomb
mbres
res cocomo
mo ar
arre
regl
glos
os,,
matrices, arrays, etc.
Ejemplo:
A continuación se muestra un ejemplo de una lista en JavaScript:

44
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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 year: numericdel ejemplo.

4.10 Expresiones regulares

Las expresiones
expresiones regulares son una secuen secuencia
cia de caracteres
caracteres que forma
forman n 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
usan
usando
do la no
nota
taci
ción
ón lite
litera
rall / para
para abri
abrirr y cerr
cerrar
ar la expr
expres
esió
ión
n o el co
cons
nstr
truc
ucto
torr Re
RegE
gExp
xp..
Ejemplo:

46
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Para buscar todas las palabras

palabras que comie
comienzan
nzan con la letra aen una cadena de
texto, se puede usar la siguiente expresión regular:

Esta expresión
expresión regular buscará todas las palabras
palabras que comie
comienzan
nzan con la letra a
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 ben una cadena de texto.

4.111 Declaracion
4.1 Declaracion e inicializació
inicialización
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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Reto:
Crea un programa que use la palabra clave let para declarar dos variables, una
dentro de un bloque de código y otra fuera del bloque de código. Luego, imprime el
valor de cada variable en la consola.

4.12 Constantes
Las constantes en JavaScript son variables que no pueden ser reasignadas. Esto
significa que una vez que se asigna un valor a una constante, este no puede ser
cambiado.
Ejemplo:

48
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

Reto:
Crea una plantilla de texto que imprima una frase con un nombre, un adjetivo y una
comida. Por ejemplo: John es un chico hambriento que ama la pizza.

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 correc
correcto.
to. Esto se puede hacer usando la
palabra
palabr a typeo
typeoff de JavaScript
JavaScript.. Esta palabr
palabra
a devuelve una cadena que indica el tipo
de la variable.
Ejemplo:

Reto:
Remplaza el ejemplo usando todos los tipos de datos que has visto hasta ahora.

50
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

4.15 Conversión
Conversión de
de tipos de datos
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 tenem
Supongamos tenemos
os una variab
variable
le llamada numero que conti
contiene
ene 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
con decimales (por que tome"3.14")
ejemplo, una cadena de caracteres
y conviértalo que contiene
a un número 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
4 TIP
TIPOS
OS Y VARI
ARIABL
ABLES
ES

que los datos sean del tipo correcto para una operación específica. Por ejemplo, si
se intenta realizar una operac
operación
ión matemát
matemática
ica con una cadena de texto
texto,, JavaSc
JavaScript
ript
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 todo es un objetoya 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
5 OP
OPER
ERAD
ADOR
ORES
ES

5 Operadores

5.1 Operadores
Operadores de aritmétic
aritméticos
os (+, -, *, /, %, **, //, ++, ) 

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.
• *: Multi
Multiplica
plica do
doss números
números..
• /: Divide dos números.
• %: Calcul
Calculaa el resto de una división entr
entre
e dos números.

• **: Calcu
Calcula
la la potenc
potencia
ia de un número
número..
• //: Reali
Realiza
za una división enter
entera
a entre dos números.
• ++: Incr
Increment
ementa a un número en uno.
• --: Decrem
Decrementa
enta un núme
número
ro en uno.
Ejemplo:

53
5 OP
OPER
ERAD
ADOR
ORES
ES

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
5 OP
OPER
ERAD
ADOR
ORES
ES

Por ejemplo, si queremos calcular la suma de dos números, pero queremos que
se realice la mult
multiplic
iplicación
ación primero,
primero, podem
podemos
os usar el operador de agrupa
agrupación
ció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
5 OP
OPER
ERAD
ADOR
ORES
ES

Reto:
Une los texto Fatboyy Slimcon el operador + añadiendo un espacio entre las
palabras.

5.4 Operadores
Operadores de asignació
asignación
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 agregar a. Esto significa que el valor de la variable se
incrementará en la cantidad especificada.
Ejemplo:

56
5 OP
OPER
ERAD
ADOR
ORES
ES

• -=: Esto significa restar de. Esto significa que el valor de la variable se
reducirá en la cantidad especificada.
Ejemplo:

• *=: Esto significa multiplicar por. Esto significa que el valor de la variable
se multiplicará por la cantidad especificada.
Ejemplo:

57
5 OP
OPER
ERAD
ADOR
ORES
ES

• /=: Esto significa dividir entre. Esto significa que el valor de la variable se
dividirá entre la cantidad especificada.
Ejemplo:

• %=: Esto significa módulo de. Esto significa que el valor de la variable
variable se
calculará como el resto de la división entre la cantidad especificada.
Ejemplo:

58
5 OP
OPER
ERAD
ADOR
ORES
ES

• **=: Esto significa elevar a la potencia. Esto significa que el valor de la

variable se elevará a la potencia especificada.
Ejemplo:

• //=: Esto ssignif

ignifica
icadividir entre y redondear hacia abajo. Esto significa que el
valor de la variable se dividirá entre la cantidad especificada y se redondeará
hacia abajo.
Ejemplo:

59
5 OP
OPER
ERAD
ADOR
ORES
ES

Reto:
Usa los operadores de asignación para calcular el área de un cuadrado donde el
lado es igual a 5.

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

Los operadores comparativos en JavaScript son usados para comparar dos valores
y determinar si son iguales o diferentes. Estos operadores son:
• == (i
(igua
guall a)
• != (n
(noo igu
igual
al a)
• > (ma
(mayor
yor qque)
ue)
• < (me
(menor
nor qque)
ue)
• >= (mayor o igual que)
• <= (menor o igual que)
Ejemplo:

60
5 OP
OPER
ERAD
ADOR
ORES
ES

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

5.6 Comparar
Comparar por valor
valor y por referencia
referencia

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

61
5 OP
OPER
ERAD
ADOR
ORES
ES

Las vari
variabl
ables
es pri
primit
mitiva
ivass se pas
pasan
anpor val
valor
ory lo
loss ob
obje
jeto
tos,
s, lilist
stas
as,, y dato
datoss no pr
prim
imititiv
ivos
os
se pasan por referencia
referencia. 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 [Link]() 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
Operadores lógicos
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 op
oper
erad
ador
or && (A
(AND
ND)) de
devu
vuel
elve
ve ve
verd
rdad
ader
ero
o si am
amba
bass ex
expr
pres
esio
ione
ness so
son
n ve
verd
rdad
adera
eras.
s.
Ejemplo:

62
5 OP
OPER
ERAD
ADOR
ORES
ES

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)
• >> (Despl
(Desplazami
azamiento
ento a la derech
derecha)
a)
• << (Despl
(Desplazami
azamiento
ento a la izquierd
izquierda)
a)
• >>> (Desp
(Desplazam
lazamiento
iento a la derecha sin sign
signo)
o)
Ejemplo:
A continuación se muestra un ejemplo de código que usa los operadores de bits
para realizar una operación bit a bit:

63
5 OP
OPER
ERAD
ADOR
ORES
ES

En este ejemplo se usa el operador & para realizar una operación AND bit a bit entre
los números a y b. El resultad
resultado
o de esta operación
operación es 0.
Reto:
Para re
Para refo
forz
rzar
ar lo apre
aprend
ndid
ido,
o, el re
reto
to cons
consis
iste
te en re
real
aliz
izar
ar un
una
a op
oper
erac
ació
ión
n bit
bit a bit
bit usan
usando
do
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
Operadores unarios
unarios (delete,
(delete, typeof, void)

Los operadores unarios son un tipo de operador que toma un solo operando (un
argum
arg umen
ento
to)) para
para re
real
aliz
izar
ar un
una
a op
oper
erac
ació
ión.
n. En Ja
Java
vaSc
Scri
ript
pt,, ha
hayy tr
tres
es op
oper
erad
adore
oress un
unari
arios
os
principales: delete, typeof y void.
El operador delete se utiliza para eliminar una propiedad de un objeto. Por ejemplo,
si tenemos un objet
objeto
o llam
llamado
ado persona con una propiedad llamad
llamada
a edad, podemos
eliminar la propiedad edad con el siguiente código:

64
5 OP
OPER
ERAD
ADOR
ORES
ES

El operador typeof se utiliza para determinar el tipo de una variable. Por ejemplo, si
tenemos una variable llamada nombre que contiene una cadena, podemos determi-
nar su tipo con el siguiente código:

El operador void se utiliza para evaluar una expresión y devolver undefined. Por
ejemplo, si queremos evaluar una expresión y devolver undefined, podemos usar el
siguiente código:

Reto:
Intenta crear un objeto llamado auto con una propiedad llamada marca y luego eli-
minar la propiedad marca usando el operador delete.

65
5 OP
OPER
ERAD
ADOR
ORES
ES

5.10 Operadores
Operadores relacionale
relacionaless (in, instanceof)
instanceof)

Los operadores relacionales

relacionales en JavaSc
JavaScript
ript son usados para comparar dos valore
valoress
y determinar si son iguales o no. Estos operadores incluyen in y instanceof.
El op
oper
erad
ador
or in se usa
usa pa
para
ra dete
determ
rmin
inar
ar si un
una
a propi
propied
edad
ad exis
existe
te en un obje
objeto
to.. De
Devu
vuel
elve
ve
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
5 OP
OPER
ERAD
ADOR
ORES
ES

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

5.11 Operador spread ( ) 

El op
oper
erad
ador
or sp
sprea
read
d (.
(...
..)) es un
una
a ca
cara
ract
cter
erís
ístitica
ca de Ja
Java
vaSc
Scri
ript
pt que
que pe
perm
rmitite
e expa
expand
ndir
ir un
una
a
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:
Supo
Supong
ngam
amos
os que
que te
tene
nemo
moss una
una lilist
sta
a de núme
números
ros y qu
quere
eremo
moss im
impr
prim
imir
ir ca
cada
da elem
elemen
ento
to
de la lista.

67
5 OP
OPER
ERAD
ADOR
ORES
ES

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

5.12 Operador de coma (,)

El oper
operad
ador
or de co
coma
ma en Ja
Java
vaSc
Scri
ript
pt es un oper
operad
ador
or bina
binari
rio
o qu
que e se ut
utililiz
iza
a pa
para
ra se
sepa
para
rarr
expre
expresi
sion
ones
es in
indi
divi
vidu
dual
ales
es de
dent
ntro
ro de una
una se
sent
nten
enci
cia.
a. Es
Esto
to sign
signifific
ica
a qu
que
e cada
cada expre
expresi
sión
ó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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

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

valo
valorr de x en 1. Lu
Lueg
ego,
o, se eval
evalúa
úa la segu
segund
nda
a expr
expres
esió
ión
n (y
(y++
++),
), que
que incr
increm
emen
enta
ta el valo
valorr
de y en 1. El resultado de la segunda expresión (11) se devuelve como resultado de
la sentencia.
Reto:
Escribe una senten
Escribe sentencia
cia que use el operador de coma para evaluar tres expresio
expresiones
nes
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 estruc
estructura
tura de control de flujo en JavaScrip
JavaScriptt que permit
permite
e ejecutar una sec-
ción de código si una condición es verdadera. Si la condición es falsa, se puede
ejecutar otra sección de código.
Ejemplo:

69
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

Reto:
Escribe un código que compruebe si un número es par o impar.

6.1.2 if else


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:

Supo
Supong
ngam
amos
os qu
quee qu
quere
eremo
moss escr
escrib
ibir
ir un pr
prog
ogra
rama
ma que
que im
impr
prim
ima
a un mens
mensaj
aje
e dife
diferen
rente
te
dependiendo de si una variable es mayor o menor que 10. Podemos hacer esto con
una estructura ifelse:

70
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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 El número es mayor que 10 ; de lo contrario, se imprime
el mensaje El número es menor que 10.
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 if elif else

 

ifif..
...e
.elilif.
f...
..el
else
se es un
una
a estr
estruc
uctu
tura
ra de co
cont
ntro
roll de fluj
flujo
o en Ja
Java
vaSc
Scri
ript
pt qu
que
e pe
perm
rmitite
e a lo
loss pro
pro--

gramadores tomar decisiones basadas en una o más condiciones.

gramadores condiciones. Esta estru
estructura
ctura
se compone de tres partes: if, elif y else.
Ejemplo:

71
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

Reto:
Escribe
Escrib e un programa
programa que impri
imprima
ma un mensa
mensaje
je que indiq
indique
ue 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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

Reto:
Escribe
Escribe una línea de código usando el operador ternario para asignar el valor Es
      
par a la variable mensaje si el número numero es par, o Es impar si el
número numeroes 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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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ú
Escribe evalúe
e si un número es mayor que 10 y menor que 20. Si se
cumple, imprime El número está entre 10 y 20. Si no se cumple, imprime El
número no está entre 10 y 20.

6.1.6 switch

switch en JavaScript es una estructura de control que nos permite evaluar una ex-
presión y ejecutar un bloque de código específico dependiendo del resultado de
la evaluación. Esta estructura de control es útil cuando hay una gran cantidad de
posibles resultados para una expresión.
Ejemplo:

74
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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 El número es
mayor a 10. Si el número es menor a 10, imprime El número es menor a 10 .
Si el número es igual a 10, imprime El número es igual a 10.

75
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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
Escribe un ciclo for que imprima los números del 1 al 10 en orden ascendente
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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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 consol
imprime consola
a y se incremen
incrementa
ta en 1.
Reto:
Crea un bucle while que imprima
imprima los números del 1 al 10 en la consola.

6.2.3 do while


do...while es una estructura de control de bucle en JavaScript que ejecuta una sen-
te
tenc
ncia
ia o bl
bloq
oque
ue de có
códi
digo
go una
una ve
vez,
z, y lu
lueg
ego
o co
cont
ntin
inúa
úa ejec
ejecut
után
ándo
dolo
lo mi
mien
entr
tras
as se cump
cumpla
la
una condición. Esta estructura es útil cuando se necesita asegurar que una senten-
cia se ejecute al menos una vez.
Ejemplo:

77
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

En el ejemplo anterior, la sentencia [Link](i) se ejecutará al menos una vez, ya

que la condición i < 5 se evalúa al final de cada iteració
iteración.
n.
Reto:
Escribe un programa que imprima los números del 1 al 10 usando un bucle do 
while.

6.2.4 continue

continue es una palabra clave en JavaScript que se usa para saltar a la siguiente ite-
ració
rac ión
n de un bucl
bucle.
e. Es
Esto
to sign
signifific
ica
a qu
que
e cu
cuan
ando
do se en
encu
cuen
entr
tra
a una
una in
inst
stru
rucc
cció
ión
n co
cont
ntin
inue
ue,,
el código de la iteración actual se salta y se continúa con la siguiente iteración.
Ejemplo:
Por ejemplo, si queremos imprimir todos los números pares entre 0 y 10, podemos
usar un bucle for con una instrucción continue para saltar los números impares:

78
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

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

0
2
4
6
8
10

Reto:
Escrib
Escr ibe
e un prog
progra
rama
ma que
que im
impr
prim
ima
a los
los nú
núme
mero
ross im
impa
pare
ress entr
entre
e 0 y 10 usan
usando
do un bucl
bucle
e
for y una instrucción continue.

6.2.5 break

break es una palabra clave en JavaScript que se usa para salir de un bucle. Esto
significa que cuando se encuentra una instrucción break, el bucle se detiene y el
control se transfiere a la siguiente instrucción después del bucle.
Ejemplo:

79
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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áss fá
má fáci
cill de id
iden
entitififica
carr (no co
conf
nfun
undi
dirr co
con
n et
etiq
ique
ueta
tass de HTML
HTML).). Esto
Esto se ha
hace
ce me
medi
dian
ante
te
una pal
palabra
abraetiquetasegu seguid
ida
a de dos
dos pupunt
ntos
os y un bucl
bucle.
e. Se pued
puedee indi
indica
carr qu
que
e ha
hace
cerr
después de break o continue indicando la etiqueta.
Ejemplo:

80
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

En este caso, al llegar a continue, saltará a bucle2.

Reto:
Reemplaza continue bucle2;con continue bucle1;para que veas el cambio de
dirección de flujo del código.

6.2.7 for in


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:
Supong
Supongamo
amoss que tenemo
tenemoss un objeto
objeto llamad
llamado
o per
person
sona
a con los sig
siguie
uiente
ntess atr
atribu
ibutos
tos::

81
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
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:
edad: 25 Juan
ciudad: Madrid

Reto:
Crea un objeto llamado libro con los siguientes atributos: título, autor, año de publi-
cación y género. Usa for...in para recorrer los atributos del objeto y mostrar su valor
en la consola.

82
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

6.2.8 for of


for...of es una estructura de control de bucle en JavaScript que se utiliza para iterar
sobre los elementos
elementos de un objeto iterable,
iterable, como una lista,
lista, una cadena o un objet
objeto.
o.
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 forof para iterar sobre los
elementos de una lista:

Reto:
Utiliza forof para iterar sobre los elementos de este mapa y mostrar los valores en
la consola.

83
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

6.3 Excepciones

6.3.1 Tipo
Tiposs de excepciones
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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

Reto:
Escribe un códig
Escribe código
o que inten
intente
te acceder a un elemento de una lista que no existe, lo
que provocará una excepción de referencia.

6.3.2 try catch



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
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

En este ejemplo, el bloque de código dentro del try se ejecutará primero.

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 ocurre
ocurren
n durant
durante
e la ejecución de un programa. Estos objetos contienen
contienen
in
info
form
rmac
ació
ión
n so
sobr
bre
e el er
error
ror,, co
como
mo el no
nomb
mbre
re del
del er
erro
rorr, una
una de
desc
scri
ripc
pció
ión
n de
dell err
error
or,, y un
una
a
pila de llamadas que muestra dónde se produjo el error.
Ejemplo:

Reto:
Crea código que produzca un error. Atrápalo con try catch y revisa sus propieda-
des.

86
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

6.3.4 try catch finally

 

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 try catchfinally para
controlar los errores.

87
6 ESTRU
ESTRUCTUR
CTURAS
AS DE CONTROL
CONTROL DE FLUJO

6.3.5 throw

La sentencia throw en JavaScript permite lanzar una excepción, es decir, una si-
tuación
tuaci ón anormal que interrumpe
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
7 FU
FUNC
NCIO
IONE
NES
S

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
7 FU
FUNC
NCIO
IONE
NES
S

metros
metr os son
son los
los no
nomb
mbre
ress de vari
variab
able
less qu
que
e se usan
usan para
para re
reci
cibi
birr los
los ar
argu
gume
ment
ntos
os de
dent
ntro
ro
de la función.
Ejemplo:
Supong
Supo ngam
amos
os qu
que
e te
tene
nemo
moss una
una fu
func
nció
ión
n llllam
amad
ada
a su
suma
mar()
r() que
que re
reci
cibe
be dos
dos parám
parámet
etros
ros::
a y b.

Cuando
Cuan do llllam
amam
amos
os a la fu
func
nció
ión
n su
suma
mar()
r() pasa
pasamo
moss dos
dos arg
argum
umen
ento
tos:
s: 2 y 3. Es
Esto
to perm
permitite
e
reutilizar la función de forma dinámica con diferentes valores.

En este ejemplo,
ejemplo, los parámetro
parámetross son a y b, y los argumen
argumentos
tos 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
7 FU
FUNC
NCIO
IONE
NES
S

7.3 Parámetros
Parámetros predeterm
predeterminado
inadoss

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

prede
predete
term
rmin
inad
ados
os a lo
loss pa
pará
ráme
metr
tros
os de un
una
a fu
func
nció
ión
n si no se pr
prop
oporc
orcio
iona
nan
n argum
argumen
ento
tos.
s.
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
Parámetros de descans
descanso
o (rest)

Los parámetros
parámetros de descanso (rest) en JavaSc
JavaScript
ript son una forma de recopilar argu-
mentos en una función. Esto significa que, en lugar de recibir una cantidad fija de
argumentos, una función puede recibir un número variable de argumentos.
Ejemplo:

91
7 FU
FUNC
NCIO
IONE
NES
S

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
7 FU
FUNC
NCIO
IONE
NES
S

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ó
repetición
n de códig
código
o
y para ahorrar tiempo.

Ejemplo:
Por ejemplo, consideremos una función que calcula el área de un círculo.

93
7 FU
FUNC
NCIO
IONE
NES
S

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
Declaración y expresion
expresion de funciones
funciones

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

funciones y expresión de funciones.

Declaraci
Declar ación
ón de fun
funcio
ciones
nes Una declaración de función es una form forma
a de crear una
función en JavaScript. Esta es la sintaxis básica para crear una función:

94
7 FU
FUNC
NCIO
IONE
NES
S

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

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

Expresión de funci
Expresión funciones
ones Una expres
expresión
ión de funci
función
ó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
7 FU
FUNC
NCIO
IONE
NES
S

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

anidada es una función que se encuentra
encuentra dentro de otra función
función.. Esto
significa que la función anidada solo está disponible dentro de la función que la
cont
contie
iene
ne.. Es
Esto
to es útil
útil pa
para
ra cr
crea
earr func
funcio
ione
ness que
que se usan
usan solo
solo de
dent
ntro
ro de otra
otra func
funció
ión.
n.
Ejemplo:

96
7 FU
FUNC
NCIO
IONE
NES
S

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
7 FU
FUNC
NCIO
IONE
NES
S

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
7 FU
FUNC
NCIO
IONE
NES
S

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
Devolución de llamada
llamada (Callbacks)
(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ó
devoluciónn de llam
llamada).
ada). La función saludar imprime un salud
saludo
o
con el nombre de la persona y luego ejecuta la función que se le pasó como ar-
gumento (la devolución de llamada). En este caso, la devolución de llamada es la
función despedirse, que imprime una despedida.

99
7 FU
FUNC
NCIO
IONE
NES
S

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 elevadasal 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
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
7 FU
FUNC
NCIO
IONE
NES
S

Las funciones también son elevadas en JavaScript. Esto significa que puedes invo-
car una función antes de haberla declarado en el código.
Ejemplo:

En este ejemplo, la función saludar es invocada antes de ser declarada, pero toda-
vía se ejecuta correctamente. Esto se debe a que la declaración de la función es
elevada al inicio del scope en el que se encuentra. Por lo tanto, el código anterior
es equivalente a:

101
7 FU
FUNC
NCIO
IONE
NES
S

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
miFuncion que las funciones
= function() declaradas
{...}) son elevadas como
solo expresiones
hasta de función
la declaración ( const
de la variable,
no su cuerpo
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 ejem
ejempl
plo
o de re
recu
cursi
rsivi
vida
dad
d en Ja
Java
vaSc
Scri
ript
pt es un
una
a fu
func
nció
ión
n pa
para
ra calc
calcul
ular
ar el fa
fact
ctori
orial
al de
un número. El factorial de un número es el producto de todos los números enteros

102
7 FU
FUNC
NCIO
IONE
NES
S

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

* 4 * 3 * 2 * 1 = 120.

Reto:
Crea
Crea una
una fu
func
nció
ión
n rec
recur
ursi
siva
va para
para ca
calc
lcul
ular
ar el n-
n-és
ésim
imo
o nú
núme
mero
ro de Fi
Fibo
bona
nacccci.i. El n-
n-és
ésim
imo
o
número de Fibonacci es el resultado de la suma de los dos números anteriores en
la secuencia.
secuencia. Por ejemplo, el númer
número o de Fibonacci
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
7 FU
FUNC
NCIO
IONE
NES
S

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
7 FU
FUNC
NCIO
IONE
NES
S

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

7.15 Funciones
Funciones predefini
predefinidas
das

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 ej
ejem
emplplo
o pr
prác
áctitico
co de unauna fu
func
nció
ión
n pr
pred
edef
efin
inid
ida
a en Ja
Java
vaSc
Scri
ript
pt es la fu
func
nció
iónn
[Link](), que nos permite encontrar el número más grande de una lista de
números.
número s. Por ejemp
ejemplo,lo, si querem
queremos
os encontrar el númer
número
o más grande de la lista [1,
5, 10, 3], podemos usar la función [Link]() de la siguiente manera:

105
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Reto:

Utiliza la función [Link]() 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 Numer
Numeros
os decim
decimales
ales

Lo
Los
s nú
núme
Estos meros
ros deci
dese
números cima
male
less en
usan Java
Ja
para vaSc
Scri
ript
pt so
son
representar nfracciones
nú
núme
meros
ros que
qu
oenúmeros
cont
contie
iene
nen
n undecimales.
con punt
punto
o de
deci
cima
mal.l.

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
8 USO AVANZAD
ANZADO
O DE DATOS
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,
JavaScript, los número
númeross binar
binarios
ios se repres
representan
entan 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
8 USO AVANZAD
ANZADO
O DE DATOS
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
escri
escribe
ben
n co
con
n un pr
pref
efijijo
o de 0x se
segu
guid
ido
o de una
una se
secu
cuen
enci
cia
a de dígi
dígito
toss he
hexa
xade
deci
cima
male
les.
s.
Ejemplo:

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

108
8 USO AVANZAD
ANZADO
O DE DATOS
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 (N
NaN (Not
ot a Nu
Numb
mber
er)) es un valo
valorr espe
especi
cial
al en Java
JavaSc
Scri
ript
pt qu
que
e se de
devu
vuel
elve
ve cuan
cuando
do una
una
operación matemática no puede ser realizada. Por ejemplo, si intentamos dividir un
número por cero, el resultado será NaN.
Ejemplo:

109
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Reto:
Escribe una función llamada esNaN que tome un argumento y devuelva true si el
argumento
argume nto 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
propiedades y métodos
métodos que permiten realizar operacione
operacioness con
números.

Propiedades Las propiedades del obj

objeto
eto Num
Number
ber son:

• MA
MAX_X_VVAL
ALUE
UE:: El núme
número
ro más
más grgran
ande
de qu
que
e se pu
pued
ede
e re
repr
pres
esen
enta
tarr en Ja
Java
vaSc
Scri
ript
pt..
• 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: Repr
Representa
esenta un valo
valorr no numérico.

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

110
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

• toExpo
toExponenti
nential():
al(): Devuel
Devuelveve una cadena que represent
representaa el númer
número
o en notaci
notación
ón
exponencial.
• toFixed(): Devuelve una cadena que representa el número con el número de
decimales especificado.
• toPrec
toPrecision
ision():
(): Devuelv
Devuelve e una cadena que represen
representa
ta el número con el número
número
de dígitos especificado.
• toStri
toString():
ng(): Devue
Devuelve
lve una cadena que represent
representa
a el número.
• valueO
valueOf():
f(): Devue
Devuelve
lve el valor numérico del númer
número.
o.
Ejemplo:

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

111
8 USO AVANZAD
ANZADO
O DE DATOS
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 [Link].MIN_V
MIN_VALUE
ALUE 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 Number.MAX_V

.MAX_VALUE
ALUE en JavaScript
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
8 USO AVANZAD
ANZADO
O DE DATOS
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
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
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Number.NEGATIVE_INFINITY Number [Link]

.NEGATIVE_INFINITY
TIVE_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 Numbe Number.r.MAX_S

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

114
8 USO AVANZAD
ANZADO
O DE DATOS
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.
[Link]:
PI: El núm
número
ero pi (3.141
(3.14159
59)
• Math.
Math.E:
E: El númer
númeroo e (2.71828)
• Math.
[Link]
SQRT2:
T2: La raíz cuadrad
cuadrada
a de 2 (1.414
(1.41421
21)

115
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Métodos Los método

métodoss del objeto Math son funcion
funciones
es que realizan operacione
operacioness
matemáticas. Algunos ejemplos de métodos son:
• Math.
[Link]():
abs(): Devu
Devuelve
elve el valor absoluto
absoluto de un número.
número.
• Math.
[Link](
ceil():
): Devuelve el entero más pequeño
pequeño mayor o igual al número espe
especi-
ci-
ficado.
• [Link](): Devuelve el entero más grande menor o igual al número especifi-
cado.
Ejemplo:
Supongamos que queremo
Supongamos queremoss calcular el área de un círculo con un radio de 5. Pode-
mos usar el método [Link] para obtener el valor de pi y el método [Link]() 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

enteross de tamaño arbitrario. Esto signific
entero significa
a que los número
númeross enter
enteros
os más grandes
que se pueden representar con el tipo de datos Number de JavaScript ya no son un
problema.

116
8 USO AVANZAD
ANZADO
O DE DATOS
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()
valueOf():: Esta
Esta función
función se
se usa
usa para
para convertir
convertir un
un BigInt
BigInt aa un
unanúmero
cadena.
entero.
• toLocaleString(): Esta función se usa para convertir un BigInt a una cadena
con formato local.
Ejemplo:
A continuación se muestra un ejemplo de cómo usar BigInt en JavaScript:

Reto:
Intenta crear una función que tome un BigInt como argumento y devuelva el número
entero más grande que se puede representar con seguridad en JavaScript.

117
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

8.2 Uso de fechas

8.2.1 Propiedades y métodos del objeto Date

El ob
obje
jeto
to Da
Date
te en Java
JavaSc
Scri
ript
pt es un obje
objeto
to na
natitivo
vo qu
que
e no
noss perm
permitite
e tr
trab
abaj
ajar
ar con
con fech
fechas
as
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
información
sobre la fecha y hora actual. Algunas de las propiedades más comunes son:
• getFullYear(): Devuelve el año actual.
• getMo
getMonth():
nth(): Dev
Devuelve
uelve el mes actual.
actual.
• getDat
getDate():
e(): Devue
Devuelve
lve el día del mes actual.
actual.
• getHou
getHours():
rs(): Devue
Devuelve
lve la hora actual
actual..
• getMinutes(): Devuelve los minutos actuales.

Métodos Los método

métodoss del objeto Date nos permit
permiten
en realiza
realizarr operacion
operaciones
es con fe-
chas y horas. Algunos de los métodos más comunes son:
• setFullYear(): Establece el año actual.
• setMo
setMonth():
nth(): Est
Establec
ablece
e el mes actual.
• setDat
setDate():
e(): Estab
Establece
lece el día del mes actua
actual.l.
• setHou
setHours():
rs(): Esta
Establece
blece la hora actu
actual.
al.
• 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
8 USO AVANZAD
ANZADO
O DE DATOS
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

texto

8.3.1 Secuen
Secuencias
cias de escap
escapee

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

para representar caracteres especiales o caracteres de control. Estas secuencias
de esca
escape
pe se escr
escrib
iben
en como
como una
una ba
barr
rra
a inve
invert
rtid
ida
a segu
seguid
ida
a de una
una letr
letra
a o un núme
número
ro..
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
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

se mostrará como:
Esta cadena contiene una barra invertida: \
Reto:
Escribe una cadena de texto que contenga
Escribe contenga una tabul
tabulación
ació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,
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
argume nto y devuel
devuelven
ven un número entero o un número de punto flot
flotante,
ante, respecti-
respecti-
vamente.
Ejemplo:

120
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Reto:

Crea una función que tome una cadena de texto como argumento y devuelva un
núme
nú mero
ro ente
entero
ro.. La ca
cade
dena
na de te
text
xto
o pu
pued
ede
e co
cont
nten
ener
er núme
números
ros ente
entero
ross o de
deci
cima
male
les.
s. 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 obj

objeto
eto Stri
String
ng son:
• lengt
length:
h: Esta propieda
propiedad
d devuelve la longit
longitud
ud 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
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

• indexO
indexOf():
f(): Esta funci
función
ón devuelve la posició
posición
n de la primera aparición
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
devuelva el número de veces que aparec
aparece
e el caráct
carácter
er en la cadena de texto
texto..

122
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

8.4 Uso de expresion

expresiones
es regulares
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 regulare
regularess son tema bastan
bastante
te avanzado y compl
complejo
ejo
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
 8 USO AVANZAD
ANZADO
O DE DATOS
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 holaen 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
holaen 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 obj

objeto
eto RegExp son:
• global
global:: Indica si la búsque
búsqueda
da debe ser global o no.

124
 8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

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

las
• multioline:
no. Indica
multiline: Indica si la búsqueda
búsqueda debe ser realizada en múltip
múltiples
les líneas o no.
• lastIndex: Indica el índice de la última coincidencia encontrada.
• source: Dev
Devuelve
uelve la expresi
expresión
ó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
match():
(): Busca una coinci
coincidencia
dencia en una cadena de texto y devuelve
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
Supong amos que queremos buscar todas las palabras que comienzan con la letra
aen una cadena de texto. Para ello, podemos utilizar el siguiente código:

125
 8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

En este ejemplo, hemos creado una expresión regular con la propiedad global para
buscar todas las palabras que comienzan con la letra aen la cadena de texto.
Luego,
Lue go, hemos
hemos utiliz
utilizado
ado el mét
método
odo match(
match()) par
para
a bus
buscar
car las coinci
coinciden
dencia
ciass y alm
almace
acenar
nar
los resultados en un array.
Reto:
Utiliza el objeto RegExp para buscar todas las palabras que comienzan con la letra
ben 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
Insertar
hacer usando el método push(). El método push() agrega un elemento al final de
una lista y devuelve la nueva longitud de la lista.
Ejemplo:

126
8 USO AVANZAD
ANZADO
O DE DATOS
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

lo
logr
grar
ar medi
median
ante
te el us
uso
o de lo
loss mé
méto
todo
doss pu
push
sh(),
(), po
pop()
p(),, sh
shifift(
t()) y un
unsh
shifift(
t().
). Es
Esto
toss mé
méto
todo
doss
permiten agregar, eliminar, mover y reemplazar elementos de una lista.
Ejemplo:

127
8 USO AVANZAD
ANZADO
O DE DATOS
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
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Otra forma de borrar elementos de una lista es usar el método pop(). Este método
borra el últim
último
o eleme
elemento
nto de la lista. Por ejemplo,
ejemplo, para borrar el último element
elemento
o 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
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

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

• push(): Est
Este
e método añade uno o más eleme
elementos
ntos al final del array.
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
Supongamos que tenemos un array con los números del 1 al 10:

Podemos usar el método sort() para ordenar los elementos del array de forma as-
cendente:

Reto:
Crea un array con los nombres de tus amigos y usa el método sort() para ordenarlos
alfabéticamente.

130
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

8.5.5 Propiedades comunes de listas

length lengt
length
h es una propiedad de los objeto
objetoss de JavaScript que devuelve
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 coloresque 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 contarElementosque tome un array como parámetro
y devuelva el número de elementos en el array.

131
8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

8.5.6 Métod
Métodos
os comunes de lis
listas
tas

Métodos de lista concat() y join() Los méto métodos

dos de list
lista
a concat
concat()
() y join() son do
doss
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
matriz en una sola cadena de texto.

Método concat() El métod

métodoo concat() se utiliza
utiliza para unir dos o más caden
cadenas
as 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éto métodos

dos de lista in
indexOf
dexOf() () y find() son
méto
mé todo
doss de Ja
Java
vaSc
Scri
ript
pt qu
que
e se ut
utililiz
izan
an para
para busc
buscar
ar elem
elemen
ento
toss en una
una lilist
sta.
a. El mé
méto
todo
do
indexOf() busca un elemento específico en una lista y devuelve su índice, mientras
que el método find() busca un elemento que cumpla con una condición específica y
devuelve el elemento.
 132

8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

indexOf() El mé
méto
todo
do inde
indexO
xOf(
f()) busc
busca
a un elem
elemen
ento
to espe
especí
cífifico
co en una
una list
lista
a y de
devu
vuel
el--

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

8 USO AVANZAD
ANZADO
O DE DATOS
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
elim
elimin
inad
ado.
o. El mé
méto
todo
do un
unsh
shifift(
t()) ag
agre
rega
ga un el
elem
emen
ento
to al pri
princ
ncip
ipio
io de un
una
a lilist
sta
a y de
devu
vuel
elve
ve
la nueva longitud de la lista.
Ejemplo:
 134

8 USO AVANZAD
ANZADO
O DE DATOS
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
una matr
matriz
iz y de
devo
volv
lver
er un
una
a nuev
nueva
a ma
matr
triz
iz.. Es
Esta
ta nu
nuev
eva
a ma
matr
triz
iz cont
contie
iene
ne lo
loss elem
elemen
ento
toss
extraídos, desde el índice inicial hasta el índice final (no incluido). El método splice()
se usa para agregar o eliminar elementos de una matriz.
Ejemplo:
 135

8 USO AVANZAD
ANZADO
O DE DATOS
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éto

método
do sort() en Jav
JavaScrip
aScriptt 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

8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Reto:
Crea una lista con númer
números
os enteros y usa los métodos sort() y reverse()
reverse() para orde-
narla de forma ascendente y descendente.

Método de lista forEach() y map() El mét método

odo forEach()
forEach() se us
usa
a para ititerar
erar sobre
una lista de elementos y ejecutar una función para cada elemento. Esta función se
ejecuta una vez por cada elemento de la lista.
Ejemplo:
 137

8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

El método map() también se usa para iterar sobre una lista de elementos, pero en
lugar de ejecutar una función para cada elemento, devuelve una nueva lista con los
resultados de la función aplicada a cada elemento.
Ejemplo:
 138

8 USO AVANZAD
ANZADO
O DE DATOS
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()

filter() es una función de JavaScr
JavaScript
ipt 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 a.

Método de lista reduce() reduce(reduce()) es una función de JavaScrip

JavaScriptt que se utiliza
para
para re
redu
duci
cirr un ar
arra
rayy a un solo
solo valo
valorr. Es
Esta
ta func
funció
ión
n toma
toma dos
dos ar
argu
gume
ment
ntos
os:: un
una
a func
funció
ión
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

8 USO AVANZAD
ANZADO
O DE DATOS
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.
arreglos. Esto signi
significa
fica que un arreglo
arreglo mult
multidime
idimension
nsional
al es un arreglo
arreglo de arreglos.
Esto nos permite almacenar datos en una estructura de datos jerárquica.
Ejemplo:
 140

8 USO AVANZAD
ANZADO
O DE DATOS
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

8 USO AVANZAD
ANZADO
O DE DATOS
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

8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Reto:
Crea una función que tome un ArrayBuffer
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..
ArrayBuffer
 143

8 USO AVANZAD
ANZADO
O DE DATOS
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

8 USO AVANZAD
ANZADO
O DE DATOS
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

8 USO AVANZAD
ANZADO
O DE DATOS
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

Modififica
Modi carr pr
prop
opie
ieda
dade
dess de obje
objeto
toss en Ja
Java
vaSc
Scri
ript
pt es un
una
a ta
tare
rea
a senc
sencililla
la.. Es
Esto
to se pu
pued
ede
e
hacer usando la notación de punto o la notación de corchetes.
Ejemplo:
 146

8 USO AVANZAD
ANZADO
O DE DATOS
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

8 USO AVANZAD
ANZADO
O DE DATOS
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

podemoss crear objetos y asignarles
podemo asignarles métodos
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

8 USO AVANZAD
ANZADO
O DE DATOS
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.
• __prot
__proto__:
o__: Esta propiedad conti
contiene
ene una referencia al prototipo
prototipo de un objeto.
 149

8 USO AVANZAD
ANZADO
O DE DATOS
DATOS

Estás propiedades tendrás más sentido en la sección de Programación Orientada a

los Objetos.
Los métodos de Object son:
• hasOwnProperty(): Esta función devuelve un valor booleano que indica si el
objeto contiene la propiedad especificada.
• is
isPr
Prot
otot
otyp
ypeO
eOf(
f():
): Esta
Esta fu
func
nció
ión
n de
devu
vuel
elve
ve un va
valo
lorr bo
bool
olea
eano
no que
que in
indi
dica
ca si el ob
obje
jeto
to
especificado es un prototipo del objeto actual.
• propert
propertyIsEn
yIsEnumerab
umerable():
le(): Esta función devuelve un valor boolean
booleano o que indica
si la propiedad especificada es enumerable.
Ejemplo:
Supongamos que queremos comprobar si un objeto tiene una propiedad específica.
Podemos usar el método hasOwnProperty() para hacer esto:

Reto:
Crea un objeto con algunas propiedades y usa el método propertyIsEnumerable()
para comprobar si una propiedad es enumerable.
 150

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

8.6.7 Métod
Métodos
os comunes de obj
objetos
etos

create() creat
create()
e() es un método de JavaScript
JavaScript que se utiliza para crear
crear un nuevo
objeto a partir de un prototipo. Esto significa que puede crear un objeto con las
mismas propiedades y métodos que el prototipo. Esto es útil para crear objetos
similares sin tener que escribir todo el código desde cero.
Ejemplo:
Supongamos que queremos crear un objeto llamado miObjeto que tenga las mis-
mas propiedades y métodos que el objeto prototipo. Podemos hacer esto usando el
método create() de la siguiente manera:

Reto:
Crea un objeto llamado miObjeto que tenga las mismas propiedades y métodos que
el objeto prototipo. Usa el método create() para crear el objeto.

9 Prog
Programa
ramación
ción orientada
orientada a objetos
objetos (POO)

9.1 Paradigma

La Programación Orientada a Objetos (POO) es un paradigma de programación

que se basa en la creación de objetos que contienen datos y funcionalidades. Estos
 151

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

objetos se relacionan entre sí para formar una estructura de datos compleja. JavaS-
cript es un lenguaje de programación orientado a objetos, lo que significa que los
programadores pueden crear objetos y usarlos para construir aplicaciones.
Ejemplo:
A continuación se muestra un ejemplo de una clase de objeto en JavaScript. No
tienes que entenderla ahora ya que en las siguientes lecciones veremos todos los
detalles.

Reto:
Crea
Crea un de obje
objeto
to llam
llamad
ado
o Au
Autoto qu
que
e teng
tenga
a los
los atri
atribu
buto
toss ma
marc
rca,
a, mode
modelo
lo y añ
año.
o. Ag
Agre
rega
ga
un método llamado mostrarInfo
mostrarInfo que impri
imprima
ma en la consola la infor
informació
maciónn del auto.
Crea 2 objetos más para otros autos para que veas que requiere mucho código
repetido que podremos simplificarlo con los conocimientos de este capítulo.
 152

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

9.2 Función constructora

Una función constructora es una función especial en JavaScript que se usa para
crear objetos. Esta función se define con la palabra clave new y se usa para crear
una instancia de un objeto. Esta función se usa para crear objetos con propiedades
y métodos específicos.
Ejemplo:
A continuación se muestra un ejemplo de una función constructora en JavaScript
para crear un objeto Persona con propiedades nombre y edad:

Reto:
Crea
Crea una
una fu
func
nció
ión
n co
cons
nstr
truc
ucto
tora
ra en Ja
Java
vaSc
Scri
ript
pt pa
para
ra crear
crear un obje
objeto
to Au
Auto
to co
con
n pr
prop
opie
ieda
da--
des marca, modelo y año. Luego, crea una instancia de Auto y muestra los valores
de sus propiedades en la consola.
 153

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

9.3 Contexto

9.3.1 Conte
Contexto
xto usan
usando
do this

En JavaScript, el contexto se refiere a la forma en que una función se ejecuta. El

contexto de una función se determina por el valor de la palabra clave this dentro de
la función.
Ejemplo:
Supong
Supo ngam
amos
os qu
que
e te
tene
nemo
moss un obje
objeto
to llllam
amad
ado
o pe
pers
rson
ona
a co
con
n do
doss pr
prop
opie
ieda
dade
des:
s: nomb
nombre
re
y edad.

Ahora, supongamos que queremos crear una función que imprima el nombre y la
edad de la persona. Para hacer esto, podemos usar la palabra clave this para acce-
der a las propiedades del objeto persona dentro de la función.
 154

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Ahora, podemos llamar a la función imprimirPersona y pasar el objeto persona como

el contexto de la función. Esto significa que el valor de this dentro de la función será
el objeto persona.

Reto:
Crea un objeto llamado libro con dos propiedades: título y autor. Luego, crea una

función llamada
palabra clave [Link] que imprima
Finalmente, llama el título
a la función y el autory del
imprimirLibro pasalibro usando
el objeto la
libro
como el contexto de la función.

9.3.2 Vinculación (call(), apply(), bind())

La vinculación es una característica de JavaScript que permite a los desarrolladores

llamar a una función con un contexto de ejecución específico. Esto significa que
puedes cambiar el valor de this dentro de una función. Esto se logra mediante los
 155

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

métodos call(), apply() y bind().

call() El método cal

call()
l() permit
permite
e llamar a una función con un contexto
contexto de ejecución
específico. El primer argumento de call() es el contexto de ejecución, seguido de los
argumentos de la función.
Ejemplo:

apply() El método apply() funciona de manera similar al método call(), con la dife-
rencia de que los argumentos de la función se pasan como una lista.
Ejemplo:
 156

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

bind() El método bibind()

nd() crea una nueva ffunción
unción con el contexto de ejecución espe-
cificado. Esta nueva función puede ser llamada posteriormente con los argumentos
especificados.
Ejemplo:
 157

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Reto:
Intenta crear una función que use call(), apply() y bind() para cambiar el contexto de
ejecución de una función.

9.3.3 this en funci

funciones
ones flec
flecha
ha

This en funciones flecha en JavaScript se refiere a la referencia al contexto de la

función en la que
función flecha se encuentra.
se determina por elEsto significa
contexto en elque
queelsevalor de this dentro de una
encuentra.
Ejemplo:
 158

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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 llamadoPersonacon las propiedadesnom-
brey edad.
 159

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Ahora, si queremos crear un objeto Estudianteque herede las propiedades y

métodos de Persona, podemos hacerlo usando prototype:

Reto:
Crea un objeto Profesorque herede las propiedades y métodos de Persona.
Agrega una propiedad materiaal objeto Profesory asígnale un valor. Luego,
imprime el valor de la propiedad materiaen la consola.
 160

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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íc
vehículo
ulo está encendi
encendido".
do". Lue-
go, crea un objeto que herede de vehiculo y asigna los valores apropiados a las
propiedades. Finalmente, llama al método encender para verificar que funciona.
 161

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

9.6 Clases

Las clas
Las clases
es en Java
JavaSc
Scri
ript
pt son
son un
una
a form
forma
a de defi
defini
nirr ob
obje
jeto
toss con
con un
unaa sint
sintax
axis
is má
máss clar
clara
a
y concisa
concisa (en lugar de las lecciones
lecciones revisadas en este capítul
capítuloo usand
usando o funci
funciones).
ones).
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:

cons
constr
truc
ucto
tor(
r()) es un
una
a fu
func
nció
ión
n espe
especi
cial
al en Ja
Java
vaSc
Scri
ript
pt que
que se usa
usa pa
para
ra crear
crear e in
inic
icia
ialiliza
zarr
objetos. Esta función se usa para crear una nueva instancia de un objeto, asignar
valores a sus propiedades y luego devolver el objeto.
Ahora podemos crear una instancia de esta clase usando el constructor:
 162

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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
Declaración y expresio
expresion
n de clases

Las declaraciones de clases en JavaScript son una forma de definir una clase y sus
miem
miembr
bros
os.. Es
Esta
tass de
decl
clar
araci
acion
ones
es se us
usan
an pa
para
ra cr
crea
earr un
una
a nuev
nueva
a clas
clase
e co
con
n propi
propied
edad
ades
es
y métodos. Por otro lado, las expresiones de clases son una forma de definir una
clase y sus miembros en una sola línea. Estas expresiones se usan para crear una

nueva clase con propiedades y métodos en una sola línea.

Ejemplo:
Declaración de Clase:
 163

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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

método getEdad()
para obtener la edad de la persona:
 165

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Reto:
Crea una clase llamad
llamada
a Cuent
CuentaBanc
aBancaria
aria con los atributos nombre y saldo
saldo.. Agrega
un método llamado depositar() que reciba una cantidad como parámetro y aumente
el saldo de la cuenta en esa canti
cantidad.
dad.

9.9 Campos públicos

Los ca
Los camp
mposos pú
públ
blic
icos
os en Ja
Java
vaSc
Scri
ript
pt so
son
n va
vari
riab
able
less o mé
méto
todo
doss que
que se pu
pued
eden
en acce
accede
derr
desde cualquier parte del código. Esto significa que no hay necesidad de crear una
instancia de una clase para acceder a estos campos.
Ejemplo:
 166

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)
 168

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Reto:
Crea una clase llamada CuentaBancaria que tenga dos campos privados: saldo y
in
inte
teres
res.. Ag
Agreg
rega
a un mé
méto
todo
do llllam
amad
ado
o ca
calc
lcul
ular
arIn
Inte
tere
ress qu
que
e ca
calc
lcul
ule
e el in
inte
tere
ress y lo ag
agre
regu
gue
e
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 mism
misma.
a. Estas propieda
propiedades
des son compartidas
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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

Reto:
Crea
Crea una
una cl
clas
ase
e llllam
amad
ada
a Veh
ehic
icul
ulo
o que
que te
teng
nga
a un
una
a pr
prop
opie
ieda
dad
d está
estátitica
ca llllam
amad
ada
a
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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

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

9 PROGR
PROGRAMACI
AMACIÓN
ÓN O
ORIENT
RIENTADA
ADA A OBJET
OBJETOS
OS (P
(POO)
OO)

extends es una palabra clave para heredar propiedades y métodos de una clase a
otra.
supe
super(
r()) es un
una
a pa
pala
labrbra
a clav
clavee qu
que e se usa
usa pa
para
ra llam
llamar
ar al cons
constrtruc
ucto
torr de la clas
clase
e pa
padr
dre
ey
pasa
pasarr ar
argu
gume
ment
ntos
os.. Es
Esto
to sign
signifific
ica
a qu
que
e se pu
pued
ede
e ac
acce
cede
derr a lo
loss mé
méto
todo
doss y propi
propied
edad
ades
es
de la clase padre desde la clase hija.
 173

10 ASIN
ASINCR
CRON
ONÍA
Í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 ejecu
ejecute
te después de un tiempo específic
específico.
o.
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
función
ón programada
programada con setT
setTimeou
imeout().
t(). Esta función
función toma un
parámetro: el identificador devuelto por setTimeout().
Ejemplo:
 174

10 ASIN
ASINCR
CRON
ONÍA
Í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
para de
dete
tene
nerr la ejec
ejecuc
ució
ión
n de una
una func
funció
ión
n o un bloq
bloque
ue de códi
código
go que
que se está
está ejec
ejecut
utan
an--
do repetidamente con setInterval(). Esta función toma un parámetro: el identificador
devuelto por setInterval().
Ejemplo:
 175

10 ASIN
ASINCR
CRON
ONÍA
Í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.11 Crear un
10.2. unaa promes
promesaa

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
rech
rechaz
azad
ada
a con
con un
una
a exce
excepc
pció
iónn y pu
pued
ede
e de
demo
mora
rarr poco
poco o larg
largo
o tiem
tiempo
po de cump
cumplilirs
rse.
e.
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

10 ASIN
ASINCR
CRON
ONÍA
Í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

10 ASIN
ASINCR
CRON
ONÍA
ÍA

aleatorio
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
obtener la informaci
información
ón de cada usuario. Esto se puede lograr con el encade
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

10 ASIN
ASINCR
CRON
ONÍA
Í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
resu
resuel
elva
va con
con el re
resu
sultltad
ado
o de la pr
prim
imer
era
a pr
prom
omes
esa.
a. Lu
Lueg
ego,
o, ma
mane
neja
ja el er
erro
rorr en el bloq
bloque
ue
catch.
 179

10 ASIN
ASINCR
CRON
ONÍA
ÍA

10.2.4 Fetch API

Fetch es una API (interfaz

(interfaz de programa
programa de aplicació
aplicación)
n) disponible
disponible en ambie
ambientes
ntes 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:

[Link]() 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 JavaSc

JavaScript
ript son objetos que represe
representan
ntan el result
resultado
ado de una ope-
ración asíncrona. Esto significa que una promesa puede tener uno de tres estados:
pendiente, satisfecha o rechazada. Las promesas múltiples son una forma de ma-
nejar varias promesas al mismo tiempo. Esto significa que puedes ejecutar varias
promesas al mismo tiempo y recibir una sola respuesta cuando todas las promesas
se hayan completado.
 180

10 ASIN
ASINCR
CRON
ONÍA
Í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

Prom
Promis
ise
e es un ob
obje
jeto
to qu
que
e rep
repre
rese
sent
nta
a la te
term
rmin
inac
ació
ión
n o el fr
frac
acas
aso
o even
eventu
tual
al de una
una op
ope-
e-
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

10 ASIN
ASINCR
CRON
ONÍA
ÍA

• [Link]: Esta propiedad es un objeto que contiene

contiene los métodos que
se pueden usar para manipular una promesa.

Métodos
• Promi
[Link]
[Link]():
(): Esta función toma una matri
matrizz de promesas
promesas y devuel
devuelve
ve una pro-
mesa
me sa qu
que
e se reresu
suel
elve
ve cuan
cuando
do toda
todass las
las pr
prom
omesesas
as de la ma
matr
triz
iz se ha
han
n re
resu
suel
elto
to..
• Promi
[Link]
[Link]():
e(): Esta funció
función
n toma una list
lista
a de promes
promesas
as y devuel
devuelve
ve una pro-
mesa que se resuelve o rechaza tan pronto como una de las promesas de la
lista se resuelve o rechaza.
• Promi
[Link]
[Link]():
ect(): Esta funció
función
n devuelve una promesa rechazada con un valor
especificado.
• Promi
[Link]
[Link]():
olve(): Esta funció
función
n devuelve una promes
promesa
a resuelta con un valor
especificado.
Ejemplo:
A continuación se muestra un ejemplo de código que usa los métodos [Link]()
y [Link]() para resolver una matriz de promesas:
 182

10 ASIN
ASINCR
CRON
ONÍA
Í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
cro no de ma
mane
nera
ra sí
sínc
ncro
rona
na.. Esto
Esto sign
signifific
ica
a qu
que
e pued
puedes
es escri
escribi
birr có
códi
digo
go asín
asíncr
cron
ono
o co
como
mo
si fuera código síncrono, lo que hace que sea mucho más fácil de leer y mantener.
Ejemplo:
 183

11 MÓ
MÓDU
DULO
LOS
S

En
paraeste ejemplo,
obtener datoslade
función obtenerDatos
una URL es una función
y luego imprimirlos asíncrona
en la consola. La que usa clave
palabra fetch
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
Escribe función
ón asíncrona que use fetch para obtener una lista de usuarios
usuarios de
una URL y luego imprima el nombre de cada usuario en la consola.

11 Módulos

11.1 Módulos
Módulos y herramientas
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

11 MÓ
MÓDU
DULO
LOS
S

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
desarro
des arrolla
llador
dores
es com
compart
partir
ir código
código ent
entre
re proyect
proyectos,
os, lo que aho
ahorra
rra tiempo
tiempo y esf
esfuerz
uerzo.
o.
Han ex
Han exis
istitido
do va
vari
rios
os si
sist
stem
emas
as y titipo
poss de sint
sintax
axis
is pa
para
ra im
impo
port
rtar
ar y eport
eportar
ar mó
módu
dulo
loss en la
historia de JavaScript. Los más populares son módulos de JavaScript, CommonJS
(usados en [Link]), 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
podemos crear un módulo separado para la funci
función
ón y luego importarlo
importarlo en el
archivo principal.
 185

11 MÓ
MÓDU
DULO
LOS
S

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án
rectángulo
gulo 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 [Link] que es un ambiente para correr JavaScript en el backend.

Ejemplo:
Supongamos que tenemos un archivo llamado [Link] 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

11 MÓ
MÓDU
DULO
LOS
S

Reto:
Crea un archivo llamado [Link] que contenga una función para calcular el área de
un re
rect
ctán
ángu
gulo
lo.. Lu
Lueg
ego,
o, en ot
otro
ro ar
arch
chiv
ivo,
o, im
impo
port
rta a la fu
func
nció
ión
n ar
area
eaDe
DelR
lRec
ecta
tang
ngul
ulo
o usan
usando
do
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 [Link]
[Link]..

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
desarrolladores crear aplicaci
aplicaciones
ones 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

11 MÓ
MÓDU
DULO
LOS
S

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,
fu
func
ncio
ione
ness de flflec
echa
ha,, etc.
etc.,, y Ba
Babe
bell se en
enca
carg
rgará
ará de co
conv
nvert
ertir
irlo
lo en códi
código
go que
que lo
loss na
nave
ve--
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
quisiéramos usar una funci
función
ón de flecha para crear una función
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

11 MÓ
MÓDU
DULO
LOS
S

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

11.1.5 Extensiones .mjs vs .js

Las exte
Las extens
nsio
ione
ness .mjs
.mjs y .js
.js son
son do
doss tipo
tiposs de ar
arch
chiv
ivos
os de Java
JavaSc
Scri
ript
pt.. La exte
extens
nsió
ión
n .m
.mjs
js
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 [Link]
para indicar que se usen módulos de JavaScript, de otra manera utiliza módulos
CommonJS.
Un ejemplo práctico de la diferencia entre .mjs y .js es el siguiente:
Archivo .mjs

Archivo .js
 189

11 MÓ
MÓDU
DULO
LOS
S

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

[Link], 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 quelos
archivos unpuedan
archivousar.
puede exportar variables, funciones y objetos para que otros

Ejemplo:
Supongamos que tenemos un archivo llamado [Link] que contiene una función
para calcular el área de un círculo:
 190

11 MÓ
MÓDU
DULO
LOS
S

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 [Link] que exporte una función llamada sumar que tome
 191

11 MÓ
MÓDU
DULO
LOS
S

dos números como argumentos y devuelva la suma de ellos. Luego, crea otro archi-
vo llamado [Link] 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 [Link] 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

11 MÓ
MÓDU
DULO
LOS
S

Reto:
Crea un archivo llamado [Link] que contenga una función para calcular el área de
un re
rect
ctán
ángu
gulo
lo.. Lu
Lueg
ego,
o, im
impo
port
rta
a la func
funció
ión
n en otro
otro ar
arch
chiv
ivo
o y usal
usala
a para
para calc
calcul
ular
ar el ár
área
ea
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.
JavaScript. Esto es útil para evitar la necesi
necesidad
dad de escrib
escribir
ir

muchas líneas de código para exportar varios elementos desde un archivo.

Ejemplo:
 193

11 MÓ
MÓDU
DULO
LOS
S

Reto:
Crea un archivo JavaScript llamado [Link] que exporte una clase llamada Mi-
Clase.. Luego, crea un archivo [Link] que importe la clase MiClase y cree una ins-
Clase
tancia de la misma. Por último, imprime el nombre de la clase en la consola.

11.5 Alias de importac

importación
ió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

11 MÓ
MÓDU
DULO
LOS
S

Ejemplo:

Reto:

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

11.6 Importar
Importar paquetes
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
te
tene
nerr qu
quee esescr
crib
ibir
ir to
todo
do el có
códi
digo
go desd
desdee ce
cero
ro.. Es
Esto
toss pa
paqu
quet
etes
es cr
crea
eado
doss po
porr comp
compañ
añía
íass
o de
desa
sarro
rrollllad
adore
oress se pued
puedenen in
inst
stal
alar
ar usan
usando
do herra
herrami
mien
enta
tass co
como
mo npm
npm (q
(que
ue vien
viene
e co
conn
[Link]) o yarn.
Ejemplo:
Por ej
Por ejem
empl
plo,
o, si qu
quer
erem
emos
os usar
usar la lilibr
brer
ería
ía de Re
Reac
actt pa
para
ra const
constru
ruir
ir un
una
a ap
aplilica
caci
ción
ón web,
web,
podemos importarla en nuestro proyecto de la siguiente manera:
 195

11 MÓ
MÓDU
DULO
LOS
S

Reto:
Instala
Instala un paquet
paquete
e con npm
npm.. Pue
Puedes
des vis
visita
itarr el sitio
sitio web de npm htt
https:
ps://w
//www
[Link]
.npmjs
[Link]
.com/
m/
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

11 MÓ
MÓDU
DULO
LOS
S

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

12 ITERADORES
ITERADORES Y GENERADOR
GENERADORES
ES

En este ejemplo, el ámbito de [Link] es diferente al ámbito de [Link]. Esto

significa que la variable x en [Link] tendrá un valor de 10, mientras que la variable
x en [Link] tendrá un valor de 20. Esto significa que cuando se llama a la función
fo
foo
o desd
desdee ma
main
[Link],
s, im
impr
prim
imir
irá
á el va
valo
lorr de 10,
10, mi
mien
entr
tras
as qu
que
e cu
cuan
ando
do se llllam
ama
a a la fu
func
nció
ión
n
bar desde [Link], imprimirá el valor de 20.
Reto:
Escribe un programa que declare una variable x con un valor de 10 en un archivo
[Link] y otra variable x con un valor de 20 en un archivo [Link]. Luego, escribe
una función foo en [Link] que imprima el valor de x y otra función bar en [Link]
que imprima el valor de x. Finalmente, llama a ambas funciones desde [Link] para
verificar que el ámbito de cada archivo se mantiene.

12 Iteradores y generadores

12.1 Objetos iteradores

Los objetos iteradores
iteradores en JavaSc
JavaScript
ript son objetos que permi
permiten
ten iterar sobre un con-
junto de elementos. Estos objetos tienen un método llamado next() que devuelve el
siguiente elemento en la secuencia.
 198

12 ITERADORES
ITERADORES Y GENERADOR
GENERADORES
ES

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

12 ITERADORES
ITERADORES Y GENERADOR
GENERADORES
ES

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 mostra
mostrarr cada
uno de ellos por pantalla.

12.3 Método de iterador next()

next() en Ja
Java
vaSc
Scri
ript
pt es una
una fu
func
nció
ión
n qu
que
e se ut
utililiz
iza
a pa
para
ra ititer
erar
ar so
sobre
bre un ob
obje
jeto
to ititer
erab
able
le..
Esto significa
significa que se puede usar para recorrer una secuencia de eleme elementos,
ntos, como
una lista, un texto o un objeto.
Ejemplo:
 200

12 ITERADORES
ITERADORES Y GENERADOR
GENERADORES
ES

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
Funciones generad
generadoras
oras

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

12 ITERADORES
ITERADORES Y GENERADOR
GENERADORES
ES

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.
tiemp o. Est
Esto
o signi
significa
fica q
que
ue un generador
generador puederecordarsu estado enentre
tre llam
llamadas,
adas,
lo que le permite devolver valores diferentes cada vez que se llama.
Ejemplo:
A continuación se muestra un ejemplo de un generador que devuelve los números
pares entre 0 y 10:
 202

13 INTERNACIO
INTERNACIONALIZ
NALIZACIÓ
ACIÓN
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

13 INTERNACIO
INTERNACIONALIZ
NALIZACIÓ
ACIÓN
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 DateT

DateTimeFor
imeFormat
mat

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
personalizad
persona lizadas
as para mostr
mostrar
ar a los usuarios, así como analizar cadenas de fecha y
hora para obtener información sobre la fecha y la hora.
Ejemplo:
 204

13 INTERNACIO
INTERNACIONALIZ
NALIZACIÓ
ACIÓN
N

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

DateTimeFormat para
formatear
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 dd/mm/aaaa hh:mm.

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

13 INTERNACIO
INTERNACIONALIZ
NALIZACIÓ
ACIÓN
N

Reto:
Utiliza
Utiliza el obj
objeto
eto NumberF
NumberForm
ormat
at para for
format
matear
ear el número
número 123
123456
4567.8
7.89
9 par
para
a mos
mostra
trarlo
rlo
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

14 MET
ETA
A

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
nipular cualquier
cualquier operación realizada sobre un objeto.
objeto. Esto signific
significa
a que podem
podemos
os
controlar el comportamiento de un objeto cuando se realizan operaciones como lec-
tura, escritura, enumeración, invocación, etc.
Ejemplo:
Por ejemplo, podemos usar un objeto Proxy para controlar el comportamiento de un
objeto cuando se intenta leer una propiedad. Por ejemplo, podemos usar un Proxy
para devolver un valor predeterminado si la propiedad no existe:
 207

14 MET
ETA
A

Reto:
Crea
Crea un obje
objeto
to Pr
Prox
oxyy qu
que
e co
cont
ntro
role
le el co
comp
mport
ortam
amie
ient
nto
o de un obje
objeto
to cu
cuan
ando
do se in
inte
tent
nta
a
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 ob
obje
jeto
to Re
Reflflec
ectt es un
una
a AP
APII de Ja
Java
vaSc
Scri
ript
pt que
que pro
propo
porc
rcio
iona
na méto
métododoss pa
para
ra in
inte
tera
ract
ctua
uarr
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
desarrolladores pueden usar el objeto Refle Reflect
ct para reali
realizar
zar tareas como definir
propiedades, definir métodos, establecer y obtener valores, etc.
 208

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

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 objet
objeto
o Reflect para definir una propie
propiedad
dad en un objeto
y luego imprima el valor de la propiedad.

15 Siguientes pasos

15.1 Herramientas

Aprende las siguientes herramientas:

1. [Link]: 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. [Link]: 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

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

aplicaciones web y móviles escalables.

3. Angular: Es
Esta
ta es un
una
a alte
altern
rnat
ativ
iva
a a Reac
React.
t. Es un marc
marco
o de Java
JavaSc
Scri
ript
pt de códi
código
go
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
estructurada y una mejor administra
administración
ción de errores
errores.. Está diseñ
diseñado
ado para
ayudar a los desarrolladores a escribir código JavaScript más robusto y esca-
lable.

15.2 Recursos
1. MD
MDN N Web Docs
Docs:: Es una
una de las
las fuen
fuentetess de rerefe
fere
renc
ncia
ia más
más comp
comple
leta
tass
para Jav
JavaSc
aScrip
ript.
t. Ofrece
Ofrece doc
docume
umenta
ntació
ciónn detall
detallada
ada sobre
sobre la sintax
sintaxis,
is, los
co
conce
ncept
ptos
os y la
lass AP
APII de JaJava
vaSc
Scriript
pt.. Tambi
ambién
én ofre
ofrece
ce tututo
tori
rial
ales
es y ejem
ejem--
plos
plos pa
para
ra ayud
ayudarar a lo
loss de
desa
sarr
rrol
olla
lado
doreress a apren
aprendederr y usa
usarr Ja
Java
vaSc
Scriript
pt..
[Link]
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. [Link]

3. Stack Overflow:
Overflow: Es una de las comunidades
comunidades de desarroll
desarrolladores
adores 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. [Link]
[Link]
.com/questions/tagged/javascript
4. Academia X: Ofrece una variedad de cursos interactivos para ayudar a los
desarrolladores a aprender y usar JavaScript. [Link]
 210

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

15.3 ¿Que viene después?

Estos son los siguientes pasos recomendados:

1. Practicar
Practicar JavaScri
JavaScript:
pt: Una vez que hayas aprendido
aprendido los conceptos bási
básicos
cos de
JavaSc
JavaScrip
ript,
t, es imp
import
ortant
ante
e prac
practic
ticar
ar para mej
mejora
orarr tus hab
habili
ilidad
dades.
es. Pue
Puedes
des hac
hacer
er
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. Apren
Aprende
derr un
una
a bibl
biblio
iote
teca
ca de Ja
Java
vaSc
Scri
ript
pt:: Un
Una
a bi
bibl
blio
iote
teca
ca de Java
JavaSc
Scri
ript
pt es un co
con-
n-
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
optitimi
op miza
zarr tu có
códi
digo
go.. Al
Algu
guna
nass de la
lass he
herr
rram
amie
ient
ntas
as má
máss popu
popula
lares
res son
son We
Webp
bpac
ack,
k,
Babel y Gulp.
5. Aprender
Aprender una base de datos relac
relacional
ional:: Una base de datos relac
relacional
ional 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 la
lass ba
base
sess de dato
datoss no re
rela
laci
cion
onal
ales
es má
máss popu
popula
lare
ress so
son
n Mo
Mong
ngoD
oDB,
B, Co
Couc
uchD
hDB
B
y Redis.
 211
211

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

15.4 Preguntas de entrevista

1. ¿Qué es Java
JavaScript
Script?
?
• 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 variabl
variable
e en JavaScript
JavaScript?
?
• Una variabl
variable
e es un contenedor
contenedor para almace
almacenar
nar datos. En JavaSc
JavaScript,
ript, una va-
riable se declara usando la palabra clave var.
3. ¿Cómo se declara una variab
variable
le en JavaScript?
JavaScript?
• Una variable se declara usando la palabra clave varseguida del nombre de
la variable y, opcionalmente, el valor que se le asignará.
4. ¿Qué es una funció
función
n en JavaScript?
JavaScript?
• Un
Unaa fun
unci
ción
ón es un bloq
bloqueue de códi
código
go que
que se pu
pued
ede
e ejec
ejecututar
ar cuan
cuando
do se le llam
llama.a.
Lass fu
La func
ncio
ione
ness se util
utiliz
izan
an para
para re
real
aliz
izar
ar ta
tare
reas
as espec
específ
ífic
icas
as y se pued
pueden
en reuti
reutililiza
zarr
en diferentes partes de un programa.
5. ¿Cómo se define una funci
función
ón en JavaScript
JavaScript?
?
• Una función se define usando la palabra clave functionseguida del nombre
de la funci
función
ón y los parámet
parámetros
ros que se pasará
pasarán
n a la función.
6. ¿Qué es un objeto en JavaSc
JavaScript?
ript?
• 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 objet
objeto
o en JavaScript
JavaScript?
?
• Un objeto se crea usando la palabra clave newseguida del nombre del
constructor del objeto. El constructor es una función especial que se utiliza
para inicializar un objeto.
 212

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

8. ¿Qué es una cadena en JavaSc

JavaScript?
ript?
• Una cadena es una secuencia de caracteres. En JavaScript, las cadenas se
escriben entre comillas simples o dobles.
9. ¿Qué es una matriz en JavaS
JavaScript?
cript?
• Una matriz es una colección ordenada de valores. En JavaScript, las matrices
se escriben entre corchetes.
10. ¿Qué es un bucle en JavaScri
JavaScript?
pt?
• Un bucle es una estructura de cont
control
rol que se utiliza para ejecutar
ejecutar un bloque de

có
códi
digo
go re
repe
petitida
dame
ment
nte.
e. En Ja
Java
vaSc
Scri
ript
pt,, lo
loss bucl
bucles
es se escr
escrib
iben
en usan
usando
do la pa
pala
labr
bra
a
clave for.
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 if.
12. ¿Qué es una expresión regul
regular
ar 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 JavaSc
JavaScript?
ript?
• Una clase es una plantilla para crear objetos. En JavaScript, las clases se
definen usando la palabra clave class.
14. ¿Qué es una excepci
excepción
ón en JavaScript?
JavaScript?
• Una excepci
excepción
ón es un error que se produce
produce durante la ejecu
ejecución
ción de un progra-
ma. En JavaScript, las excepciones se manejan usando la palabra clave try
.
 213

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

15. ¿Qué es una etiqueta en JavaScr

JavaScript?
ipt?
• Una etique
etiqueta
ta es una palab
palabra
ra clave que se utiliza para marcar una sección de
código. En JavaScript, las etiquetas se escriben entre corchetes.
16. ¿Qué es una propied
propiedad
ad en JavaScript?
JavaScript?
• Una propiedad es una característica de un objeto. En JavaScript, las propie-
dades se definen usando la palabra clave this.
17. ¿Qué es un método en JavaS
JavaScript?
cript?
• Un método es una función asociada a un objeto. En JavaScript, los métodos
se definen usando la palabra clave this.
18. ¿Qué es una sentencia en JavaScr
JavaScript?
ipt?
• Una senten
sentencia
cia es una instrucci
instrucción
ón que se ejecuta cuando se alcanza un punto
específico en un programa. En JavaScript, las sentencias se escriben usando
la palabra clave return.
19. ¿Qué es una declaraci
declaración
ón en JavaScript?
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 var.
20. ¿Qué es una expresi
expresión
ón en JavaScript?
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 return.
21. ¿Qué es un operador en JavaS
JavaScript?
cript?
• 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 operator.
 clave operator .

214

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

22. ¿Qué es una sentencia de control en JavaSc

JavaScript?
ript?
• Un
Unaa sent
senten
enci
cia
a de cont
contro
roll es un
una
a inst
instru
rucc
cció
ión
n que
que se util
utiliz
iza
a pa
para
ra cont
contro
rola
larr el fluj
flujo
o
de un programa. En JavaScript, las sentencias de control se escriben usando
la palabra clave switch.
23. ¿Qué es una sentencia de iterac
iteración
ión en JavaScript?
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 for.
24. ¿Qué es una sentencia de salto en JavaScri
JavaScript?
pt?
• Una sentencia de salto es una instrucción que se utiliza para saltar
saltar a una parte
específica de un programa. En JavaScript, las sentencias de salto se escriben
usando la palabra clave break.
25. ¿Qué es una sentencia de etique
etiqueta
ta en JavaScript
JavaScript?
?
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
se
secci
cción
ón de có
códi
digo
go.. En Ja
Java
vaSc
Scri
ript
pt,, la
lass sen
sente
tenc
ncia
iass de etiq
etique
ueta
ta se escri
escribe
ben
n usan
usan--
do la palabra clave label.
26. ¿Qué es una sentencia de continuación en JavaScript?
• Un
Unaa sent
senten
encicia
a de cont
contin
inua
uaci
ción
ón es un
una
a inst
instru
rucc
cció
ión
n que
que se util
utiliz
iza
a pa
para
ra salt
saltar
ar a la
siguiente iteración de un bucle. En JavaScript, las sentencias de continuación
se escriben usando la palabra clave continue.
27. ¿Qué es una sentencia de asigna
asignación
ción en JavaScript?
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 =.
 28. ¿Qué es una sentencia de declara
declaración
ción en JavaScript?
JavaScript?

215

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

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

una
un a va
vari
riab
able
le.. En Ja
Java
vaSc
Scri
ript
pt,, la
lass se
sent
nten
enci
cias
as de decl
declar
arac
ació
ión
n se escr
escrib
iben
en usan
usando
do
la palabra clave var.
29. ¿Qué es una sentencia de funció
función
n en JavaScript?
JavaScript?
• Una sentencia de función es una instrucción que se utiliza para definir una fun-
ción. En JavaS
JavaScript,
cript, las sentenci
sentencias
as de funci
función
ón se escrib
escriben
en usando la palabr
palabra
a
clave function.
30. ¿Qué es una sentencia de bloque en JavaScr
JavaScript?
ipt?
• Una sentencia de bloque es una instrucción que se utiliza para agrupar un
conjunto
conjunto de senten
sentencias.
cias. En JavaScript,
JavaScript, las sentencias de bloque se escrib
escriben
en
usando la palabra clave block.
31. ¿Qué es una sentencia de etique
etiqueta
ta en JavaScript
JavaScript?
?
• Una sentencia de etiqueta es una instrucción que se utiliza para marcar una
se
secci
cción
ón de có
códi
digo
go.. En Ja
Java
vaSc
Scri
ript
pt,, la
lass sen
sente
tenc
ncia
iass de etiq
etique
ueta
ta se escri
escribe
ben
n usan
usan--
do la palabra clave label.
32. ¿Qué es una sentencia de excepci
excepción
ó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 try.
33. ¿Qué es una sentencia de clase en JavaScri
JavaScript?
pt?
• Un
Una
a sent
senten
enci
cia
a de clas
clase
e es un
una
a inst
instru
rucc
cció
ión
n qu
que
e se util
utiliz
iza
a pa
para
ra defi
defini
nirr un
una
a clas
clase.
e.
En JavaScript, las sentencias de clase se escriben usando la palabra clave
class.

34. ¿Qué es una sentencia de objeto en JavaScr

JavaScript?
ipt?
 216

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

• 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
new.

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

• Una sentenci
sentencia
a de import
importación
ación es una instrucció
instrucción
n que se utiliza para import
importar
ar
código de otro archivo. En JavaScript, las sentencias de importación se escri-
ben usando la palabra clave import.
36. ¿Qué es una sentencia de exporta
exportación
ción en JavaScri
JavaScript?
pt?
• Una sentenci
sentenciaa de export
exportación
ación es una instrucció
instrucción
n que se utiliza para exporta
exportarr
có
códi
digo
go a ot
otro
ro ar
arch
chiv
ivo.
o. En Ja
Java
vaSc
Scri
ript
pt,, la
lass se
sent
nten
enci
cias
as de expo
export
rtac
ació
ión
n se escri
escribe
ben
n
usando la palabra clave export.
37. ¿Qué es una sentencia de declara
declaración
ción de módulo en JavaScript?
JavaScript?
• Una sentencia de declaración de módulo es una iinstrucción
nstrucció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 module.
38. ¿Qué es una sentencia de declara
declaración
ción de paquete en JavaScri
JavaScript?
pt?
• Un
Unaa sen
sente
tenc
ncia
ia de decl
declar
arac
ació
ión
n de paqu
paquet
ete
e es un
una
a in
inst
stru
rucc
cció
ión
n qu
que
e se util
utiliz
iza
a pa
para
ra
definir un paquete. En JavaScript, las sentencias de declaración de paquete
se escriben usando la palabra clave package.
39. ¿Qué es una sentencia de declaración de interfaz en JavaScript?
• Una sentencia de declaración de interfaz es una iinstrucción
nstrucción que se utiliza para
definir una interfaz. En JavaScript, las sentencias de declaración de interfaz
se escriben usando la palabra clave interface.
40. ¿Qué es una sentencia de declaración de enumeración en JavaScript?
 217

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

• Una se
sent
nten
enci
cia
a de decl
declar
arac
ació
iónn de en
enum
umererac
ació
ión n es un
unaa in
inst
stru
rucc
cció
ión
n qu
quee se ut
utililiz
iza
a
para
para defi
defini
nirr un
una
a en
enum
umer
erac
ació
ión.
n. En Ja
Java
vaSc
Scri
ript
pt,, la
lass se
sent
nten
encicias
as de decl
declar
arac
ació
ión
n de
enumeración se escriben usando la palabra clave enum.
41. ¿Qué es una sentencia de declara
declaración
ción de tipo en JavaScript?
JavaScript?
• Una sentencia de declaración de tipo es una instrucción que se utiliza para
defifini
de nirr un titipo
po.. En Ja
Java
vaSc
Scri
ript
pt,, la
lass se
sent
nten
enci
cias
as de decl
declar
arac
ació
ión
n de titipo
po se escri
escribe
ben
n
usando la palabra clave type.
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 const.
43. ¿Qué es una sente
sentencia
ncia de declaració
declaración
n de variable
variable en JavaScript?
JavaScript?
• Un
Unaa se
sent
nten
enci
cia
a de decl
declar
arac
ació
ión
n de va
vari
riab
able
le es un
una
a in
inst
struc
rucci
ción
ón que
que se ut
utililiz
iza
a pa
para
ra
definir una variable. En JavaScript, las sentencias de declaración de variable
se escriben usando la palabra clave var.
44. ¿Qué es una sentencia de declaración de función en JavaScript?
• Una sentencia de declaración de funci
función
ón es una instrucción que se utiliza
utiliza para
definir una función. En JavaScript, las sentencias de declaración de función se
escriben usando la palabra clave function.
45. ¿Qué es una sentencia de declara
declaración
ción de clase en JavaScrip
JavaScript?
t?
• Una sentenc
sentencia
ia de decla
declaración
ración de clase es una instru
instrucción
cción que se utiliza para
definir una clase. En JavaScript, las sentencias de declaración de clase se
escriben usando la palabra clave class.
46. ¿Qué es una sentencia de declara
declaración
ción de objeto en JavaScri
JavaScript?
pt?
 218

15 SIGUIE
SIGUIENTE
NTES
S PASOS
ASOS

• 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 object.
47. ¿Qué es una sentencia de declara
declaración
ción de método en JavaScri
JavaScript?
pt?
• Un
Unaa sent
senten
enci
cia
a de decl
declar
arac
ació
ión
n de méto
método
do es un
una
a inst
instru
rucc
cció
ión
n qu
que
e se util
utiliz
iza
a pa
para
ra
definir un método. En JavaScript, las sentencias de declaración de método se
escriben usando la palabra clave method.
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 property.
49. ¿Qué es una sentencia de declara
declaración
ción de evento en JavaScri
JavaScript?
pt?
• 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 event.
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 exception.
51. ¿Qué es una sentencia de declaración de interfaz en JavaScript?
• Una sentencia de declaración de interfaz es una iinstrucción
nstrucción que se utiliza para
definir una interfaz. En JavaScript, las sentencias de declaración de interfaz
se escriben usando la palabra clave interface.