Sumérgete en el fascinante mundo del desarrollo web

con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
JavaScript es el lenguaje de la web. Es muy sencillo y fácil de
aprender, ideal para personas que están dando sus primeros pasos en
la programación. En este curso en LinkedIn Learning, primeramente
exploraremos los fundamentos que componen este lenguaje para que
tengas una base sólida. Luego, te enseñaré sobre la estructura de las
páginas web y cómo integrar JavaScript en ellas. Dominarás la
manipulación de elementos y datos en una aplicación web. Mi nombre
es Natalia Corea, desarrolladora con más de diez años de experiencia
construyendo aplicaciones web. Te invito a que te sumerjas en este
curso esencial de JavaScript, donde descubrirás todos los conceptos
necesarios para comenzar a construir tus propias aplicaciones web.

Utilizando los materiales de este curso

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Bienvenidos y bienvenidas al curso de JavaScript esencial. En este
vídeo les voy a explicar cómo correr los ejemplos de código. El código
lo encontrarán en un repositorio de GitHub. Para dirigirte al
repositorio puedes seguir este enlace que, igualmente, lo encontrarás
en la descripción del curso. Para descargar el código tienes varias
opciones. Estas opciones las encontrarás haciendo clic en el botón
Code. Si te diriges a la pestaña de Local, encontrarás estas dos
opciones. Con estas opciones, tu podrás clonar el repositorio en tu
computadora. Aquí, por ejemplo, tienes la URL que puedes
utilizar para poder clonar el repositorio en tu computadora
usando comandos de Git. Y, si así lo quieres, también puedes instalar
la aplicación GitHub Desktop para poder manejar el
repositorio. Ambas opciones requieren que tú tengas instalado
GitHub en tu computadora. Este repositorio contiene solamente una
rama, por lo que también la opción de "download zip" o
"descargar archivos zip" es válida en caso de que no puedas instalar
Git en tu computadora. GitHub también ofrece code spaces. Code
Spaces son un ambiente en la nube en donde podemos encontrar
una versión de Visual Studio Code que nos permite editar código en la
nube. Aquí pueden notar que yo ya tengo dos espacios creados. Tú
puedes crear tu propio espacio dirigiéndote a esta pestaña
donde encontrarás un botón para crear este espacio. Luego de que el
espacio haya sido creado, la vista que verás es algo muy similar a
esto. Puedes notar que la interfaz es igual a Visual Studio Code con la
diferencia de que esto se corre en el navegador. Aquí puedes notar
que puedes acceder a cada uno de los archivos JavaScript de la
misma manera como si tú estuvieras corriendo esta instancia en tu
computadora directamente. Luego, para poder correr el código en tu
computadora tienes dos opciones. Primero, cabe mencionar que tú
necesitas un editor de código para poder ver los ejemplos. Durante
este curso yo voy a estar utilizando Visual Studio Code, pero también
tú puedes utilizar el editor de tu preferencia. Entonces, como te
mencioné anteriormente, hay dos opciones de cómo correr el código
en tu computadora. La primera opción que te voy a mostrar es
utilizando Node. Para poder utilizar Node primero debes instalarlo
en tu computadora. En la página Información de repositorio
encontrarás el enlace donde podrás descargar Node.js. Luego de que
lo has instalado, Node.js te dará un comando que se llama Node. Con
este comando podrás correr los archivos JavaScript. Por ejemplo, para
correr este archivo, Lección tres tipo String, yo simplemente abro una
terminal, pongo el comando node y luego arrastro el archivo a la
terminal y presiono Enter. Esta opción solamente funciona con
ejemplos que son solamente archivos JavaScript. Para ejemplos que
incluyen HTML y CSS tendrás que correrlos en el navegador. Para
esto, simplemente debes abrir el archivo index.html en el navegador
que tengas instalado en tu computadora. Igualmente, tú puedes
correr los archivos JavaScript en el navegador en caso de que no
puedas instalar Node en tu computadora. Como en este
ejemplo, puedes notar que el index html de la unidad 2 corre todos
los archivos de JavaScript dentro de esta unidad. Para poder ver los
console log dentro de los archivos JavaScript, debes abrir la ventana
de opciones para el desarrollador dentro de tu navegador. Aquí en
Chrome, para yo poder hacer esto, debo dirigirme a View o Vista, y
luego dirigirme a la última opción, Developer o desarrollador, y aquí
encontrarás JavaScript Console o la consola JavaScript. A lo largo de
este curso notarás que yo utilizo varias maneras para correr el
código. En algunas instancias utilizaré Node. En otras instancias,
utilizaré el navegador. Tú tienes la opción de utilizar una o la
otra, dependiendo de qué sea más conveniente para ti.

¿Qué es JavaScript?

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Bienvenidos al curso de JavaScript esencial. Mi nombre es Natalia
Corea y te voy a estar acompañando a lo largo de este curso. Para
poder aprender a utilizar JavaScript, primero debemos saber qué es
JavaScript. JavaScript es el lenguaje que utilizamos para
agregar interacción y funcionalidad a páginas web. La palabra script,
dentro del nombre JavaScript, nos indica que este no es un lenguaje
que se compila como Java u otro lenguaje de esta misma
naturaleza, sino que un programa en JavaScript es, básicamente, un
documento de texto plano que se interpreta y ejecuta a como se va
leyendo. Para entender esto mejor podemos analizar el gráfico
que ves en pantalla. Cuando nosotros navegamos a una dirección
HTTP, nuestro navegador envía una petición a través del Internet a un
servidor remoto. Este servidor remoto responde a esta petición,
devolviendo un archivo HTML que viaja a través del Internet y se
carga en el navegador. Este archivo HTML contiene código de tres
tipos. El primer tipo es HTML, el cual se encarga de definir todos los
elementos en una página como son imágenes, textos, botones,
menús y demás. El código CSS se encarga de darle estilos y colores a
estos elementos y también definir su posición. Y el código JavaScript
se encarga de darle interactividad y funcionalidad a estos
elementos. Habíamos dicho que el código JavaScript son
básicamente documentos de texto plano. Estos documentos se
cargan dentro del navegador. Cada navegador tiene un intérprete o
un motor de JavaScript que se encarga de parsear, interpretar,
convertir este código a código máquina y ejecutar el código
JavaScript. Este gráfico que ves en pantalla contiene los pasos básicos
que sigue un motor de JavaScript para poder ejecutar el código que
se carga. Estos pasos en la realidad son mucho más complejos, pero
en este momento no es necesario entender cómo un motor de
JavaScript ejecuta el código. Lo importante es entender que el motor
de JavaScript existe. Algo importante también de tener en cuenta es
que cada navegador, según su tipo, tiene su propio motor de
JavaScript. Por ejemplo, Chrome utiliza un motor que se llama V8 o V8
en inglés. Edge de Microsoft utiliza un motor que se llama
Chakra. Firefox utiliza un motor que se llama Spider Monkey y Safari y
utiliza JavaScriptCore. Cada uno de estos motores es desarrollado por
las mismas empresas que desarrollan los navegadores. Entonces, tú
te puedes preguntar: ¿cómo es que el código de JavaScript funciona
de la misma manera a través de todos los navegadores? Esto es
gracias a la especificación de ECMAScript. Esta especificación se
encarga de definir los lenguajes de scripts. El propósito es garantizar
que el código de JavaScript se pueda ejecutar de la misma manera a
través de todos los motores de JavaScript en los diferentes
navegadores. El ECMAScript está en constante evolución y
actualizaciones. Una de las mayores actualizaciones que obtuvimos
en la especificación fue en el 2015 en donde se introdujeron mayores
cambios al lenguaje. Es por esta razón que tú a veces encontrarás en
el Internet comentarios alrededor de esta especificación, el cual se le
llama ECMAScript6 o ES6 en inglés. La actualización más reciente
cuando se ha grabado este curso es el ECMAScript 2023 o la versión
14. Cada vez que una nueva actualización se lanza, las empresas y
los navegadores deben actualizarse e implementar las nuevas
funcionalidades y características que indican la especificación. Es por
esta razón que a veces sucede que, si estás utilizando
una característica que es muy nueva, puede ser que los
navegadores aún no la soporten bien. Es por esta razón que aquí te
dejo dos enlaces. En el primer enlace
webreference.com/javascript/basics/versions puedes encontrar todas
las listas de las diferentes actualizaciones del ECMAScript y así
puedes saber en cuáles versiones se lanzó una u otras
características. El segundo enlace, caniuse, es muy útil para saber si
cierta característica está siendo soportada por un navegador en una
versión específica. De esta manera, tú puedes utilizar este
enlace para saber si cierta característica vale la pena utilizarla o si
debes esperar un poco más hasta que todos los navegadores la
puedan soportar bien. Otras palabras o lenguajes que lo más seguro
que has escuchado alrededor de JavaScript son los frameworks y
librerías que se utilizan para construir páginas web. Estas palabras o
librerías frameworks pueden ser Angular, Vue, Node, React, Backbone
y demás. Estas librerías se han producido debido a que las páginas
web y las aplicaciones aún son más complejas. Entonces, estos
frameworks se necesitan para agilizar el proceso de construcciones
de páginas web o aplicaciones web, pero, antes de aprender alguna
de estas librerías, es importante saber bien como JavaScript
funciona, ya que todas ellas siempre se basan en el mismo
lenguaje. Hasta aquí hemos hablado de JavaScript que se ejecuta del
lado del navegador, pero JavaScript también se puede utilizar del lado
de los servidores o en el backend y esto es gracias a
node.js. node.js es un ambiente de servidor de código abierto que
ejecuta JavaScript. Con Node.js nosotros podemos crear aplicaciones
que se ejecutan del lado del servidor. Estas aplicaciones pueden
ejecutar tareas como acceso a bases de datos, manejo de lógica de
negocios de una aplicación y mandar respuestas a peticiones desde
los navegadores del lado del cliente. Es importante tomar en cuenta
que Node.js utilizable V8 como el motor de JavaScript al igual como lo
hace Chrome. En este curso nos vamos a enfocar en la programación
de JavaScript del lado del navegador. La razón de esto es porque es
más fácil ejecutar código en el navegador, ya que por lo general
todas las computadoras tienen uno instalado. Para poder utilizar
Node deberías poder instalar Node en tu computadora pero esto
requiere un proceso más largo. Por lo general, cuando uno aprende a
programar aplicaciones web, primero empezamos con el lado del
cliente. Es por esta razón que todos los ejercicios que tú vas a
encontrar en este curso se van a ejecutar en un navegador. Pero si tú
estás interesado en aprender más sobre Node.js, Angular, React o
incluso Vue, puedes tomar alguno de los cursos disponibles
igualmente dentro del catálogo de LindekIn Learning luego de que
hayas terminado este curso.

Cómo ejecutar código JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Te voy a mostrar cómo se ejecuta el código JavaScript dentro de un
navegador. Aquí en pantalla puedes ver que, en mi editor de Visual
Studio Code. yo he cargado un archivo que se llama
Ejemplo.HTML. Las páginas o documentos HTML tienen una estructura
definida. Estos empiezan con la definición del tipo de documento
utilizando esta etiqueta y luego se agrega la etiqueta HTML. Seguido,
se agrega una etiqueta de cabecera, o head, donde se
pone información sobre la página, como lo son el viewport o el título
de la página, y luego tenemos otra etiqueta, que se llama body, en
donde ponemos los elementos que se van a mostrar en la
página. Para agregar código JavaScript a una página tenemos dos
opciones. La primera opción es la que ves aquí, con esta etiqueta de
script. Poniendo estas etiquetas dentro de una página
HTML, podemos agregar código JavaScript. Este código que ves aquí
lo que hace es que declara una variable que se llama usuario, la cual
tiene un valor que es Marcos. Y luego Mensaje de saludo es otra
variable que se define llamando la función saludo. Puedes ver que la
función saludo se llama con el valor de usuario y retorna un string, el
cual contiene un texto que es de un saludo al nombre que pasamos
como parámetro. Y luego se hace un alert para mostrar este saludo al
usuario. Este es un código muy básico de JavaScript y, aunque tal vez
no lo entiendas muy bien, ahora el propósito es simplemente para
mostrarte cómo se ejecuta el código en el navegador. Aquí yo ya he
cargado el documento HTML en la página, como puedes ver. Aquí yo
tengo los elementos HTML definidos dentro del body. En este caso,
como el documento ya se cargó, el código JavaScript ya se
ejecutó. Entonces, no hemos visto el alert. Para poder ver el alert,
debemos correr este código nuevamente. Esto significa que debemos
forzar la carga de este documento otra vez para poder ver el código
en ejecución. Si yo hago esto, puedes notar que ahora he recibido el
alert. El alert lo que hace es que abre una ventana, como ves aquí, y
muestra el texto que le pasemos como parámetro a la función. En
este caso es "Hola Marcos". Al hacer OK, se termina de cargar la
página. Esta es la primera opción de poder agregar código
JavaScript a una página. El problema con esta opción es que muchas
veces vamos a tener que agregar mucho código en una página y esto
hace que los documentos se vuelvan muy grandes. Por lo tanto,
siempre es recomendable utilizar esta opción. Puedes ver que yo
estoy utilizando el mismo tipo de etiqueta, pero, en lugar de tener el
código dentro del archivo HTML, he creado un archivo separado que
se llama lógica.js. La extensión .js indica que este es un archivo que
contiene código de JavaScript. Este código lo puedes encontrar aquí. Y
puedes notar que lo que hace es que genera un número aleatorio
con esta función y, luego, hace igualmente un alert donde se pasa el
resultado de llamar a la función con estos valores. Entonces yo llamo
este archivo de JavaScript, dentro del documento HTML,guardo los
cambios y luego voy a probarlo en el navegador nuevamente. Para
probarlo, entonces simplemente vuelva a cargar el
documento. Recibo el mismo alert que tenía antes y ahora aquí
puedes ver el número aleatorio que se generó a través del archivo
JavaScript. Algo importante a notar es que ambos bloques de código
se ejecutaron de la misma manera. No importa si estos se encuentran
dentro del código HTML o en un archivo separado de
JavaScript. También es importante saber que es posible agregar
muchas etiquetas con diferentes códigos de JavaScript, y este método
nos sirve para poder separar el código en diferentes archivos y así
poder manejar aplicaciones más grandes de una manera más ágil.

Expresiones y declaraciones en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los programas en JavaScript son básicamente documentos de texto
plano. Este texto necesita seguir ciertas reglas para que el motor
de JavaScript pueda leer los comandos dentro del código y ejecutar la
aplicación. En esta lección te voy a explicar dos términos importantes
a la hora de hablar sobre la gramática o la estructura del código
JavaScript. El primer término es "statements" o la palabra en
español sería "declaraciones". Las declaraciones, como la palabra lo
indica, declaran algo, como en este ejemplo yo estoy declarando una
variable que tiene un nombre de X, la cual tiene un valor de diez. Hay
muchos diferentes tipos de declaraciones, como por ejemplo aquí yo
tengo varias declaraciones que contienen código condicional. El otro
término importante entender son las "expresiones". Las expresiones
son porciones de texto o de código que producen un valor, como en
este ejemplo. Yo aquí tengo una declaración de una constante que se
llama "resultado cálculo". El valor de esta constante se produce a
través de una expresión matemática, como puedes ver aquí, en
donde yo estoy sumando 5 a 3 y luego multiplico por dos. Entonces,
en esta declaración podemos decir que esta parte del texto o del
código es una expresión. Luego, en el siguiente ejemplo que puedes
ver aquí, yo estoy declarando dos variables: primer nombre y
segundo nombre. "Nombre completo" es una concatenación de los
dos valores anteriores. Por lo tanto, esta parte del código es una
expresión. Otra cosa importante a tener en cuenta es que todas las
declaraciones, como puedes ver aquí, terminan en un punto y
coma. El punto y coma es importante para que el intérprete o el
motor de JavaScript entienda que el final de la declaración es
aquí. Esto significa que yo puedo tener diferentes declaraciones
en una misma línea de texto y el motor de JavaScript las va a tratar
como declaraciones diferentes debido al punto y coma. A veces
puedes notar que, a pesar de que alguien no agrega el punto y coma,
el motor de JavaScript aún puede leer las declaraciones, pero es una
buena práctica siempre poner el punto y coma al final de las
declaraciones. Si no, esto te puede traer resultados indeseados en
la ejecución de la aplicación de JavaScript.

Declaraciones var, const y let

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay varias maneras de declarar una variable y te voy a
explicar ahora cada una de estas maneras. La primera es utilizando el
keyword var. Para declarar la variable, yo simplemente llamo al
keyword, var, le pongo un nombre a la variable y, luego, le puedo
asignar un valor. En este caso yo he decidido llamar la variable x, y
luego, utilizando este operador, le asigna un valor. Es importante
recalcar que en JavaScript o en los lenguajes de programación en
general, solamente se pueden utilizar caracteres simples para
declarar variables. Estos son caracteres en minúscula, mayúscula y
números. No podemos utilizar caracteres con acentos, como eñes o
tildes, ya que estos no son reconocidos por el lenguaje. En este
ejemplo, yo he declarado una función que se llama ejemplo var, la
cual contiene una declaración de condicional y, dentro de
esta declaración, declaro la variable. Las variables declaradas con var
tienen un alcance de función. En programación el alcance significa el
área del código, o de la lógica del código, en donde la variable es
visible. Por ejemplo, en este caso, yo estoy declarando la variable
dentro de este bloque de código que puedes ver aquí y, luego de
esto, yo estoy llamando la función console log en donde paso como
parámetro X. La función console log lo que hace es que muestra
texto en la consola del navegador. Esto significa que, a la hora de
ejecutar este código el navegador, voy a obtener un texto en la
consola que va a decir "10". A pesar de que la llamada del console log
está fuera de este bloque de código, yo, aún así, tengo acceso a la
variable. Significa que aún estoy dentro de su alcance. Si yo hago lo
mismo fuera de la función, voy a obtener un error, ya que, ya en este
caso, estoy fuera del alcance de la variable. Ya aquí yo ya no tengo
acceso a ella. Las variables declaradas con var se pueden reasignar
valores como puedes ver aquí. Yo primero declaro esta variable y con
un valor de cinco y luego le agrego un valor de siete y no voy a
obtener ningún error. También puedo redeclarar la variable, como
puedes ver aquí. Llamo la misma declaración dos veces y no obtengo
ningún error. La siguiente manera de declarar variables es
utilizando el keyword let. Aquí puedes notar que esta función es igual
a la función que vimos anteriormente, con la diferencia de que, en
lugar de utilizar var para declarar la variable x, estoy utilizando let. En
este caso, cuando yo llame al console log, con la variable voy a
obtener un error. Esto es debido a que el alcance de las variables
declaradas con let está restringido al bloque de código donde yo las
he declarado. En JavaScript, los bloques de código se definen
utilizando llaves. Una llave que abre el bloque de código y la otra que
la cierra. Esto significa que esta función tiene dos bloques: el bloque
de la condición y el bloque de la función. Debido a que esta variable
se declaró con let y se declaró dentro de este bloque de código, esta
variable solamente es visible dentro de este bloque de código. Por
esta razón es que se genera este error que ves aquí. Las variables
declaradas con let se pueden reasignar sin obtener ningún error, pero
estas no se pueden declarar. Significa que, si tienes dos variables con
el mismo nombre dentro del mismo bloque de código, vas a obtener
un error. Y la tercera opción para declarar valores es utilizando
const. La diferencia entre const, let y var es que const nos
permite declarar constantes. Aquí, en este ejemplo, puedes notar que
el alcance de las constantes, o los valores declarados con const,
tienen un alcance igual que let, o sea, que están restringidos al
bloque de código donde se han declarado. Por esta razón es que, al
hacer el console log, igual vas a obtener un error. A diferencia de var
y let, no puedes reasignar valores a un valor declarado con const y
tampoco se pueden declarar, como puedes ver aquí. Esto es igual al
comportamiento de los valores declarados con let.

JavaScript como lenguaje dinámico

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
JavaScript es un lenguaje dinámicamente tipado. Esto significa que a
una variable, luego de ser declarada, puede asignársele otro valor de
diferente tipo. Aquí te voy a mostrar un ejemplo de este
comportamiento. En este ejemplo yo estoy declarando una variable
que se llama "mi variable" y le estoy asignando un valor de diez
que es un valor de tipo número. A la hora de obtener el tipo de dato
de esta variable, JavaScript me va a indicar que es de tipo number o
número. Luego yo puedo venir y asignarle un valor de diferente
tipo, en este caso, una cadena de caracteres. Cuando hago el mismo
type of que hice anteriormente para obtener el tipo de dato de esta
variable, JavaScript me va a decir que ahora el tipo de dato es
string. En otro lenguaje de programación como Java, por ejemplo, que
es más estáticamente tipado, este tipo de código lanzaría un
error, pero no sucede esto en JavaScript debido a su naturaleza de ser
dinámico. Al ser un lenguaje dinámicamente tipado, nos da mucha
flexibilidad a la hora de escribir código. Aquí te voy a mostrar dos
ejemplos. En este ejemplo, yo tengo una variable que contiene un
nombre y otra que contiene un apellido. Entonces, yo quiero crear
una cadena de caracteres que contenga ambos valores. Entonces,
para esto, utilizo el operador de suma. A pesar de que el operador de
suma se utiliza, por lo general, con números, en JavaScript, podemos
utilizarlo para concatenar cadenas de caracteres, como puedes ver
aquí. El resultado de esta expresión va a ser la salida Mario Meza, que
es la concatenación de ambos valores. Aquí tenemos otro
ejemplo. Tengo una variable que se llama "número" y otra que se
llama "número String". En la variable número he asignado un número
cinco. En el número string he asignado un valor de diez, pero en
forma de cadena de caracteres, lo cual en sí no es un número. Luego
he creado una expresión, como puedes ver aquí, donde estoy
sumando número y número String. JavaScript, en este caso, lo que va
a hacer es tratar de resolver los tipos de datos de ambos números, y
luego producir un resultado, el cual va a ser 510 en forma de cadena
de caracteres. Si tú intentaras hacer esta misma operación en otro
lenguaje de programación, es probable que obtengas un error, pero
JavaScript, en este caso, lo que va a hacer es intentar resolver la
diferencia de tipo de datos y producir un resultado. Ahora yo voy a
ejecutar todo este código para que puedas ver el resultado en la
consola. Puedes notar aquí que el primer resultado del typeof de
mi variable es tipo número. Luego tenemos la salida tipo
String. Tenemos la salida del nombre completo, que es Mario Meza, y
al final tenemos el número 510 que, en realidad, esto no es un
número, sino es una cadena de caracteres. Puedes notar que yo no
he recibido ningún error y JavaScript logró resolver la diferencia de
tipo de datos debido a su naturaleza de datos dinámicos.

Comentarios en código JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los comentarios son texto, dentro del código de JavaScript, que no
va a ser ejecutado por el motor de JavaScript dentro del
navegador. Los comentarios son una herramienta muy útil para
poder agregar información sobre el código que estamos
escribiendo y, de esta manera, otros desarrolladores pueden
entender mejor lo que estamos intentando resolver dentro del
código. Hay dos maneras de agregar un comentario dentro de
un código de JavaScript. El primero es con el doble slash, como
puedes ver aquí. Al agregar doble slash al inicio de una línea de
código, hará que toda esta línea sea un comentario, como puedes ver
aquí. Puedes notar que el mismo Visual Studio Code cambia el
color del texto que ha sido convertido en comentario. Otra manera de
agregar comentarios es utilizando slash asterisco y cerrando el
comentario con asterisco slash, como puedes ver aquí. La ventaja de
este método es que podemos aplicar el comentario a varias líneas de
texto, como puedes ver aquí. Entonces, esto es útil cuando
necesitamos convertir un bloque de texto o de código a
comentario. Otro uso útil de los comentarios es cuando estamos
probando algún nuevo código dentro de la aplicación. Esto significa
que yo puedo tomar parte del código, por ejemplo, esta línea que
tenemos aquí, y convertirla en código. Esto hará que el motor de
JavaScript no ejecute esta línea, pero igual yo puedo mantenerla
dentro del código en caso de que la necesite en el futuro.

JavaScript en modo estricto

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
JavaScript, por lo general, es muy flexible a la hora de escribir
código. Pero nosotros podemos ejecutar JavaScript de una manera
más estricta utilizando el modo estricto. Para definir que un archivo
JavaScript utiliza el modo estricto, debemos utilizar esta sintaxis que
ves aquí. El modo estricto en JavaScript es una forma de habilitar un
conjunto más estricto de reglas para escribir código de
JavaScript. Esto nos ayuda a detectar errores comunes y prevenirlos
también. Aquí hay algunos errores que nosotros podemos
prevenir utilizando el modo estricto. Un error común es cuando
asignamos un valor a una variable que no tiene una declaración. Esto
nos puede traer problemas, por ejemplo, cuando escribimos el
nombre de una variable que no existe o hemos declarado una
variable, pero, a la hora invocarla, la escribimos mal. Por lo general,
JavaScript no va a lanzar un error, pero cuando utilizamos el modo
estricto, sí va a lanzar un error. Esto, por supuesto, previene errores
en la lógica del código. Otro error que previene el modo estricto en la
asignación de valores a variables globales, como en este caso. Nan
not a number es un valor que representa valores que no son
numéricos. Aquí yo le estoy asignando un valor, pero esto en
sí, lógicamente, es un error. Entonces, con el modo estricto, nosotros
podemos evitar este tipo de asignación. Otro error también que
previene es la duplicación de nombres de parámetros en una
función. Como en este caso, puedes notar que suma tiene dos
parámetros, cada uno con el mismo nombre. Esto lógicamente es un
error. Y otro error también que nos puede evitar el modo estricto es
no permitir la eliminación de variables o funciones utilizando el
keyword delete. Aquí pueden notar que el mismo Visual Studio me
muestra un error, marcando la X como rojo. Ahora yo puedo intentar
ejecutar este código para ver qué sucede. Si abro la terminal y paso
la URL del código, puedes notar que el código no corrió, ya que
tiene varios errores. Si yo elimino el modo estricto, lo que voy a hacer
es agregarle un comentario al final y vuelvo a ejecutar el
código. Puedes ver que no se generó ningún error. Así es como
funciona el modo estricto en JavaScript.

2.- Tipos de datos primitivos

Tipos primitivos y no primitivos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript, los tipos de datos se dividen en dos grandes grupos. El
primer grupo se llama datos primitivos. Aquí puedes encontrar los
valores numerales, que representan números para operaciones
matemáticas, strings o cadenas de caracteres, que representan
texto, datos booleanos, que representan true o false, verdadero o
falso, datos de tipo símbolo (son un tipo especial que representan
valores únicos dentro de JavaScript). Igual, dentro de este grupo,
tenemos los valores indefinidos. Esto indica una variable que no tiene
un valor definido aún. O los valores nulos, que significan una variable
o una constante que tiene un valor inexistente. Los tipos de datos
primitivos se llaman así porque estos valores en sí no pueden ser
modificados. Aquí podemos ver un ejemplo. A esta variable de tipo
numeral, yo le estoy agregando un valor de mil y luego le estoy
agregando un valor de mil y uno. Esto significa que yo estoy
reemplazando el valor de mil por el segundo número. Entonces, se
dice que el valor es un reemplazo. Yo, realmente, no estoy cambiando
este valor en sí. Es por esta razón que se dice que los tipos de datos
primitivos no pueden ser divididos en sí. El segundo grupo es el tipo
de datos no primitivos. Dentro de este grupo obtenemos los
objetos, los arreglos y demás. Los objetos son contenedores que, en
sí, pueden tener varios valores almacenados dentro de la misma
variable o constante. Por ejemplo, en este caso, yo tengo un objeto
que, en sí, tiene una propiedad que se llama nombre, la cual contiene
un string que dice Natalia. Dentro de este mismo objeto, yo puedo
declarar otra propiedad, por ejemplo, apellido, y agregarle un valor
nuevo a este. En este caso, Corea. Entonces, dentro de este mismo
objeto, yo tengo dos valores. Este objeto puede ser dividido y
manipulado, a diferencia de un tipo primitivo. Igual sucede con los
arreglos. Los arreglos en sí son objetos para diferente naturaleza. En
este caso, con los arreglos nosotros podemos crear listas de
valores. Y puedes notar que, dentro de sí, yo puedo agregar muchos
tipos primitivos o no primitivos, dentro de sí. Igual sucede con los
objetos.

Tipos de datos Number y BigInt en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript, los tipos numerales o number los utilizamos para
hacer operaciones matemáticas en el código. Aquí puedes ver un
ejemplo. Yo he creado una constante, que se llama númeroint, a la
cual le he agregado un 42 como valor. Dentro de este tipo numerales,
yo también puedo tener puntos flotantes o decimales, como puedes
ver aquí. En caso de que yo tenga que representar un número más
grande, puedo utilizar BIGINT, que este es otro tipo de dato, que el
numeral, que también se puede encontrar dentro de JavaScript. La
diferencia es que este tipo de dato al final tiene una n, como puedes
ver aquí. Hay ciertas diferencias entre los tipos de datos. Tú, por lo
general, vas a utilizar números simples, como puedes ver en el
ejemplo de más arriba. Los bigint generalmente se utilizan cuando se
necesitan hacer operaciones matemáticas, dentro del código, que
requieren un alto grado de precisión. En caso de que estés haciendo
una operación más sencilla, un valor sencillo numeral, como el que
tenemos aquí, será suficiente para la funcionalidad que estés
haciendo.

Strings en JavaScript
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los tipos de datos String, o cadena de caracteres, se utilizan
para representar texto dentro de JavaScript. Aquí vamos a ver varios
ejemplos de cómo declarar un string. En el primer ejemplo String
ejemplo 1, yo estoy utilizando comillas simples, al inicio y al final,
para declarar un string que contenga el valor "Hola mundo". En el
segundo ejemplo, pueden notar que yo estoy utilizando comillas
dobles. Ambos métodos son maneras válidas de crear un string. La
diferencia es que en la primera yo estoy utilizando comilla simple y en
el segundo, comilla doble. La regla aquí es que, si tú estás
empezando un string con comilla doble, debe terminar con comilla
doble igual. Por ejemplo, si yo remuevo esta comilla doble y
pongo una comilla simple, puedes notar que se genera un
error. Entonces, lo importante aquí es saber cuándo utilizar la comilla
correcta. Por ejemplo, si yo necesito un string que contenga comillas
dobles, entonces yo puedo utilizar la comilla sencilla para declarar
el string y así dejar la comilla doble como parte del valor del string. Y
lo mismo lo contrario si yo necesito agregar comilla simple dentro del
string. Aquí vamos a ver cómo se ejecuta este código. Al correrlo,
pueden notar, aquí, que yo estoy obteniendo la comilla doble y la
comilla simple según los ejemplos que vimos en pantalla.

Template strings en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los template string son otra manera de definir strings en
JavaScript. Te voy a mostrar cómo definir un template
String. Nosotros utilizamos comillas invertidas, en lugar de
comillas simples o dobles, para definir el string. Aquí puedes notar el
carácter de comilla invertida al inicio y al final del string. Los template
string tienen una ventaja, que nosotros podemos agregar valores
dinámicos a estos. Como en este caso, por ejemplo, yo tengo una
variable que tiene un valor Mario y otra variable, edad, que tiene un
valor de 30. Entonces, yo agrego el signo de dólar y luego abro
llaves. Dentro de esta, agrego la variable que quiero agregar al string
y lo mismo lo hago con edad. El resultado de esta expresión va a ser
el string que ves aquí marcado. Otra ventaja que tienen los template
string es que nosotros podemos definir strings de varias líneas de
texto como ves en este ejemplo. Si nosotros intentáramos hacer lo
mismo con comillas simples o dobles, JavaScript nos mostraría un
error. Entonces, nosotros, en lugar de utilizar el método que vimos
anteriormente, podemos utilizar Template String para definir un string
que tenga muchas líneas de texto. Con los templates String también
podemos definir expresiones dentro del string, como en este caso. Yo
tengo dos números, A y B. A tiene un valor de diez y B tiene un valor
de 20. Entonces, utilizando el signo de dólar y abriendo llaves, yo
puedo agregar los valores de estos números al string, e, incluso,
agregar una expresión que haga un cálculo matemático y el resultado
también se agregará al string. Entonces, el resultado de esta
expresión es el string que puedes ver aquí más abajo.

Tipos Boolean en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los valores de tipo booleano son un concepto fundamental en la
programación. Este tipo de datos tiene dos valores: true, que
representa verdadero, y false, que representa falso. Nosotros
podemos utilizar estos tipos de datos para controlar el flujo de una
aplicación. Para explicarte esto mejor vamos a ver este
ejemplo. Imaginemos que tenemos que controlar el acceso a un
archivo, dentro de una aplicación que almacena archivos como lo
es Google Drive o Dropbox. En este caso, debemos saber dos
cosas. Primero, si el usuario tiene permiso para ver el archivo, y,
segundo es saber si el usuario está logueado en la aplicación para así
poder acceder al archivo. Son dos estados fundamentales que el
usuario debe tener y nosotros, simplemente, debemos saber si ambas
condiciones son verdaderas para poder permitir que el usuario vea el
archivo. En este caso, la variable "tiene permiso" tiene un valor de
true. Esto significa que el usuario sí tiene acceso al archivo por
permisos. Pero puedes notar que "está logueado" tiene un valor
false. Significa que el usuario debería tener que poner el usuario y
la contraseña para poder acceder a la aplicación. Con ambas
variables yo puedo determinar al final si el usuario realmente tiene
acceso en ese momento al archivo. Esto es a través de una operación
lógica utilizando ambos valores. En este caso, entonces, ya que el
usuario no está logueado en la aplicación, determinamos que el
usuario no tiene acceso al archivo en ese momento.

Tipos Symbol en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los valores de tipo symbol son valores en JavaScript que son únicos e
inmutables. Esto significa que, cuando yo creo una instancia de tipo
symbol, yo tengo la garantía de que este valor va a ser único a nivel
de memoria. Esto es útil cuando yo necesito tener a una referencia a
un valor que va a ser único a través de toda la aplicación, y que no va
a haber otro proceso igual que lo sobreescriba o lo cambie. Aquí
podemos ver varios ejemplos de cómo crear un symbol. En este caso
yo estoy creando un symbol de una manera sencilla, sin una
descripción. Al hacer un type of de mi símbolo, JavaScript me
mostrará que el tipo de dato de esta variable es Symbol. Igual yo
puedo agregarle una descripción a un Symbol a la hora de ser
creado. Es importante notar que esto es una descripción del
valor, pero no es el valor en sí del symbol. Esto es útil cuando
necesitamos investigar algún error dentro de la aplicación u obtener
más información del símbolo en sí. Los símbolos son únicos cuando
necesitamos tener llaves únicas para acceder propiedad dentro de un
objeto. Por ejemplo, de esta manera, yo tengo garantía de que nadie
va a sobreescribir esta llave única, o de que no va a haber una llave
igual dentro de este objeto. Igual el símbolo puede tener muchas
utilidades, dependiendo del problema que intente resolver dentro de
una aplicación.

Tipos Null y Undefined en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay dos tipos de datos que se utilizan para representar
tipos nulos o vacíos. El primer tipo de dato es el null o nulo. Este se
utiliza para hacer una asignación explícita de nulo a una
variable, como en este ejemplo. Yo he creado mi variable y le estoy
asignando un valor de nulo. Igual yo puedo hacer que una función
retorne un valor nulo. Esto significa que, a la hora de hacer un
console log del resultado de la función o de la variable, la consola me
a mostrar el valor nulo. Por otro lado tenemos el valor undefined o
indefinido. Esta representa variables que no tienen un valor
asignado. Por ejemplo, aquí yo estoy declarando una nueva
variable, pero no le estoy asignando un valor. A la hora de hacer un
console log de esta variable, la consola me va a mostrar que mi
variable dos tiene un valor de undefined. Lo mismo sucede en las
funciones. Esta función que ves aquí recibe un parámetro que luego
lo muestra en la consola el navegador. Pero luego yo llamo a esta
función y no le paso ningún valor, como puedes ver aquí. Entonces,
parámetro va a tomar un valor de undefined y esto es lo que se va a
mostrar en la consola.

Objetos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los objetos son los elementos principales de los tipos de datos no
primitivos. Con los objetos, nosotros podemos crear constantes o
variables que puedan contener varios valores dentro de sí, como este
ejemplo que ves en pantalla. Este es un objeto que tiene un nombre
de "persona". "Persona", dentro de sí, tiene varias
propiedades. Puedes notar que cada valor, por ejemplo "nombre",
está determinado por una llave, o un key, y un valor. Estas llaves o
keys se llaman propiedades del objeto. Entonces, podemos decir que
la propiedad "nombre" tiene un valor de Carlos, la propiedad
"apellido" tiene un valor de Monge, "edad" tiene un valor de 30 y "es
autorizado" tiene un valor de true. Por lo tanto, es un valor o una
propiedad booleana. Nosotros podemos acceder a las propiedades de
un objeto llamando el nombre del objeto o el nombre de la variable o
constante, luego agregamos un punto y luego hacemos referencia a
alguna de las llaves o el nombre de las propiedades dentro del
objeto. Como en este caso, aquí yo estoy haciendo un console log de
la propiedad "nombre" dentro del objeto "persona". Por lo tanto, en la
consola voy a recibir un resultado que me va a decir que es Carlos. Yo
puedo utilizar estas propiedades dentro de expresiones para generar
nuevos valores, como en este ejemplo. Si yo quiero generar un string
que contenga el nombre completo de esta persona, entonces
simplemente debo hacer referencia a las propiedades, utilizando el
nombre de la llave, para generar el string. También yo puedo cambiar
los valores de las propiedades, como ves aquí, simplemente
utilizando una asignación. Dentro de las propiedades de un objeto, yo
puedo tener otro objeto. Esto se llama objetos anidados y el número
de niveles o de objetos que puedas tener anidados realmente no
tiene un límite. Pero tener muchos objetos anidados no es
recomendable ya que hace la estructura de los datos muy
compleja. Pero esta es una manera genial para poder agrupar
información que es similar dentro de un mismo valor, como en este
caso. Yo he expandido el objeto de persona y le he agregado
una propiedad más que se llama "dirección". "Dirección", dentro de
sí, tiene varias propiedades como calle, avenida y
código postal. Entonces, para yo poder hacer referencia a estas
propiedades dentro del objeto dirección, simplemente debo llamar al
objeto persona, agregar un punto, hacer referencia a la propiedad
dirección y, luego, agrego otro punto para hacer referencia a la
propiedad que quiera acceder dentro de este objeto. Igual si tuviera
otro objeto dentro de este objeto, igual agregaría otro punto y haría
referencia a la siguiente propiedad.

Arreglos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los arreglos son un tipo de objeto que nos permite agregar
varios valores dentro de sí mismo. Estos valores se acomodan en un
tipo de lista dentro del objeto. Para poder definir un arreglo, primero
debemos declarar el nombre de la variable, la constante y luego,
utilizando llaves cuadradas, asignamos los valores. Puedes notar aquí
que en este arreglo yo tengo cinco números. Cada valor, dentro del
arreglo, se separa por una coma. Luego, para poder acceder a los
valores dentro del arreglo, debo utilizar algo que se llama un
índice. Cada valor dentro de un arreglo tiene un valor de índice,
que indica su posición dentro del arreglo. En programación, los
índices empiezan con el número cero. Esto significa que el valor uno,
que se encuentra en la primera posición del arreglo, tiene un índice
de cero. Dos tiene un índice de uno. Tres tiene un índice de
dos. Cuatro tiene un índice de tres y cinco tiene un índice de
cuatro. Entonces, a la hora de hacer un console log de números y
hacemos referencia al índice cero, vamos a obtener el valor de
uno. ¿Qué pasa si yo hago referencia a un índice que va más allá
del número de valores que yo tengo dentro del arreglo? Habíamos
dicho que este arreglo tiene cinco elementos y que el último índice es
cuatro. Entonces, a la hora de yo llamar al índice cinco, JavaScript me
va a retornar un valor de indefinido. Los arreglos pueden contener
cualquier tipo de datos. Por ejemplo, aquí yo tengo un arreglo que
contiene strings, los cuales son nombres de frutas. Igualmente, para
poder obtener alguna de las frutas, por ejemplo, la fruta en el índice
tres, simplemente llamo al arreglo y luego hago referencia al
índice utilizando llaves cuadradas. Yo puedo cambiar el valor del
arreglo en un índice específico, igual haciendo referencia al arreglo y
luego llamo al índice, utilizando llaves cuadradas, y luego hago una
asignación de un nuevo valor. Los arreglos también pueden contener
elementos mixtos, o sea, elementos de diferentes tipos de
datos, como en este ejemplo. Yo tengo un arreglo que contiene un
número, un string, un valor booleano, un valor nulo y también un
objeto.

Destructuración de objetos y arreglos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript es importante conocer el término
de desestructuración. Este es un método que podemos utilizar para
extraer los valores de un arreglo o un objeto de una manera más
rápida y con un código más limpio. Te voy a mostrar cómo
desestructurar un arreglo y un objeto. Aquí en este ejemplo tengo un
arreglo el cual contiene cinco números. Para desestructurar este
arreglo, primero yo debo definir una constante, utilizando el keyword
const y, luego, entre llaves, voy a definir los valores que quiero
extraer del arreglo. Aquí es importante tener en cuenta que estos
valores que ves aquí (primero, segundo, cuarto), va a ser el nombre
de las variables que van a tomar los valores a la hora de salir del
arreglo. Por lo tanto, ya que primero está posicionado en el primer
lugar dentro de esta definición, primero va a tomar el valor de
uno. Luego, segundo, va a tomar el valor de dos. Aquí pueden notar
que yo he dejado una coma y un espacio en blanco. Esto es para
indicar que tres está posicionado aquí, pero yo no tengo ningún
interés de sacar este valor. Entonces, por lo tanto, no defino un
nombre variable en este caso. Y, luego, cuarto va a tomar el valor de
cuatro. Y, luego, te preguntarás qué va a pasar con el valor de
cinco. Bueno, en este caso simplemente es ignorado. Puedes notar
que, a la hora de estructurar este arreglo, igual yo estoy utilizando
llaves cuadradas. Y luego de que cierro la llave cuadrada, hago un
tipo de asignación al arreglo de números. Con esta sintaxis entonces
el motor de JavaScript va a entender qué tipo de valores yo quiero
extraer del arreglo. Luego de que este comando sea ejecutado, yo
puedo hacer referencia a cada una de estas constantes que he creado
a través de la desestructuración. Igual tú puedes utilizar el keyword
let en caso de que tú necesites cambiar los valores dentro de estas
variables. La desestructuración de objetos es muy similar. Aquí yo
tengo un objeto usuario. Este objeto tiene tres propiedades:
nombre, edad y un valor booleano que indica que si es
administrador o no. Para poder desestructurar este objeto, entonces,
igualmente, debo definir las variables o constantes utilizando el
keyword const o let. Luego, debo abrir llaves y ponerles nombres de
las propiedades que quiero extraer. Aquí es importante tomar en
cuenta que el nombre de las variables constantes debe coincidir con
el nombre de las propiedades dentro del objeto. En caso de que, por
ejemplo, tú quieras utilizar un nombre diferente, debes poner dos
puntos y, luego, poner el nombre de la variable que quieras utilizar. Si
no, simplemente puedes utilizar el mismo nombre de la
propiedad como nombre de variable o de constante. Luego de abrir
llaves, yo pongo el nombre de las propiedades que quiero extraer. No
necesariamente tienes que extraerlas todas. En este caso, por
ejemplo, yo podría eliminar es admin y el código funcionaría
igualmente igual. Al igual que como hacemos con la
desestructuración de los arreglos, igual hacemos un tipo de
asignación para indicar que esta desestructuración proviene de este
objeto. Ya luego de que este comando sea ejecutado, yo puedo hacer
referencia a las constantes o variables que fueron creadas a través de
esta desestructuración.

Objeto Math en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript la clase Math contiene varios métodos que nos permiten
hacer operaciones matemáticas. Es importante mencionar que
nosotros no creamos objetos de tipo Math, sino que, para nosotros
poder acceder a los métodos de esta clase, simplemente hacemos
referencia a la misma clase directamente y así podemos llamar a
cada de los métodos. Te voy a mostrar tres ejemplos de cómo utilizar
esta clase. En el primer ejemplo te muestro cómo obtener la raíz
cuadrada de un número. Aquí yo he definido una variable que se
llama número y tiene un valor de 16. Luego, para obtener la raíz
cuadrada, simplemente yo hago referencia a la clase Math, agrego un
punto y llamo al método que me genera la raíz cuadrada, y luego
pasa como parámetro la variable número. Y aquí podemos ver el
console log de esta raíz cuadrada. Igualmente, yo puedo generar
números aleatorios con esta clase. Math contiene un método que se
llama Random, el cual genera un número que va entre cero y uno. Y
luego también podemos utilizar Math para redondear números. Por
ejemplo, en este caso, yo tengo un número decimal que tiene un
valor de 3.7. Luego, si yo quiero redondear este
número, simplemente llamo el método round dentro de la clase Math,
y puedes notar que en la salida me da un valor de cuatro. Al ejecutar
todo este código, aquí puedes ver los resultados de las tres
operaciones matemáticas que vimos anteriormente.

Utilidades para la manipulación de objetos en

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
La clase Object en JavaScript ofrece varios métodos que nos permiten
extraer información para poder manipular mejor los datos dentro de
un objeto. Para explicarte estas diferentes funciones vamos a
ver varios ejemplos. Yo aquí, en el código, tengo un objeto persona, el
cual tiene tres propiedades: nombre, que tiene un valor de Juan,
edad, que tiene un valor de 30, y ciudad, que tiene un valor de
Heredia. Primero te voy a mostrar el método Object.keys. Este
método lo que hace es que substrae el nombre de las propiedades del
objeto. En este caso, yo llamo a la función y luego le paso al objeto
que, en este caso, sería "persona", y, luego, el resultado lo guardo en
una variable que se llama "llaves". Puedes notar que el resultado de
esta función me devuelve las propiedades en forma de un arreglo. La
siguiente función que te quiero mostrar es Object.values. Esta función
hace un trabajo muy similar a Objects.keys, con la diferencia de que,
en lugar de substraer los nombres de las propiedades, esta función
substrae los valores. Igualmente, estos valores se retornan en forma
de un arreglo, como puedes ver en este caso. La función
Object.entries hace algo muy similar también. La diferencia es que,
en este caso, los nombres de las propiedades y los valores son
retornados. El arreglo que retorna contiene pequeños arreglos donde
cada uno contiene pares de nombre, propiedad y valor. Y el último
método que te quiero enseñar es Object.Asign. Este método se utiliza
para fusionar objetos. En este ejemplo yo tengo dos objetos, destino y
origen. Puedes notar que ambos objetos tienen propiedades muy
similares. Destino tiene una propiedad llamada A y otra llamada B
y origen tiene una propiedad llamada B y otra C. Ambos tienen una
propiedad llamada B, pero con valores diferentes. Ahora, cuando yo
llamo la función Object.assign, primero debo pasar un contenedor, el
cual se va a utilizar para rellenar los valores, y luego paso ambos
objetos. El resultado de llamar esta función va a ser el que ves
aquí. En el resultado final, el objeto va a tener una propiedad A, que
es uno, una propiedad B, que es tres, y otra propiedad C, que va a ser
cuatro. En este caso, el valor que se tomó para B es el de origen, ya
que este es el objeto que se pasó como segundo parámetro en el
llamado de la función.

Objetos tipo Date en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Otro objeto muy importante de conocer en JavaScript son los objetos
de tipo fecha o date. Estos objetos nos permiten obtener valores de
tipo fecha y hora y poder manipular estos valores. Te voy a mostrar
algunos ejemplos de cómo utilizar este objeto. En el primer ejemplo,
yo quiero obtener la fecha y hora actual en el momento en que se
ejecute el código. Entonces, para esto creo una constante a la cual le
asigno una nueva instancia del objeto Date. A la hora de ejecutar este
código, si yo lo corro aquí, puedes notar que el objeto contiene
primero la fecha actual, una referencia a la zona horaria donde me
ubico, y, luego, un valor de hora que es la hora actual en el momento
en que estoy ejecutando este código. Este tipo de objetos contiene
muchos métodos que nos ayudan a manipular un objeto de tipo
fecha, como en este ejemplo aquí. Yo estoy haciendo el mismo
cálculo que hice anteriormente, estoy obteniendo la fecha y hora
actual en el momento que se ejecute el código. Pero yo quiero
mostrar la fecha y la hora en un formato diferente, entonces yo puedo
utilizar diferentes métodos como Get Full year, Get month, date,
horas, minutos y segundos para obtener los diferentes valores
contenidos dentro del objeto. Y ya con esto, entonces, yo puedo
utilizar una plantilla de string, como la que ves en pantalla, para
poder darle un formato más amigable a la fecha y hora que me
devuelve el objeto. Nosotros también podemos crear objetos de tipo
fecha con valores específicos. De esta manera, el objeto fecha no se
creará necesariamente con los valores en el momento que se
ejecute el código, sino que yo también puedo definir una fecha hora
exacta que yo quiero que el objeto obtenga. En este caso, como
puedes ver, yo estoy pasando una fecha y una hora exacta a la
creación de este objeto y, a la hora de hacer un console log, puedes
notar que los valores fueron obtenidos por el objeto tipo fecha.

Operadores de asignación de valores

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En esta lección te voy a mostrar los diferentes operadores
de asignación en JavaScript. El que usamos más comúnmente es el de
asignación simple, como en este ejemplo, donde yo estoy declarando
una variable X y le asigno un valor de cinco utilizando el
operador. Luego, yo tengo disponible otros operadores para poder
asignar y manipular los valores de una variable al mismo tiempo. El
primero que vamos a ver es el de asignación de suma. Aquí, yo
declaro una variable Y que tiene un valor de diez. Luego, yo quiero
incrementar este valor por tres. Entonces, lo que hago es que llamo el
nombre de la variable, pongo el operador de suma, seguido el
operador de asignación y, luego, el número que quiero agregar a la
variable, y, ya con esto, entonces, la variable Y pasa de ser 10, a
13. Igual tenemos un operador de asignación de resta que
funciona similar al operador de asignación de suma, con la diferencia
de que, con este operador, podemos restar valores a una variable,
como en este caso. Esta variable Z tiene un valor de 15. Entonces, yo
puedo llamar la variable, el operador de resta, el operador de
asignación y el número que quiero quitarle a la variable. Y, ya con
esto, Z obtiene un valor de ocho. Igualmente, yo puedo multiplicar
una variable. En este caso, la variable W tiene un valor de
20. Entonces, yo puedo agregar el operador de
multiplicación, seguido el operador de asignación y el valor por el cual
quiero multiplicar el valor. Entonces, W obtiene un valor de 40. Igual
tenemos un operador de división, como en este ejemplo, donde yo
tengo una variable A que tiene un número 50. Entonces, llamo la
variable seguido del operador de división más el operador de
asignación , el número por el cual yo quiero dividir el valor. Con esto,
entonces A obtiene un valor de diez. Asignación de módulo es similar
al de división, con la diferencia que en módulo nos da el residuo del
resultado de una división. En este caso. entonces, por ejemplo, yo
tengo una variable B que tiene un valor de 17. Entonces, al dividir B
entre cinco, con esta asignación, en este caso puedes notar que el
símbolo de operación es diferente al de división. En este caso, B va a
ser dividido por cinco y se va a asignar el resultado a B, y el residuo
de esta división va a ser dos. También nosotros podemos hacer una
asignación exponencial, como en este ejemplo. Tengo una variable C
que tiene un valor de dos. Entonces, yo sé, la quiero elevar a la raíz
de tres y asignar el resultado a C. Entonces, para esto, entonces
llamo el operador de elevación a la raíz (como puedes ver aquí, es
similar al de multiplicación, con la excepción de que agregamos dos
asteriscos) seguido del operador de asignación y, luego, el valor para
el cual que quiero elevar el número. Y, ahora, con este resultado, C
obtiene un valor de ocho.

Operadores aritméticos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Ahora vamos a ver los operadores aritméticos dentro de
JavaScript. JavaScript, como todo lenguaje de programación, tiene los
operadores básicos para hacer operaciones matemáticas, como es el
operador de suma, resta, multiplicación, que en este caso utilizamos
un asterisco, y división, en donde utilizamos un slash. Luego tenemos
otros operadores como el de módulo, que en este caso utilizamos un
símbolo como de porcentaje. Módulo nos devuelve el residuo de una
división, como en este caso, al dividir 17 entre cinco, el residuo de
esta división va a ser dos. También tenemos el operador de
exponencial para elevar un número. En este caso, yo estoy elevando
2 a 3. Entonces, aquí utilizo doble asterisco para indicar esto. El
resultado de potencia, entonces, en este caso, va a ser
ocho. También tenemos otros operadores especiales que nos ayudan
a incrementar o decrementar un número sin tener que utilizar el
operador de asignación. Como en este caso, yo tengo una
variable que se llama X, a la cual le ha asignado un número de
cinco. Luego, yo llamo la variable y agrego el operador de suma dos
veces. Con esto, entonces, X obtiene un valor de seis. Y yo puedo
hacer lo mismo con el operador de resta. Aquí yo tengo una variable Y
que tiene un valor de ocho. Entonces, llamo la variable con el
operador de resta dos veces y, con esto, el valor de Y disminuye en
uno.

Operadores de comparación

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Te voy a mostrar los operadores de comparación en JavaScript. Para
ver estos operadores vamos a utilizar estas variables como
ejemplo. La primera variable X tiene un valor de cinco, que es de
tipo número, y la variable Y tiene un valor de cinco que es de tipo
string. Ambos tienen el mismo valor pero diferente tipo de dato. El
primer operador que vamos a ver es el operador de igualdad. Este
operador valida si dos valores son iguales. Puedes notar que el
operador se define por dos signos de asignación. Al llamar esta
expresión, podrán notar que JavaScript retorna un valor de true. A
pesar de que son de tipos de datos diferentes, JavaScript nos va a
devolver este resultado porque en esta comparación sucede un
proceso que se llama coerción de tipos. Coerción de tipos es
básicamente JavaScript intentando conciliar la diferencia de tipos de
datos de ambas variables. Esto es debido a la naturaleza de
JavaScript de ser un lenguaje dinámicamente tipado. Entonces, lo que
sucede es que el número cinco se transforma en un string, antes de
ser comparado con la otra variable. Por esa razón es que obtenemos
el resultado de true. Para intentar evitar la coerción a la hora de
comparar dos valores, debemos utilizar el operador de igualdad
estricta. Puedes notar que el operador es casi igual con la diferencia
de que debemos agregar un símbolo más de asignación. En este caso,
la coerción no sucede. Entonces, obtenemos un valor de
false. También tenemos un operador de no igualdad. Al contrario que
el de igualdad, en este caso, comparamos si dos valores no son
iguales. Este parador se define por el signo de exclamación antes del
signo de asignación. Entonces aquí se validan si dos valores no son
iguales. En este caso, con este operador la coerción
sucede. Entonces, el resultado que obtenemos es false, porque,
recordemos que, cuando la coerción sucede, X y Y son
iguales. Igualmente, para evitar la coerción debemos utilizar la
forma estricta del operador que es igual de definición con la
diferencia que debemos agregar un signo más de asignación. En este
caso, entonces, vamos a obtener un resultado de true, ya que la
coerción no sucede. Por lo tanto, los valores se declaran como no
iguales. Ahora, los siguientes operadores que vamos a ver son para
averiguar si un valor es menor o mayor que otro. Para eso, tenemos
estas variables de ejemplo. A tiene un valor de diez y B y C, ambas,
tienen un valor de cinco. El operador "menor que" nos ayuda a
averiguar si un valor es menor a otro. En este caso, donde yo llamo la
expresión A menor a B, obtenemos un valor de false, ya que A tiene
un valor de diez y B, un valor de cinco. El operador "menor o igual a
que" es similar, con la diferencia de que también validamos si los
valores son iguales. En este caso, yo tengo una expresión donde yo
trato de averiguar si C es menor o igual a B. Ya que ambos valores
son iguales voy a obtener una salida de true. Luego, el operador
"mayor que" me ayuda a averiguar si un valor es mayor que otro. En
este caso, ya que A es mayor a B, entonces la salida de esta
expresión va a ser true. Igualmente, como vimos anteriormente, el
operador "mayor o igual a que" me ayuda a averiguar si un valor es
mayor o igual a otro. En este caso, si A es mayor o igual a B, voy a
obtener un resultado de true ya que A es mayor a B.

Operadores de cadenas de caracteres

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Debido a que JavaScript es un lenguaje dinámicamente
tipado, nosotros podemos utilizar operadores aritméticos con
strings, como en este primer ejemplo. Si yo quiero concatenar dos
strings, puedo utilizar el operador de suma para juntar ambos
strings y crear uno nuevo. También yo puedo utilizar el operador de
asignación suma para hacer también la concatenación, como puedes
ver en este caso. En ambos casos yo creo un nuevo string, utilizando
ambos operadores aritméticos.

Operadores lógicos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Ahora te voy a mostrar los operadores lógicos en JavaScript. Estos
operadores son muy importantes de entender, ya que lo necesitamos
a la hora de hacer expresiones lógicas. Para explicarte estos
operadores vamos a utilizar este ejemplo. Yo aquí tengo dos
constantes booleanas. La primera X tiene un valor de true y y tiene
un valor de false. El primer aparador que te voy a mostrar se llama
AND, o "Y" en español. Este operador está compuesto por dos
caracteres de &, como puedes ver aquí. & lo que hace es que evalúa
una expresión y devuelve un resultado booleano. En esta expresión
todos los valores se validan. Y retorna true si todos los valores son
verdaderos o true. Como en este ejemplo, X es true y Y es false. Y
luego tengo otro valor de true. Debido a que Y es false, Y convierte
toda la expresión en false. Es por esta razón que el resultado
entonces obtiene un valor de false. Si Y fuera true, entonces toda la
expresión tendría un valor de true. Pero, como pueden notar, con solo
que haya un false dentro de la expresión, toda la expresión se vuelve
false. El siguiente operador que te va a mostrar es el de OR. Este
funciona al contrario que AND. Pueden notar que el operador está
compuesto de dos caracteres de barra. En estas expresiones,
cualquier valor true va a hacer que toda la expresión tenga un valor
de true, como en este caso. Y es false, luego tenemos otro valor de
false, pero X es true. Debido a esto, entonces, toda la expresión nos
retorna un valor de true. El siguiente que te voy a mostrar es el
operador NOT. Este operador se compone por un carácter de
exclamación que se agrega antes del valor que queremos validar. En
este caso, pueden notar que el resultado tres es un resultado de NOT
X. X tiene un valor de true, pero el resultado que obtenemos es
false. Esto porque NOT valida y convierte el valor al contrario, o sea
que, los valores true los vuelve false y los false, los vuelve true, como
en este caso. Y es false, pero, al aplicarle el operador NOT, el
resultado que obtenemos es true. Nosotros podemos utilizar estos
operadores para componer expresiones mucho más largas y
complejas. Por ejemplo, aquí yo tengo tres números, cada uno en una
variable. Cinco, seis y siete en las variables A, B y C. Entonce,s con
esto yo voy a utilizar operadores aritméticos y lógicos para componer
expresiones. Aquí yo estoy averiguando si A es mayor a C y si B es
menor a C. Entonces primero se obtiene el resultado de la primera
expresión, el cual es false, ya que A no es mayor, A el
menor. Entonces tenemos un false. Luego, obtenemos el resultado de
la segunda expresión en donde tratamos de averiguar si B el menor a
C, lo cual si es cierto, es true. Y, luego, utilizo el operador AND para
comparar los resultados de ambas expresiones, que al final me va a
devolver un resultado de false porque la primera expresión es
false. Aquí tenemos una expresión muy similar a la anterior, pero en
lugar de utilizar el operador AND, utilizamos el operador
OR. Igualmente, primero obtenemos el resultado de las expresiones A
mayor a C, y B menor a C. Y el resultado va a ser true, porque, como
dijimos anteriormente, cuando utilizamos el operador OR, cualquier
valor true va a hacer toda la expresión true. Aquí tenemos una
expresión un poco más compleja. Yo tengo una expresión en donde
averiguo o comparo si A es igual o menor a B y luego un operador Y
donde tengo una expresión anidada. Entonces, vamos a ir paso por
paso. En la primera expresión, A es menor o igual a B, me retorna
true. Luego, voy a analizar los valores dentro de la expresión
anidada. A mayor a C es false y B menor a C es true. Pero pueden
notar que yo estoy utilizando un operador OR para comparar estas
dos expresiones. Entonces, el resultado de estos paréntesis aquí va a
ser true, y, luego, este resultado lo comparo con la expresión de A
menor igual a B, que habíamos dicho que el resultado era true, y, al
final, toda esta expresión va a tener un resultado de true. Aquí
puedes notar que yo tengo la misma expresión con la diferencia que
yo estoy utilizando un operador NOT al inicio de esta
expresión. Entonces, al utilizar este operador NOT, a pesar de que el
resultado es true como habíamos visto anteriormente, el NOT va a
hacer que el resultado sea false. Entonces, esto hace que, a pesar de
que el resultado de esta expresión es igual que la que vimos
anteriormente, esta operación va a hacer que el resultado total de
esta expresión sea false.

Operadores de tipos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los operadores de tipo nos permiten averiguar si un valor es de un
tipo específico o si la distancia de un objeto pertenece a una clase. El
operador typeof podemos utilizarlo para averiguar si un valor es de
un tipo específico. A la hora de llamar este operador vamos a obtener
un resultado que es de tipo String con el nombre del tipo. Por
ejemplo, si yo llamo a typeof sobre el número 42, voy a obtener un
resultado de number, indicando que esto es un número. También
podemos llamarlo sobre un string y obtendríamos este resultado que
puedes ver aquí. Igual si yo llamo typeof sobre true, voy a obtener un
string indicando que el tipo es boolean. El operador typeof nos
permite averiguar si un objeto pertenece a una clase. En este
ejemplo, yo he creado una instancia de la clase Date y luego,
utilizando el operador instanceof, yo puedo escribir una expresión que
diga "ahora instanceof date", y esto me va a devolver un resultado de
true, ya que ahora es una instancia de la clase Date.

Operador spread en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Uno de los separadores que se agregó en la definición de ECMAScript
seis es el spread operator. Este operador se define con tres
puntos, como puedes ver aquí. Spread en inglés significa
desparramar o dispersar. Entonces, este operador nos permite sacar
los elementos de un arreglo o un objeto y dispersarlos en otro
elemento. Te voy a mostrar varios ejemplos de cómo utilizarlo. En
este ejemplo, yo estoy copiando un arreglo. Tengo un arreglo original
que tiene tres números y luego quiero crear una copia. Para esto,
defino un nuevo arreglo y, puedes notar aquí, que estoy llamando el
arreglo original y, antes de este, debo agregar el spread operator
para poder crear la copia. Lo mismo hago aquí con este objeto. A
diferencia que, como estoy creando un objeto, debo utilizar
llaves, pero puedes notar que la sintaxis aquí es la misma. En este
ejemplo, yo estoy utilizando el spread operator para unir dos
arreglos. Tengo dos arreglos, cada uno con números y quiero crear
una unión. Entonces, para esto declaro un arreglo y luego llamo el
spread operator antes de cada uno de los arreglos que quiero
dispersar. Nosotros podemos utilizar el spread operator en
muchos escenarios. Como en este caso, yo lo estoy utilizando para
pasar los parámetros a una función. Esta función suma recibe tres
parámetros, como puede ver aquí, y, al mismo tiempo, tengo un
arreglo que tiene tres números. Entonces, yo puedo llamar la función
y, utilizando el spread operator, puedo pasar cada uno de los
elementos dentro del arreglo a la función. El spread operator también
funciona con strings. En este ejemplo, yo quiero crear un arreglo que
contenga todos los caracteres de un string. Entonces, aquí, yo declaro
el arreglo y utilizo el spread operator sobre el string para poder sacar
los caracteres y que el arreglo los reciba y los agregue dentro de
sí. Ahora te voy a mostrar el resultado de correr este código. Para
eso, voy a la terminal y ejecuto el archivo JavaScript. Aquí puedes
notar cada una de las copias. Luego, aquí podemos ver el resultado
de la unión de los dos arreglos. Aquí tenemos el resultado de llamar a
la función, y aquí tenemos el resultado de crear un arreglo con todos
los caracteres de este string.

5.- Control de flujo lógico

Cláusulas condicionales if, else, else if

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación, las cláusulas nos permiten controlar el flujo de una
aplicación. En esta lección vamos a ver las cláusulas if. En este primer
ejemplo, yo tengo una variable que se llama temperatura, la cual
tiene un valor de 25. Luego, yo voy a condicionar la ejecución del
código para decir que, si la temperatura es mayor a 30 se ejecute
este console log. Puedes notar aquí la sintaxis de la cláusula
if. Primero, se llama el keyword if y se abren paréntesis. Dentro de los
paréntesis, debemos poner la expresión lógica, la cual va a devolver
un valor booleano de true o false. En caso de que sea true, entonces,
el código dentro de este bloque que define el if, se ejecutará. Y, en
caso de que sea false, el código simplemente pasará a la siguiente
línea de ejecución, ignorando todo el código dentro de este bloque de
código. En este caso, ya que temperatura es menor a 30, este console
log no se va a mostrar. Hay diferentes formas de utilizar las cláusulas
if. La siguiente forma que te voy a mostrar es la de if else. Aquí yo
tengo una variable que se llama hora actual que tiene un valor de
18. Entonces, yo voy a decir "si hora actual es menor a 12", entonces,
que se muestre este console log. Y, luego, utilizando el keyboard
Else, yo puedo poner una ejecución de código alternativa en donde, si
esta condición no se cumple, entonces puedo mostrar este console
log. De esta manera, podemos leer el código como sigue: "si hora
actual es menor a 12, que se muestre el console log Buenos días, y, si
no, que se muestra el console log Buenas tardes". Nosotros podemos
agregar tantos if else como sea necesario. En este ejemplo, la
variable nota tiene un valor de 75. Entonces, yo voy a decir "si nota
es mayor o igual a 90, que se muestra un console log de A. Si no, si la
variable es mayor o igual a 80, se muestra un console log de B. Si no,
si la nota es mayor o igual a 70, se muestra un console log de C, o,
si no, al final, donde no se cumplan ninguna de las condiciones de
más arriba, puedo mostrar un console log de D". Yo puedo tener IFS
anidados tantos como sea necesario. Cabe recalcar que tener muchos
if anidados no es recomendable ya que hace el código muy
confuso, pero es importante que lo tengas en cuenta ya que en algún
momento lo vas a necesitar. En este ejemplo la variable "está
lloviendo", tiene un valor de true, y "hace frío", tiene un valor de
false. Entonce,s en este código, yo voy a decir que "si está
lloviendo es verdadero", recordando que, en este caso, yo no tengo
que validar si está lloviendo es true, ya que el valor en sí es un valor
booleano, entonces, en caso de que sea true, se ejecutará el bloque
de código. Entonces, está lloviendo es true. Paso al siguiente if. Si
hace frío, entonces hago un console log de traer un paraguas y un
abrigo, y, si no, hago un blog de traer paraguas. En caso de que no se
cumpla esta condición, paso al else de este if, y luego, paso al
siguiente if anidado en donde nuevamente se valida "hace frío". Si
hace frío, entonces se muestra "traer abrigo", y, si no se muestra,
"Disfruta tu día".

Cláusula condicional switch

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las declaraciones «switch» nos permiten ejecutar código basado en el
valor que tenga una variable o una constante. Para explicarte esto
mejor vamos a ver este ejemplo. Yo aquí tengo una variable que se
llama «diaSemana» que tiene un valor de tres, y luego otra variable
«nombreDia» que no tiene un valor definido. Para definir un «switch»,
yo debo utilizar la palabra clave «switch». Luego utilizo paréntesis
para pasar la variable o constante que quiero validar y luego debo
definir un bloque de código. Dentro de este bloque de código yo debo
definir las condiciones y el código que se ejecutará en caso de que
alguna de las condiciones se cumpla. Para definir las condiciones yo
debo utilizar la palabra «case» y luego pasar el valor por el cual la
variable se va a comparar. En este caso, yo voy a compararlo con un
valor numeral. Y luego hay que agregar dos puntos. Después del
«case», debo agregar el código que se ejecutará en caso de que esta
condición se cumpla. Y luego debo agregar un «break» para
determinar que este es el final de este «case». Entonces aquí, en
caso de que «diaSemana» tenga un valor de uno, «nombreDia» va a
obtener un valor de «Domingo». Sino, en caso de que «diaSemana»
tenga un valor de dos, «nombreDia» va a tener un valor de
«Lunes». Y así sucesivamente por cada uno de los «case» que yo
defina dentro del «switch». Al final, «nombreDia» va a tener un valor
basado en el valor que tenga «diaSemana». Ahora te voy a mostrar
un ejemplo un poco diferente. En este caso yo tengo una variable
«fruta» que contiene el nombre de una fruta. E igual yo voy a utilizar
un «switch» para definir el color de la fruta según su
tipo. Aquí, entonces, yo voy a definir un «case» y voy a pasar el valor
de «manzana». Y agrego dos puntos, pero pueden notar que
inmediatamente después de este «case» estoy definiendo otro
«case». Y en este «case» yo estoy utilizando un valor de «cereza». Y
luego agrego el código, que es «color» va a ser igual a «rojo». Lo que
sucede aquí es que «fruta» va a ser validado por «manzana» y
«cereza». En caso de que alguna de estas condiciones se
cumpla, entonces el color va a obtener un valor de rojo. En caso de
que no sea así, para eso definimos un «break». El «break» es para
evitar que la condición pase al siguiente «case». El siguiente «case»
indica que si el valor es de «banana», el color debe ser «amarillo». E
igual, el siguiente «case» indica que si el valor es «uva», el color debe
ser «morado». Al final tengo un «case» diferente. Este es un
«default». Este se ejecutará en caso de que ninguna de las
condiciones anteriormente se cumpla. Entonces, yo puedo tener un
color predeterminado o en este caso estoy diciendo que el color es
«desconocido». Ya con esto, entonces yo puedo hacer el
«console.log» al final y decir que el color de la fruta según el valor de
color que haya obtenido dentro del «switch».

Bucles usando declaraciones for

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación la iteración es el proceso por el cual ejecutamos
un mismo bloque de código un limitado número de veces o hasta
que una condición se cumpla. Para crear una iteración en JavaScript
podemos utilizar la cláusula «for». Puedes notar aquí que la cláusula
«for» tiene una lista de parámetros. El primer parámetro es el valor
de inicio. Aquí, por lo general, nosotros definimos una variable. Esta
variable va a controlar la iteración. Yo estoy indicando que el nombre
de la variable va a ser «i» y la voy a inicializar con un valor de
cero. Luego, para pasar el siguiente parámetro en la iteración
debo agregar un punto y coma. Aquí yo debo agregar la condición o la
expresión que condicione el final de esta iteración. Yo estoy diciendo
aquí que mientras «i» sea menor a cinco, la iteración debe
ejecutarse. Y luego el tercer parámetro indica cómo la iteración debe
moverse hacia adelante. En este caso, yo estoy diciendo que «i» debe
aumentar uno a uno, o sea, ya que «i» está empezando en cero, la
iteración se ejecutará hasta que «i» sea cuatro, ya que en el
momento que «i» sea cinco, esta iteración se detendrá. Luego de que
yo he definido los parámetros del «for», debo definir el bloque de
código que se ejecutará en la iteración. En este caso, yo simplemente
estoy haciendo un console.log del valor utilizando un «template
string». Los «for» son muy útiles para recorrer arreglos. Aquí te voy a
mostrar un ejemplo simple de esto. Tengo un arreglo de números, el
cual contiene una lista de cinco números. Luego yo voy a utilizar el
«for» para recorrer cada uno de los valores. Entonces llamo la palabra
clave «for», defino la variable de control «i» donde indico que el
valor inicial va a ser cero, agrego punto y coma y pongo la
condición. Indico que la iteración se va a ejecutar mientras «i» sea
menor al número de elementos dentro del arreglo. Y agrego el
operador de asignación + + para aumentar el «i» uno a uno. Ya con
esto, entonces, yo puedo hacer console.log de cada uno
los elementos dentro del arreglo, ya que «i» me va a ayudar a
acceder a los elementos dentro del arreglo utilizando el índice. Como
puedes ver aquí, yo llamo al arreglo y paso como índice el valor de
«i». Nosotros podemos también crear iteraciones anidadas utilizando
«for». Aquí pueden notar que estoy creando un foro externo y
dentro de este estoy creando uno interno. Esto significa que este
«for» se va a ejecutar tres veces y por cada una de esas veces este
«for» se va a ejecutar dos veces. Ahora podemos ver la ejecución del
código. Para esto voy a utilizar la terminal. Voy a llamar «node» y voy
a pasar el nombre del archivo. Aquí podemos ver los resultados de
cada una de las iteraciones. En la primera, vemos que la iteración
empezó en cero, como le indicamos, y terminó en cuatro. En el
segundo ejemplo, obtenemos todos los valores dentro del
arreglo, como puedes ver aquí. En la tercera, puedes notar como el
«for» interno se ejecuta cada vez que el «for» externo inicializa.

Bucles usando declaraciones for...in

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los bucles «for in» nos permiten recorrer las propiedades de un
arreglo o un objeto. En este primer ejemplo te voy a mostrar cómo
recorrer un objeto utilizando este bucle. Aquí tengo un objeto persona
que tiene tres propiedades: nombre, apellido y edad. Yo para utilizar
el «for in», primero debo llamar la palabra clave «for» y luego abrir
paréntesis. Dentro de estos paréntesis debo definir una variable la
cual va a contener el nombre de la propiedad que estoy observando
en ese momento dentro de la iteración. Luego llamo la palabra clave
«in» y luego paso el nombre del objeto que quiero recorrer. Entonces,
podemos leer que mientras la llave dentro de persona se ejecute este
código definido dentro del bloque de código dentro de las llaves. Ya
con esto, entonces yo puedo hacer un console.log utilizando
un template string de los valores dentro del objeto. Algo similar yo
puedo hacer con arreglos. Aquí tengo un arreglo que tiene una lista
de colores. Entonces, igualmente, llamo un «for in» y puedes notar
que la diferencia aquí es que yo no estoy obteniendo la llave o el
nombre de la propiedad, sino que, al contrario, yo estoy obteniendo el
índice del elemento que estoy validando. Igualmente utilizo la palabra
clave «in» y paso el nombre del arreglo que quiero
recorrer. Igualmente, entonces, puedo hacer un console.log del
valor y utilizo la variable indice para acceder el valor dentro de
colores. Ahora podemos ver la ejecución de este código. Voy a abrir
terminal y voy a llamar «node» y paso el nombre del archivo. Aquí
puedes ver cómo se ejecutó el código y yo puedo obtener todos los
valores dentro del objeto persona y todos los valores dentro del
arreglo.

Bucles usando declaraciones for...of

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los bucles «for of» nos permiten recorrer los valores de un arreglo. En
este primer ejemplo yo tengo un arreglo que se llama «colores», el
cual tiene tres elementos. Para poder crear un bucle «for of», yo debo
utilizar la palabra clave «for», abrir paréntesis y definir una variable
que va a contener el valor que estoy validando en ese momento
dentro de la iteración. Luego, llamo la palabra clave «of» paso el
nombre del arreglo que quiero recorrer. Puedes notar aquí entonces
que yo llamo console.log y simplemente imprimo el color dentro del
arreglo. Podemos utilizar los «for of» también para recorrer los
caracteres dentro de un string, como en este caso. Yo defino una
variable que va a contener el caracter que estoy validando dentro de
la iteración y luego paso el nombre del string. Y con esto puedo
imprimir cada carácter uno a uno. Ahora vamos a ver la ejecución de
este código. Para eso, llamo «node» y paso el nombre del archivo. Y
aquí puedes ver el resultado. Primero tenemos rojo, verde y azul del
primer ejemplo, y luego tenemos cada una de las letras dentro de
este string.

Bucles usando declaraciones while

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los bucles «while» nos permiten ejecutar un bloque de
código mientras se cumpla una condición. Te voy a mostrar un
ejemplo. Yo tengo una variable que se llama «cuenta» y tiene un
valor de uno. Luego declaro un bucle «while» en donde llamo la
palabra clave «while» y abro paréntesis. Aquí dentro debo poner la
expresión lógica que se debe cumplir para que el bucle se ejecute. En
este caso, estoy diciendo que mientras «cuenta» sea menor o igual a
cinco, se ejecute este código. Dentro del código, simplemente estoy
haciendo un console.log de «cuenta» y luego incremento «cuenta» a
uno. Esto significa que este bucle va a iniciar con un valor de uno y
en el momento que «cuenta» tenga un valor de cinco, esto se
detendrá. Aquí tenemos un ejemplo similar. En este caso, «numero»
tiene un valor de diez. Y luego estoy diciendo que mientras «numero»
sea mayor a cero, se ejecute el código. En este caso, cada vez que el
bloque de código se ejecute, le voy a quitar un valor de dos a
«numero», como puedes ver aquí. O sea que en el momento que
«numero» sea un número negativo, este bucle se va a detener. En
este tercer ejemplo te voy a mostrar cómo ejecutar un «while» no
hasta un cierto punto determinado, sino hasta que una condición deje
de cumplirse. Aquí tengo una variable «numeroAleatorio» que puedes
notar que no tiene un valor definido. Luego, utilizando un bucle
«while», voy a ejecutar un bloque de código mientras
«numeroAleatorio» no tenga un valor de cinco. Aquí dentro, entonces,
yo en «numeroAleatorio» le agrego un valor que es el resultado de
llamar el método «random» para generar un número entre cero y
diez. Luego este número se muestra en la consola. Esto significa que
este código se va a ejecutar una y otra y otra vez hasta que en algún
momento «numeroAleatorio» tenga un valor de cinco. Y cuando eso
suceda, el bucle se detendrá. Vamos a ejecutar este código, llamo
«node» y le paso el archivo que quiero ejecutar. En el primer ejemplo
puedes notar que «cuenta» se detiene hasta que «cuenta» tenga un
valor de cinco, como habíamos dicho anteriormente. En el segundo
ejemplo, puedes notar que la variable número va decreciendo hasta
que llega a un cierto valor, hasta que el valor sea dos. Esto significa
que esta variable obtuvo un valor de cero. Y cuando la condición se
volvió a evaluar, el bucle se detuvo. En el siguiente ejemplo, que
hablamos del número aleatorio, pueden notar que varios números se
generaron aleatoriamente. Primero obtuvimos un valor de diez y
luego un valor de ocho. Y por pura suerte, el tercer número fue un
valor de cinco. Entonces, ya en este momento la condición dejó de
cumplirse y el bucle se detuvo.

Bucles usando declaraciones do...while

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Ahora te voy a explicar en qué consisten las declaraciones «do
while». Las declaraciones «do while» funcionan muy similar a
las declaraciones «while» con la diferencia de que la condicional se
valida luego de que la acción ha sido ejecutada. Como en este
ejemplo que tenemos aquí. Yo tengo aquí una variable que se llama
«numeroAleatorio», la cual no tiene un valor asignado. Luego yo
utilizo un «do while» para generar el «numeroAleatorio» y esto va a
seguir sucediendo hasta que «numeroAleatorio» tenga un valor de
cinco. Aquí puedes ver cómo se declara el «do while». Nosotros
utilizamos la palabra clave «do» y luego declaramos un bloque de
código, como ves aquí, y luego utilizando la palabra clave
«while» agrego la condicional que va a validar la ejecución de este
código. Entonces aquí, primero generamos el «numeroAleatorio» y
hacemos el console.log y luego se hace la validación. Esto significa
que, a diferencia de «while», el código se va a ejecutar al menos una
vez. Para ver esto te voy a mostrar un ejemplo. Yo aquí tengo una
variable «cuenta» que inicializa en cero. Luego ejecuto un
«while». Este «while» va a correr mientras «cuenta» sea menor a
15. Hago un console.log de la cuenta y luego le incremento. Entonces,
este bloque de código se va a ejecutar hasta que cuenta llegue al
número 14. Ya luego de que este «while» ha terminado, «cuenta» va
a tener un valor de 14, y luego va a venir este «do while». En este
caso, entonces, a pesar de que «cuenta» tiene un valor de 14, este
código se va a ejecutar al menos una vez, ya que la condición se va a
validar al final del «do while». Aquí te voy a mostrar el resultado en la
terminal. Si yo corro el código, puedes notar aquí como el «while»
incrementó «cuenta» hasta el número 14 y luego el «do while» se
ejecutó al menos una vez. Si yo elimino el comentario de esta línea y
vuelvo a ejecutar el código, pueden notar que el «do while» se
ejecutó 14 veces.

Bucles usando declaraciones do...while

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Ahora te voy a explicar en qué consisten las declaraciones «do
while». Las declaraciones «do while» funcionan muy similar a
las declaraciones «while» con la diferencia de que la condicional se
valida luego de que la acción ha sido ejecutada. Como en este
ejemplo que tenemos aquí. Yo tengo aquí una variable que se llama
«numeroAleatorio», la cual no tiene un valor asignado. Luego yo
utilizo un «do while» para generar el «numeroAleatorio» y esto va a
seguir sucediendo hasta que «numeroAleatorio» tenga un valor de
cinco. Aquí puedes ver cómo se declara el «do while». Nosotros
utilizamos la palabra clave «do» y luego declaramos un bloque de
código, como ves aquí, y luego utilizando la palabra clave
«while» agrego la condicional que va a validar la ejecución de este
código. Entonces aquí, primero generamos el «numeroAleatorio» y
hacemos el console.log y luego se hace la validación. Esto significa
que, a diferencia de «while», el código se va a ejecutar al menos una
vez. Para ver esto te voy a mostrar un ejemplo. Yo aquí tengo una
variable «cuenta» que inicializa en cero. Luego ejecuto un
«while». Este «while» va a correr mientras «cuenta» sea menor a
15. Hago un console.log de la cuenta y luego le incremento. Entonces,
este bloque de código se va a ejecutar hasta que cuenta llegue al
número 14. Ya luego de que este «while» ha terminado, «cuenta» va
a tener un valor de 14, y luego va a venir este «do while». En este
caso, entonces, a pesar de que «cuenta» tiene un valor de 14, este
código se va a ejecutar al menos una vez, ya que la condición se va a
validar al final del «do while». Aquí te voy a mostrar el resultado en la
terminal. Si yo corro el código, puedes notar aquí como el «while»
incrementó «cuenta» hasta el número 14 y luego el «do while» se
ejecutó al menos una vez. Si yo elimino el comentario de esta línea y
vuelvo a ejecutar el código, pueden notar que el «do while» se
ejecutó 14 veces.

Qué es una función en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación las funciones son bloques de código a los
cuales podemos asignarles un nombre y luego invocar esta
funcionalidad al llamar el nombre de la función. En JavaScript, para
poder definir una función debemos utilizar la palabra clave «function»
que puedes ver aquí. Luego debemos agregarle un nombre y abrir
paréntesis. Aquí ponemos la lista de parámetros que recibe esta
función. Una función puede recibir o no parámetros. En este caso, ya
que esta función se encarga de sumar dos números y retornar un
resultado, necesitamos hacer que esta función reciba dos
parámetros. Luego utilizamos llaves para definir el bloque de código
que esta función va a ejecutar cuando se invoca. Aquí puedes ver un
ejemplo de la invocación de la función. Para invocar la función,
simplemente se agrega el nombre, se abren paréntesis y se pasan los
parámetros, cada uno separado por coma. Las funciones son
sumamente versátiles y nos evitan tener que escribir el mismo código
una y otra vez, como en este ejemplo donde yo estoy llamando una
función dentro de un bucle «for». Yo aquí he definido una función que
eleva un número a su raíz cuadrada. Luego he definido un bucle «for»
que recorre un índice desde un valor uno a un valor de cinco. Puedes
notar que estoy calculando un resultado al llamar la función y pasa
como parámetro el índice del recorrido del bucle y luego se imprima
el resultado en la consola. Nosotros podemos llamar funciones en
cualquier parte del código, como por ejemplo en este caso yo puedo
llamar una función dentro de otra función. Yo aquí he definido otra
función que multiplica dos números. Luego tengo una función la cual
recibe dos números. En este caso estoy haciendo dos cálculos. Para
calcular la suma, llamo la función «sumarNumeros» y paso
los parámetros que recibí en esta función, y lo mismo hago al
llamar la función «multiplicarNumeros». Aquí puedes notar que
también hago el console.log de cada uno de los resultados. Y al llamar
la función «ejecutar Operaciones» paso estos parámetros se van a
ejecutar ambas funciones y mostrar el resultado. Aquí podemos ver el
resultado de este código al ejecutarlo en la terminal. Aquí puedes ver
el resultado de llamar a la función que ejecuta las operaciones y
también el resultado de llamar la función dentro del bucle «for».

Parámetros de una función en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación hay dos métodos de cómo los parámetros se pasan
a una función. El primer método que vamos a ver es el de enviar
parámetros por valor. Enviar por el valor significa que cuando una
función recibe un valor o una variable, la función hace una copia
del valor para así poder utilizarlo. Aquí vamos a ver un ejemplo de
esto. Yo tengo una función que se llama «incrementar», la cual recibe
un parámetro que se llama «numero». Esta función incrementa
número por uno y luego retorna el resultado. Luego aquí yo he
definido una función «num» que tiene un valor de cinco y luego estoy
definiendo otra variable que se llama «resultado», a la cual le estoy
asignando el resultado de llamar la función «incrementar» y puedes
notar que estoy pasando como parámetro la variable «num». A la
hora de hacer un console.log de «num», el resultado que voy a
obtener es el valor cinco, el cual es el número original que le asigné a
la variable. Pero a la hora de hacer un console.log de «resultado», voy
a obtener un valor de seis. Puedes notar aquí que «num» no cambió a
pesar de que yo lo pasé a la función y la función incrementó el
valor. Esto es lo que significa enviar parámetros por
valor. Generalmente, cuando enviamos un dato primitivo como un
número o un «string» a una función y esta función hace cambios en el
valor, los datos primitivos se pasan por valor y obtenemos este
resultado. Ahora vamos a ver el método de paso de parámetros por
referencia. Cuando pasamos variables a una función por
referencia, esto significa que nosotros no estamos pasando el valor
de la variable o la constante, sino que estamos pasando la referencia
en memoria donde vive esta variable o constante. Para entender esto
mejor, vamos a ver este ejemplo. Yo aquí tengo una función que se
llama «agregarArreglo». Esta función recibe dos parámetros. El
primer parámetro es un arreglo y el segundo parámetro es un
valor. Luego, dentro de la función yo estoy llamando la función
«push» del arreglo para poder agregar este valor a la lista dentro del
arreglo. Y luego hago un return del arreglo. Luego, aquí estoy
declarando un arreglo que contiene tres números. Y luego, estoy
creando otra variable que se llama «miArregloResultado», el cual
contiene el resultado de llamar la función «agregarArreglo» y pasa
como parámetro el arreglo que definí anteriormente y un valor nuevo,
que es el número cuatro. A la hora de hacer un console.log de mi
arreglo, puedes notar que el arreglo original contiene el valor
nuevo que se agregó a través de la función. Igual sucede con el
resultado. Esto significa que estas variables, a pesar de tener un
nombre diferente, ambas hacen referencia al mismo punto en
memoria donde estos datos viven y por esta razón es que ambas
muestran el mismo resultado. Para ver el console.log de este código,
vamos a ejecutarlo en «node». Aquí puedes ver el resultado de
pasando valores por valor y pasando por referencia.

Declaraciones de funciones en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay varias maneras de declarar una función y hay
ciertos conceptos asociados a estos métodos, los cuales son
importantes de conocer, ya que muchas veces cuando leemos
documentación en el internet sobre código JavaScript, estos términos
se utilizan. Uno de estos términos es la declaración de funciones, la
cual utiliza el método al llamar la palabra clave «function». Este es el
método más común de crear una función y generalmente es el
primero que se aprende a la hora de aprender JavaScript. En este
ejemplo que puedes ver aquí, yo estoy declarando una función que se
llama «saludo», la cual recibe un parámetro que se llama «nombre» y
luego el nombre se muestra en la consola. Lo importante de esta
lección es simplemente aprender que esta sintaxis que ves aquí se
llama «declaración de función».

Expresiones de funciones en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay varias maneras de declarar una función y en
esta lección te voy a explicar en qué consisten las funciones
declaradas como una expresión. Sabemos que a la hora de declarar
una función utilizamos la palabra clave «function». Pero puedes notar
aquí que la sintaxis es un poco diferente. En este caso, yo estoy
creando una constante que se llama «saludo» y a esta le estoy
asignando una función anónima. Anónima significa que esta función
no tiene un nombre después de la declaración de la palabra
«function». Igualmente, esta función recibe un parámetro y ejecuta
un console.log para mostrar el nombre en la consola. La ventaja de
este método es que nosotros guardamos la función dentro de una
constante y nos permite pasar esta función como parámetro a otra
función. Aquí te voy a mostrar un ejemplo. Yo aquí tengo una función
que se llama «generarSaludo». Esta función recibe otra función como
parámetro. Luego, dentro de esta función, yo he declarado un arreglo
que tiene una lista de nombres. Luego utilizo un bucle «for of» para
recorrer este arreglo y puedes notar que estoy llamando la función y
pasa como parámetro el valor dentro del arreglo. Aquí, a la hora de
invocar la función «generarSaludo», pasa como parámetro la función
que declaré anteriormente que se llama «saludo». Puedes ver que
esto hace el código sumamente flexible y práctico a la hora de crear
diferentes funciones. Vamos a ver la ejecución de este código. Para
eso, voy a abrir Terminal y voy a ejecutar este JavaScript. Aquí
puedes notar como el saludo se llamó en cada uno de los elementos
dentro del arreglo.

Funciones tipo flecha en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las funciones «flecha» son una de las características que se
agregó en la definición de ECMAScript 6. Se llaman funciones «flecha»
porque como puedes notar aquí nosotros utilizamos los caracteres de
asignación y de mayor que para formar una flecha. Este tipo de
funciones se ha vuelto muy popular ya que simplifican mucho la
sintaxis dentro del código de JavaScript. Nosotros utilizamos por lo
general una expresión para definir la función. Aquí puedes notar que
este es el código de la función y yo lo estoy agregando a una variable
que se llama «sumar». La sintaxis de una función «flecha», por lo que
generalmente puede variar. Estas empiezan con un paréntesis, el cual
recibe los parámetros de la función. Luego debemos agregar la flecha
y luego debemos agregar el bloque de código que se va a ejecutar
dentro de la función. Aquí notarás algo curioso, y es que esta función
no tiene llaves para definir el bloque de código. Este tipo de sintaxis
se llama «función flecha» con un valor de retorno implícito. Esto
significa que a la hora de yo no ponerle las llaves esta función va a
retornar el resultado de esta expresión a la hora de invocar la
función. Como por ejemplo aquí, yo he declarado una variable que se
llama «resultado» y luego llamo a la función «sumar» donde paso los
dos parámetros: X y Y. Ya con esto, entonces yo voy a obtener un
resultado que voy a imprimir en pantalla. Las funciones «flecha»
pueden no recibir parámetros y cuando este es el caso, lo que
debemos hacer es dejar los paréntesis vacíos. Aquí puedes notar que
en este caso yo estoy utilizando llaves para definir el bloque de
código. Esto es debido a que esta función no retorna ningún
valor, simplemente lo que está haciendo es llamar a un
console.log. Entonces, ya que esta función no retorna nada, yo debo
utilizar las llaves. También cuando una función solamente recibe un
parámetro, no es necesario utilizar los paréntesis. Puedes poner los
paréntesis si tú quieres, pero JavaScript aceptará esta sintaxis así
como a la ves. En este caso, esta función lo que hace es elevar un
número a la raíz cuadrada. Entonces, el parámetro solamente es
uno, el cual es X, y puedes notar que X se está multiplicando por sí
misma y el resultado de esta expresión va a ser retornado por la
función. Otra sintaxis para tener en cuenta es cuando una función
flecha retorna un objeto literal. Esto es debido a que los objetos
cuando los definimos debemos utilizar llaves. Entonces, para que
JavaScript no se confunda con la sintaxis, nosotros debemos envolver
el objeto entre paréntesis, como puedes ver aquí. Esta función lo que
hace es crear un objeto persona. Esta función recibe dos parámetros:
nombre y edad. Puedes notar que el objeto se crea con los valores
que se reciben. Para crear el objeto, entonces yo debo utilizar
llaves. Si yo quitara estos paréntesis, puedes notar que yo
estoy recibiendo un error de sintaxis. Por esta razón es que debemos
agregarlos. Ya que esta función hace un retorno implícito, nosotros no
debemos utilizar más llaves que éstas. Pero en caso de que esta
función haga alguna otra funcionalidad, deberíamos poner llaves
antes y después de los paréntesis.

La palabra clave This en Javascript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript existe una palabra clave muy importante que se llama
«this». «this» hace referencia a un objeto en memoria. El objeto que
haga referencia dependerá del lugar donde la palabra se
llame. Vamos a ver varios ejemplos para entender esto un poco
mejor. En este primer ejemplo, yo estoy haciendo un console.log
de «this» sobre el contexto global de este JavaScript. Cuando
nosotros hablamos de contexto global significa que este código no
está dentro de ninguna función. Entonces, al hacer un console.log de
«this» voy a obtener una referencia al contexto global. Si tú corres
este código en el navegador, notarás que el contexto global hace
referencia al objeto window de la pestaña en el navegador que estás
viendo. En este ejemplo, yo estoy llamando a «this» dentro de este
objeto. Mi objeto tiene dos propiedades. Primero, tiene una propiedad
que se llama mensaje, que contiene un string que se llama «Mensaje
del objeto» y una función que llama a un console.log. Y este
console.log hace referencia a «this.mensaje». Pueden notar que en
este caso «this» esta haciendo referencia no al contexto global, pero
a mi objeto. Es por esta razón que a la hora de correr este console.log
vamos a obtener como resultado el valor dentro de la propiedad
mensaje. En el tercer ejemplo, yo he creado una función sobre el
contexto global, como puedes ver aquí, y esta función hace un
console.log de «this». Luego, dentro de esta misma función, he
creado una función «flecha» y esta función también está haciendo un
console.log de «this». Y luego estoy llamando la función «flecha»
dentro de la función «probarThis». A la hora de correr esta función,
notarás que ambas hacen referencia al contexto global. La razón de
esto es porque las funciones toman el contexto del lugar donde se
declararon. Y debido a que esta función se declaró sobre el contexto
global, entonces «this» toma referencia a este contexto global. Las
funciones «flecha» no tienen contexto en sí. Entonces, básicamente,
esta función «flecha» está tomando prestado el contexto de la
función que la contiene. ¿Cómo funciona esto? Bueno, te voy a
mostrar un ejemplo más. Aquí tenemos otro objeto que luce similar al
que vimos anteriormente. Este objeto tiene una propiedad mensaje y
tiene dos funciones. La primera es una «funcionRegular» y la segunda
es una «funciónFlecha». Ambas funciones hacen un console.log de
«this.mensaje». Al correr este código, notarás que la función
«regular» muestra el mensaje correctamente. Pero la segunda, la
función «flecha», muestra un valor de indefinido. Esto es debido a que
«this» no puede acceder al contexto, ya que ella en este caso no lo
hereda y por esta razón entonces es que no tiene acceso a esta
propiedad. Tal vez este concepto te parecerá un poco complejo, y
realmente lo es, porque cuando hablamos de «this» nos empezamos
a meter en los temas de contextos léxicos y contextos de ejecución
de JavaScript, los cuales son temas mucho más avanzados a la hora
de trabajar con este lenguaje. Lo importante de entender en esta
lección es que «this» es una palabra clave que existe y su naturaleza
puede cambiar dependiendo de dónde se ha llamado. Entonces, en
caso de que tuvieras un código así en el futuro, podrás entender
mejor el código que estás leyendo.

7.- Trabajando con cadena de caracteres

Transformando texto a mayúscula y minúscula en

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay varios métodos que podemos utilizar
para manipular un string. Estos métodos los accedemos a través de
una variable de string, como ves aquí. Para poder acceder a estos
métodos simplemente debemos llamar a la variable, agregar punto y
luego invocar el método. Ahora te preguntarás como es que es esto
posible, ya que los strings son tipos primitivos y esto parece
un comportamiento de un objeto. Esto sucede porque en JavaScript
hay una clase que se llama «String». Puedes notar que la clase tiene
la primera letra en mayúscula. Esto significa que a pesar de que este
es un tipo primitivo, la clase envuelve este tipo primitivo a la hora
de invocar los métodos. Es por esta razón que todos estos métodos
han sido implementados y agregados a esta clase, y la clase es
invocada cuando nosotros agregamos un código en donde la
necesitamos. Aquí te voy a mostrar el método para cambiar un string
a mayúscula o minúscula. Yo aquí tengo un valor de string y puedes
notar que aquí estoy declarando una constante. Esta constante va a
recibir el valor de llamar al string y la función «toUpperCase». Esta
fusión va a hacer que todos los caracteres del string se vuelvan
mayúscula. Luego aquí hago un console.log del resultado. Luego,
llamo la constante que ya sabemos que tiene los valores
en mayúscula y los transformo a minúscula utilizando el método
«toLowerCase». Vamos a ver el resultado de este código. Para eso
abro la terminal, paso la URL al archivo y aquí puedes ver el
resultado. Primero tenemos el console.log de los caracteres en
mayúscula y luego tenemos el console.log de los caracteres en
minúsculas.

Concatenando cadenas de caracteres en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En JavaScript hay varias maneras que podemos utilizar
para concatenar dos o más strings. El primer método, que es muy
común, es utilizando el operador de más para unir los strings, como
en este ejemplo. Aquí yo tengo dos strings que cada uno tiene valores
diferentes. Y en esta constante «resultado» estoy haciendo una
concatenación utilizando este operador de suma. La segunda manera
es utilizando plantillas de strings, como vemos aquí. En este caso, yo
estoy utilizando la nomenclatura de los template strings, y luego paso
el nombre de las constantes que contienen los strings que quiero
concatenar. Otra opción que tenemos es la función «concat», que
pertenece a la clase String. Aquí puedes notar que yo estoy llamando
a «string1» y luego agrego un punto y llamo la función y paso el
string que quiero agregar al «string1». Esto va a hacer que estos
String se unan. Otra manera de hacer esto es utilizando arreglos. Esta
opción generalmente no es muy común de utilizar, pero es
importante saber que está ahí disponible. Aquí, yo estoy creando un
arreglo con los dos strings. Y luego llamo la función «join» de la clase
Arreglo para juntar estos strings y generar un mismo valor. Ahora
vamos a ver los resultados en la terminal. Aquí puedes notar que
todos los ejemplos generan el mismo valor. Tal vez te puedas
preguntar cuál método es el mejor. El método dependerá de lo que
estás haciendo, pero también es muy importante considerar la
cantidad de datos que estás intentando manipular. El método
«concat» es sabido que es el método más eficiente a la hora de
concatenar grandes cantidades de texto. Entonces, puede ser que
esta sea la mejor opción en caso de que tengas que manipular un
texto muy grande. Pero si estás manipulando textos más
pequeños, tal vez la opción del ejemplo dos o el uno o el cuatro sea la
mejor.

Extrayendo texto desde un string en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Un código que muy comúnmente tenemos que escribir en
la programación es el de extraer texto desde un string. Aquí te voy a
mostrar varias maneras de cómo hacer esto en JavaScript. Aquí yo
tengo una constante que se llama «texto» que puedes notar que
tiene dos líneas de texto. En este primer ejemplo, yo estoy utilizando
el método «substring», parte de la clase String de JavaScript, para
poder extraer el texto que se encuentra desde el índice cero al índice
cinco. Al igual que los arreglos, los strings de JavaScript
utilizan índices para indicar la posición de un caracter dentro del
string. En este caso, la «L» tiene un índice de cero y el espacio en
blanco tiene un índice de cinco. Entonces, al correr este texto vamos
a obtener la primera palabra, que es «Lorem». Hay otro método que
podemos utilizar también para extraer texto. El método se llama
«slice» y el resultado que obtengamos dependerá de cómo enviamos
los parámetros. Como en esta línea de código, yo quiero obtener los
diez primeros caracteres de la constante texto. Para eso entonces
llamo la función «slice» y puedes notar que el primer parámetro está
indefinido. Y luego, como segundo parámetro, yo paso el índice del
último carácter que quiero extraer. En el segundo ejemplo, puedes
notar que yo estoy llamando la misma función, pero estoy enviando
solamente un parámetro. Este parámetro lo que va a hacer es que la
función va a devolver todo el string excepto los diez primeros
caracteres. Y en este tercer ejemplo puedes notar que yo estoy
llamando la función con ambos parámetros. En este caso, el resultado
va a ser un string que contenga los caracteres entre la posición cinco
y la posición diez. Ahora vamos a ver el resultado. Voy a abrir la
terminal y voy a correr el código de JavaScript utilizando «node». Aquí
puedes ver los resultados de cada uno de los console.logs. Primero
tenemos el console.log de Lorem. Luego tenemos el console.log de
los diez primeros caracteres en el string. Luego tenemos este
console.log que muestra todo el string que puedes ver aquí, excepto
los diez primeros caracteres. Y luego tenemos el console.log, donde
solamente se muestran los caracteres entre la posición cinco y diez.

Uso de expresiones regulares en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las expresiones regulares son una herramienta muy práctica en
la programación que se utiliza para averiguar si cierto string sigue un
patrón determinado. Las expresiones regulares en sí son un poco
complicadas de construir y por esta razón hay cursos totalmente
dedicados a este tema. En esta lección no te voy a enseñar
específicamente cómo construir una expresión regular, pero sí te voy
a mostrar cómo utilizarlas para encontrar ciertos patrones en código
JavaScript. Aquí en este primer código yo tengo un ejemplo que valida
si un string sigue un patrón de un correo electrónico correcto. Por lo
general, los correos electrónicos siguen un patrón que por lo general
es el nombre del usuario, seguido el arroba, luego el nombre del
dominio seguido de un punto y luego sigue .com o .net
dependiendo del nombre del dominio. Esta constante que ves aquí
contiene la expresión regular. Puedes notar que la expresión regular
esta definida por «slashes». Este grupo que ves aquí es el nombre del
usuario. Luego lo seguimos por el arroba, luego tenemos el nombre
del dominio, el punto que sigue después del nombre del dominio y
luego aquí sigue el .com o .net según lo que se utilice. Luego aquí
tengo tres constantes. Cada una tiene un correo electrónico. Algunos
tienen un dominio válido y otros no. Entonces, para poder validar si
estos strings tienen un correo válido, utilizamos la expresión
regular. Aquí puedes notar que yo estoy llamando un método que se
llama «test». Este es un método disponible dentro de la clase
RegExp de JavaScript. Entonces, al pasar yo un correo electrónico en
forma de string a este método, este método me retornará «true» o
«false» para decirme si el string sigue el patrón o no. En este primer
resultado nos dice que este es un correo electrónico válido. En el
segundo, dice que no lo es. Como puedes notar, el nombre del
dominio falta aquí. Y el tercero dice que es válido. Las expresiones
regulares nos pueden ayudar a encontrar y reemplazar texto en un
párrafo muy largo. Como en este ejemplo. Yo aquí tengo un pequeño
poema. En este poema, yo quiero reemplazar la palabra «pájaros»
por «aves». Para esto, entonces primero voy a crear un objeto de
expresión regular. Esta es otra sintaxis que puedes utilizar para crear
la expresión regular. Sea ésta o este método, cualquiera son
válidos. Aquí yo llamo el keyword «new» y luego llamo la clase
de expresión regular. Aquí paso la palabra que tiene que buscar y
luego esta es una palabra clave para indicar que la búsqueda debe
ser global, o sea, a través de todo el string. Ya creada la expresión
regular, entonces llamo al string «poema» y utilizo el método dentro
de la clase String «replace» en donde paso la expresión regular para
poder buscar todas las coincidencias de esta palabra y luego paso
el string por la cual quiero reemplazar. Esta es la salida que
deberíamos ver en consola. Ahora voy a correr este código en la
terminal. Para eso llamo «node» y paso el URL del documento. Aquí
puedes notar que he recibido la validación de los correos electrónicos
como habíamos mencionado anteriormente, y también aquí puedes
notar que la palabra «pájaros», que se encuentra en la segunda línea,
fue reemplazada por «aves».

Otros métodos para manipulación de strings en

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Hay varios métodos que podemos utilizar para manipular strings en
JavaScript. En este primer ejemplo te voy a mostrar los métodos
«trim». Esto lo que hace es que elimina espacios en blanco en un
string. El método «trim» elimina los espacios en blanco al inicio y al
final. El método «trimStart» elimina los espacios al inicio, pero no al
final. Y el método «trimEnd» hace lo mismo pero al contrario, o sea,
elimina los espacios en blanco al final, pero no al inicio. Otros
métodos muy útiles que podemos utilizar son los métodos
«pad». Este método lo que hace es que rellena strings. Por ejemplo,
aquí yo tengo una constante que tiene un valor de cinco en forma de
string. Voy a utilizar el método «padStart» para agregar caracteres
cero hasta que el string tenga un largo de cuatro caracteres. El
método «padEnd» también me agregará estos ceros como ves aquí,
con la diferencia que el «padStart» los agregará al inicio y «padEnd»
los agregará al final. Luego, el último método que te quiero mostrar
es el «charAt». El método «charAt» lo que hace es que devuelve el
carácter en cierta posición que se pase como parámetro. Ahora
vamos a ver cómo se ejecuta este código. Al correr el código, puedes
notar aquí los resultados del «trim». En el primer ejemplo, yo he
eliminado todos los caracteres en blanco, como puedes notar aquí. He
agregado unos asteriscos para resaltar el final del string. Puedes
notar que entre la palabra «blanco» y los asteriscos no hay ningún
espacio. Esto significa que estos caracteres en blanco se
eliminaron. En la segunda línea, puedes notar que los caracteres se
eliminaron al inicio. Y en esta tercera, puedes notar que se eliminaron
al final. Todavía tenemos los caracteres en blanco al inicio. Luego,
podemos ver los console.log del siguiente ejemplo. Aquí yo tengo un
string de cuatro caracteres. Los ceros están rellenando al inicio con
este método y el segundo está rellenando al final, como puedes ver. Y
luego, este es el resultado de llamar el método «charAt» con un valor
de cinco.

Convirtiendo strings a números y viceversa

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En la programación, es muy común que tengamos que convertir
strings a números o números a strings. Te voy a mostrar cómo hacer
esto en JavaScript. Aquí, en este primer ejemplo, yo tengo una
constante, la cual tiene un valor string que contiene un número:
123. En caso de que yo quisiera hacer un cálculo matemático con
este número, primero debo convertirlo a un tipo numeral. Para
esto, entonces, puedo utilizar el método «parseInt», como puedes ver
aquí. Este método toma un string y devuelve un valor numeral. Esta
es una manera de hacer esto. Otra manera de hacer la conversión es
agregando un operador de más antes del string. En este caso, lo que
sucede es que JavaScript va a hacer una coerción del tipo String a
número para poder resolver el operador de suma y, por lo tanto, el
resultado va a ser un valor de tipo numeral. En caso de que tengamos
un string con un valor numeral que tenga decimales, como ves aquí,
debemos utilizar este método, «parseFloat». Esto es porque
«parseInt» va a ignorar los decimales en el string. Entonces, en caso
de que tengamos que mantenerlos en el número, debemos utilizar
este método. Ahora te voy a enseñar cómo hacer lo contrario, cómo
convertir un número a un string. Aquí tengo una constante que tiene
un valor numeral: 789. Para yo poder convertir este número a
string, puedo utilizar el método «toString», que está disponible dentro
de la clase «Number» de JavaScript. Los valores primitivos en
JavaScript tienen una clase equivalente, la cual nos provee varios
métodos para poder manipular estos datos. En este caso, la clase
«Number» de JavaScript nos provee este método para poder convertir
un número a string. Otro método que podemos utilizar son los
«template string», como ves aquí. Yo estoy declarando el «template
string» y luego utilizando la nomenclatura de signo de dólar más las
llaves, agrego el valor numeral y todo esto me va a producir un
string. Ahora podemos ver la ejecución de este código. Para
eso, entonces, abro la terminal, agrego el comando de «node» y
ejecuto el código. Aquí puedes ver los resultados de estos
console.log. Obtenemos los valores de «number». Luego obtenemos
el valor de parsear este string utilizando esta función. Y aquí puedes
ver que el resultado de este tipo de dato es «number» también. Y, al
final, tenemos los strings, como puedes ver aquí.

Recorriendo los elementos de un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Hay varios métodos que podemos utilizar para recorrer los elementos
dentro de un arreglo. Y en esta lección te voy a mostrar los más
comunes. Aquí, yo tengo un arreglo que contiene los nombres de
varias frutas. Uno de los métodos más comunes para recorrer estos
elementos es utilizando la función «forEach». Esta función está
disponible dentro de la clase de «Array». Para poder utilizar esta
función debemos llamarla y luego debemos pasar una función la cual
va a ejecutar un código en cada uno de los elementos. Como en este
caso, yo estoy pasando una función «flecha», como puedes ver
aquí, y este parámetro que puedes ver en esta posición hace
referencia al elemento actual que se está validando dentro del
bucle. Entonces, este código lo que debe imprimir en la consola son
todos los nombres de las frutas, debido a que esta función hace un
console.log de esta variable. Otro método muy común es utilizar un
«for loop», como puedes ver en este caso. Aquí nosotros trabajamos
con el índice de los arreglos para así poder acceder a los
elementos. En este código yo creo una variable «Y» que empieza en
cero. Luego defino la condición de cómo se va a ejecutar este «for» al
indicar que «Y» siempre debe ser menor al número total de
elementos dentro del arreglo. Luego «Y» va a ir incrementando uno a
uno conforme se ejecute el loop. Ya con esto, entonces yo puedo
utilizar «Y» para acceder a los elementos dentro del arreglo. Esto
puede parecer mucho código, pero trae algunas ventajas. Por
ejemplo, yo puedo recorrer el arreglo en reversa. Aquí, yo estoy
inicializando «Y» con el índice del último elemento dentro del
arreglo. Y luego indico que «Y» siempre debe ser mayor o igual a
cero. Y luego que «Y» va a ir decrementando uno a uno. Ya con esto,
entonces, yo puedo recorrer el arreglo en reversa. Otro método que
podemos utilizar es el «for of», como ves aquí. Este es un loop que
nos permite acceder a los valores directamente dentro del
arreglo. Luego con el «for in», que es muy similar al «for
of», obtenemos el índice del elemento dentro del arreglo. Para ver
esto mejor, vamos a ejecutar el código. Aquí puedes ver cada una de
las ejecuciones. Primero tenemos el «forEach». Como puedes ver,
hemos recorrido todos los elementos. Igual sucede con el «for». Aquí
puedes ver el «for» en reversa. Luego, aquí, tenemos el resultado del
«for of» y el resultado del «for in».

Agregando elementos a un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Vamos a ver varios métodos que podemos utilizar para
agregar elementos a un arreglo. Uno de los métodos más comunes es
utilizar el método «push» disponible dentro de la clase Array. Aquí yo
tengo un arreglo de frutas y yo quiero agregar una fruta
más. Entonces, para esto llamo el método directamente desde el
arreglo, como puedes ver aquí. Y paso el valor que quiero agregar. Es
importante notar que el método «push» agrega el valor al final de la
lista de elementos, como puedes ver aquí en la salida. El método
«unshift» funciona similar, con la diferencia de que el elemento no se
agrega al final, pero al inicio. Entonces la salida de este código
debería ser esta que ves aquí. El método «splice» tiene varias
funcionalidades. Nos puede ayudar a eliminar, reemplazar o agregar
elementos. Aquí te voy a mostrar cómo utilizarlo para agregar
un elemento nuevo dentro del arreglo. Yo aquí tengo un
arreglo «numeros», como puedes ver aquí. Luego llamo el método
«splice» y paso a los siguientes parámetros. El primer parámetro
indica el índice donde yo quiero hacer la modificación dentro del
arreglo. El segundo parámetro indica cuántos elementos quiero
borrar dentro del arreglo. En este caso, yo no quiero borrar ningún
elemento, entonces por eso es que utilizo un cero. Y el tercer
parámetro indica el valor que quiero agregar. Entonces, ya con esto
yo debo obtener un resultado como el que ves aquí. Como puedes
notar, el valor seis fue agregado al índice dos. Otro método que
podemos utilizar para agregar elementos a un arreglo es utilizando el
operador «spread». Como ves aquí, yo tengo un arreglo de números y
quiero crear otro arreglo que contenga más números. Entonces, para
eso declaro un nuevo arreglo y utilizo el operador para sacar los
elementos del arreglo original y agregar los nuevos. Otro método
disponible dentro de la clase de Array es el método «concat». Este
método lo que hace es que concatena elementos al arreglo. Como en
este caso, yo tengo un arreglo que contiene marcas de autos y
quiero agregar dos más. Entonces, llamo a este método y este
debería ser mi resultado. Y el último método que te quiero mostrar es
utilizando la propiedad «length». Esta propiedad está dentro de la
clase Array e indica el número total de elementos dentro del
arreglo. Sabemos que los arreglos utilizan un índice que empieza con
cero. Esto significa que el último elemento dentro del arreglo va
a tener un índice del total -1. Entonces, nosotros podemos utilizar
«length» para poder agregar un elemento al final del arreglo. Como
en este caso, yo tengo tres letras dentro de este arreglo y
quiero agregar una más. Entonces, nada más utilizo la propiedad
«length» como índice del arreglo para poder hacer esto. Ahora vamos
a ver los resultados de los console.logs. Aquí puedes ver los
diferentes resultados. Primero, tenemos el resultado de agregar
«piña» al final y tenemos el resultado de agregar «azul» al
inicio. Luego con «splice» aquí tenemos el resultado de poner el
número seis en el índice dos. Y con el «spread» también logramos
agregar más elementos al arreglo original. Luego, con el método
«concat» pudimos agregar las nuevas marcas de carros al arreglo e
igual pudimos agregar la letra D al final del arreglo.

Eliminando elementos de un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Te voy a mostrar varios métodos para poder eliminar elementos de
un arreglo. El primer método es el método «pop» disponible dentro de
la clase de Array en JavaScript. El método «pop» elimina y retorna el
último elemento de un arreglo. Como en este ejemplo, yo tengo un
arreglo que contiene varios nombres de frutas. Luego, yo llamo a la
función «pop» y puedes notar que yo estoy guardando el resultado en
una nueva constante. Esto significa que «frutaEliminada» va a tener
un valor de «mango». Y «frutas» va a contener solamente dos
elementos. Otro método muy similar es «shift», con la diferencia de
que «shift» elimina y retorna el primer elemento. Como en este caso,
«colorEliminado» va a tener un valor de «rojo» e igualmente el
arreglo va a terminar con los dos últimos elementos del arreglo. Otro
método que podemos utilizar es «spice». «splice» es un método muy
versátil que podemos utilizar para reemplazar, eliminar o agregar
elementos. Te voy a mostrar cómo utilizarlo para eliminar
elementos. Aquí tengo un arreglo que contiene varios
números. Entonces yo voy a llamar el método «splice» y voy a
pasar dos parámetros. El primer parámetro es el índice dentro del
arreglo donde yo quiero ejecutar los cambios. En este caso, el índice
dos significa que los cambios van a empezar con el número tres. Y
luego indico cuántos elementos quiero eliminar. Puedes notar aquí
que a la hora de llamar esta función me va a retornar los elementos
eliminados. Entonces, yo puedo guardarlas en una variable o una
constante. Ejecutando este código, entonces «numerosEliminados» va
a contener un valor que es un arreglo que contiene tres y cuatro. Y el
resto del arreglo «numeros» va a contener estos valores que ves
aquí. Otro método que funciona muy similar a «splice» es «slice». La
diferencia es que «slice» retorna un arreglo nuevo y deja el
arreglo original sin cambiar. Aquí te voy a mostrar un ejemplo de
esto. Tengo un arreglo «autos» que contienen varias marcas de
automóviles. Y luego voy a llamar el método «slice», en donde voy a
pasar como parámetro primero el índice donde yo quiero obtener o
eliminar los elementos, y luego con el segundo parámetro yo indico el
índice final donde yo quiero detener los cambios. O sea que, aquí
estoy indicando que yo quiero obtener los elementos desde el índice
uno hasta el índice tres. Ya con esto, entonces «autosEliminados» va
a obtener un valor que es un arreglo que contiene estas marcas de
autos que ves aquí. Y puedes notar que «autos» no modificó su
valor. Ahora vamos a ver este código en ejecución. Nos movemos
más arriba y vemos aquí el resultado de los console.logs, como
puedes ver aquí. Lo mismo sucede con el arreglo de los colores, como
puedes ver aquí. Luego nos movemos al console.log del «splice» y
puedes ver aquí el resultado, en donde yo obtuve estos elementos y
los eliminé del arreglo original. Pero aquí, con el método «slice»,
puedes ver que he obtenido los elementos sin tocar el arreglo
original.

Reemplazando elementos en un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Te voy a mostrar varios métodos de cómo reemplazar
elementos dentro de un arreglo. La opción más común que tenemos
disponible es utilizando el índice para hacer referencia al elemento
dentro del arreglo y luego pasamos el valor que queremos
actualizar, como ves en este ejemplo. Otro método que también
podemos utilizar es la función «splice». Esta función es muy versátil y
nosotros podemos utilizarla para agregar, eliminar o reemplazar
elementos dentro de un arreglo. Como en este ejemplo, yo tengo un
arreglo «numeros» y luego llamo el método «splice». Aquí estoy
indicando que, en la posición dos, quiero eliminar un elemento y
luego paso el tercer parámetro que indica el valor que yo quiero
reemplazar por el valor que fue eliminado. Esto significa que este
arreglo, al llamar esta función, va a terminar con este resultado. Otro
método que tenemos disponible es la función «fill». Esta función lo
que hace es que reemplaza un cierto número de elementos dentro de
un arreglo, depende de los parámetros que pasemos a la
función. Aquí puedes ver que yo tengo un arreglo de letras y luego
llamo la función «fill» donde primero indico el valor que yo quiero que
se utilice como reemplazo. Luego, paso dos parámetros. El primero es
el índice donde el reemplazo debe empezar a suceder. En este caso
es el índice dos. Entonces, podemos contar 0, 1, 2. O sea que en este
índice va a empezar el reemplazo. Y el cuatro indica donde debe
detenerse. Significa que debe detenerse en la «E». Cabe recalcar que
este índice no es inclusivo, o sea que el elemento en este índice no va
a ser incluido en el reemplazo. Luego aquí puedes ver el resultado de
llamar esta función. Puedes notar que «A» y «B» se mantienen, pero
«C» y «D» fueron reemplazadas por «X» y luego «E» no fue
reemplazada y las demás letras quedaron iguales. Ahora podemos ver
el resultado de ejecutarlo en la terminal. Aquí puedes ver los
diferentes resultados. Primero, el reemplazo de «Toyota» por
«Ford». Luego aquí tenemos el arreglo «numeros» donde el valor
seis reemplazó el valor tres. Y aquí al final tenemos donde hemos
reemplazado las dos letras por la letra «X».

Mutar datos en un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación, cuando decimos que un objeto o un valor ha sido
mutado, esto significa que los valores de las propiedades de un objeto
han cambiado, o si el valor de una variable ha cambiado
también. Aquí te voy a mostrar varios métodos que podemos
utilizar para mutar un arreglo. El primer método es el método
«reverse». Este método lo que hace es que invierte el orden de los
elementos dentro de un arreglo. Como en este ejemplo, yo tengo un
arreglo de flores, el cual contiene varios nombres de flores. Al llamar
esta función «reverse», entonces el resultado va a ser los mismos
nombres de flores pero ordenados a la inversa. El siguiente método
que te quiero explicar es el método «sort». Este método nos permite
ordenar los elementos dentro de un arreglo. Para entenderlo bien,
vamos a ver dos ejemplos. Primero, aquí tenemos un arreglo de
números. Puedes notar que estos números no están ordenados. La
función «sort» a la hora de llamarla recibe como argumento una
función. Esta función siempre recibe dos parámetros. La comparación
de estos dos parámetros va a indicar el orden, cómo se deben
organizar los elementos dentro de un arreglo. Aquí en el comentario
tenemos una explicación de cómo debemos retornar los valores de
esta función para que el orden funcione bien. La función «callback»
que pasamos como parámetro, siempre debe retornar un valor. Este
valor debe ser negativo si el primer parámetro, en este caso «A», es
menor que el segundo parámetro. Debe retornar un valor cero en
caso de que «A» y «B» sean iguales o un valor positivo en el caso de
que «A» sea mayor a «B». Esto significa que, a la hora de hacer estos
valores todos numerales, yo puedo utilizar esta expresión para
calcular estos valores. Y ya con esto, entonces, al ejecutar esta
función, los valores dentro del arreglo se van a ordenar y voy a
obtener este resultado. Ahora te voy a mostrar cómo hacer esto con
strings. Imaginemos que tenemos una aplicación que maneja
varios nombres de categorías. En este caso, el orden de las
categorías depende del tipo de funcionalidad que queramos
implementar en la aplicación. Entonces, la lógica debe ser un poco
más customizada. Aquí, en la función «sort», puedes notar que yo
estoy comparando strings en donde indico que la «categoria3» debe
ser posicionada al final del arreglo. Significa que tiene un valor más
alto, por lo tanto, cuando el valor de «catA» es «categoria3», siempre
se va a retornar un valor de uno. Al contrario sucede con la
«categoria1». Las categorías 1 siempre deben ir al inicio del
arreglo. Por lo tanto, se puede considerar que tienen un valor
menor. Entonces, hacemos un «return» de -1. En caso de que el valor
de «catA» sea «categoria2», entonces en este caso también debemos
validar el valor de «catB». Entonces, yo valido que si «catA» es igual a
«categoria2» y «catB» es igual a «categoria3», me va a retornar un -
1. Y si no, entonces va a retornar uno. Ya con esto, entonces, yo debo
obtener un resultado como el que ves aquí. Las categorías 1 se van a
posicionar al inicio, las categorías 2, en el medio, y categorías 3, al
final. Otro método que podemos utilizar para mutar los valores de
un arreglo es el método «map». Método «map» también recibe una
función «callback», como ves aquí. Esta función recibe como
parámetro el valor actual que se está evaluando dentro del loop. Y
luego la función debe retornar un valor. Este valor va a reemplazar al
valor original dentro del nuevo arreglo, que genera la función
map. Aquí tenemos un ejemplo. Anteriormente, teníamos el arreglo
«numeros» que ves aquí. Yo quiero hacer que todos estos números se
eleven al cuadrado. Entonces, para esto llamo la función «map» a
través del arreglo «numeros» y paso de esta función. Aquí indico que
el valor de retorno de esta función debe ser el número elevado al
cuadrado. Cabe recalcar que la función «map» no muta el arreglo
original, sino que crea un nuevo arreglo. Entonces, este nuevo arreglo
se guarda dentro de esta constante y este es el resultado que yo
debería obtener a través del console.log. Nosotros podemos utilizar la
función «map» también para generar nuevos arreglos a partir de
otros arreglos. Como aquí, yo tengo un arreglo de objetos. Estos
objetos cada uno tiene una propiedad «nombre». Yo quiero generar
un arreglo que contenga todos los nombres en mayúscula. Entonces,
para esto llamo el método «map» y paso como parámetro la función
«callback», en donde yo aquí indico que el valor de retorno va a ser el
nombre del objeto transformado a letras mayúsculas. Y con esto yo
obtengo este resultado.

Buscando datos en un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Vamos a ver varios métodos para buscar elementos dentro de un
arreglo. Para explicarte estos métodos mejor he agregado dos
arreglos aquí en el código. El primer arreglo «personas» contiene una
lista de objetos, cada uno con una propiedad «nombre». El segundo
arreglo contiene una lista de nombres de frutas. Puedes notar que
ambos arreglos tienen elementos repetidos. Los primeros métodos
que vamos a analizar son los métodos «indexOf» y
«lastIndexOf». Estos métodos retornan el primero y el último índice
que coincida con la búsqueda. En caso de que la búsqueda no retorne
ningún resultado, los métodos van a retornar un valor de -1. Veamos
estos ejemplos para entender esto un poco mejor. Aquí yo quiero
buscar el índice de la fruta «banana». «banana» está dos veces
dentro del arreglo. Entonces, con el método «indexOf», yo puedo
encontrar el índice de la primera coincidencia en la
búsqueda. Significa que esta función me va a devolver el índice de
este elemento. «last IndexOf» me va a retornar el índice de la última
coincidencia. En este caso, me retornará el índice de este
elemento. Ahora, ¿qué sucede con los objetos? Los objetos tienen una
particularidad a la hora de pasarse a una función. Los valores
primarios se pasan por valor a una función, pero los objetos se pasan
por referencia. Esto significa que, a pesar de que yo llame un
«indexOf» utilizando este valor, que es un objeto, la función no lo va a
poder encontrar. Esto es debido a que este objeto que yo creé aquí no
es el mismo que estos que ves aquí. Esto porque, a pesar de que
tienen los mismos valores, en memoria apuntan a lugares
diferentes. Entonces, para el motor de JavaScript estos se
consideran diferentes objetos. Si yo quisiera encontrar los índices de
esos objetos, básicamente tendría que utilizar el mismo arreglo, como
ves aquí, y pasarlo como parámetro dentro de la función e indicar
exactamente cuál es el objeto que estoy buscando. A pesar de que
esto se vea como redundante, es importante tomarlo en cuenta a la
hora de utilizar estos métodos. Algo similar sucede con el método
«includes». Este método lo que hace es que determina si el arreglo
contiene el elemento que andamos buscando y el resultado va a
ser un valor booleano. En donde «true» indica que el valor sí se
incluye dentro del arreglo y «false» indica que no se incluye. Como en
este ejemplo, yo quiero saber si el arreglo contiene un elemento
«melón». El resultado va a ser «true», ya que el arreglo sí lo
contiene, como vemos aquí. Pero el arreglo no contiene un valor que
diga «sandía», entonces el resultado va a ser «false». En caso de que
sean objetos, hemos hablado que los objetos se pasan por
referencia. Significa que este objeto no es igual a los objetos
dentro del arreglo «personas», ya que estos apuntan a
diferentes lugares en memoria. Entonces, al llamar esta función la
salida va a ser false. Para que la salida de esta función sea «true», yo
tengo que pasar el arreglo directamente y apuntar con el índice cuál
es el objeto que ando buscando. Esto es importante tenerlo en cuenta
a la hora de utilizar este método. Ahora vamos a ver el método
«find». «find» retorna el primer elemento que coincida con la
búsqueda. A diferencia de los métodos que vimos anteriormente, el
método find recibe como parámetro una función «callback». Aquí
vamos a ver varios ejemplos. Aquí en el primer ejemplo, yo ando
buscando el elemento «melón» dentro del arreglo de frutas. Puedes
notar que yo llamo la función «find» y paso a una función
«callback». El parámetro «fruta» va a tomar el valor de la fruta
actual dentro del loop. Entonces, aquí yo puedo hacer una
comparación y comparar que si «fruta» es igual a «melón», entonces
esto retorna en «true». En el momento en que la función «callback»
me retorna en «true», la ejecución del loop se detendrá y se retornará
el valor que tenga «fruta». En este caso, me retornará «melón». En
este segundo ejemplo, yo ando buscando el elemento «sandía». Ya
sabemos que el arreglo no contiene un elemento que se llame
«sandía», por lo tanto esta función me va a retornar un valor de
«indefinido». Este método es sumamente útil para encontrar
elementos dentro de un arreglo que contenga objetos. Vimos en los
métodos anteriores que a la hora de utilizar objetos puede ser un
poco más complicado a la hora de hacer búsquedas. Por lo tanto, este
método es más recomendable, ya que aquí nosotros obtenemos la
referencia al objeto que está siendo analizado. Y ya con esto,
entonces yo puedo hacer una evaluación de las propiedades del
objeto, como en este caso yo quiero retornar un objeto que el nombre
sea «L». Entonces, ya con esto yo puedo obtener el objeto que ando
buscando. El método «findIndex» funciona muy similar a como
puedes ver aquí, con la diferencia de que «find» me retorna el valor o
el objeto y «findIndex» me retorna el índice del elemento. Entonces,
podemos concluir que para poder hacer búsquedas de objetos dentro
de un arreglo debemos utilizar este método, «findIndex» o
«find». Pero en caso de que sean valores primitivos, podemos utilizar
los métodos que vimos anteriormente. Y otro método que podemos
utilizar, no importa el tipo de datos, es utilizando un loop. Aquí, en
esta lógica, yo tengo una variable que se llama «encontrada», que
tiene un valor de «false». Luego yo recorro el arreglo de frutas y
luego indico con una declaración condicional que si «frutas» en el
índice «I» tiene un valor de «melón», encontrado va a tener un valor
de «true», y utilizo la palabra clave «break» para detener la
ejecución de este «for». Este es un método muy flexible también para
poder encontrar elementos dentro de un arreglo.

Métodos que calculan y extraen información sobre un

arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
para extraer información de un arreglo. Para mostrarte estos
métodos, voy a utilizar este arreglo de números que puedes ver
aquí. El primer método que te quiero mostrar es el método
«some». Este método lo que hace es que recibe un «callback», como
puedes ver aquí. Esta función se ejecuta sobre cada uno de los
elementos dentro del arreglo y esta función debe retornar un valor
booleano. El método «some» lo que va a hacer es validar todos los
elementos dentro del arreglo utilizando la función «callback» y
retornará un valor de «true» en caso de que alguna de
estas funciones retorne «true». Como en este ejemplo, yo estoy
validando si hay números pares dentro de este arreglo. Sabemos que
alguno de estos números no son pares, pero otros sí lo son. Es por
esta razón que el método «some» nos retorna un valor de «true». La
función «every» funciona muy similar, con la diferencia de que todas
las funciones «callback» deben retornar un valor de «true» para que
«every» sea un valor verdadero o «true». En caso de que haya un
valor «false» hará que «every» retorne un valor de «false». Como en
este ejemplo, puedes notar que yo estoy pasando la misma función
«callback» para determinar si un número es par. Y luego con la
función «every» yo quiero determinar si todos los números dentro del
arreglo son pares. Sabemos que eso no es así y por esta razón es que
«every» me retorna un valor de «false». Y el último método que te
quiero mostrar es el método «reduce». Este método lo que hace es
que reduce los valores de un arreglo a un valor específico. En este
ejemplo, yo estoy calculando la suma de todos los números dentro
del arreglo «numeros», como puedes ver aquí. El método «reduce»
recibe como parámetro una función. Esta función tiene dos
parámetros. El primer parámetro es un parámetro
acumulador. Significa que este parámetro va a acumular los valores
de retorno de las funciones que se han llamado anteriormente y el
valor actual contiene el valor del arreglo que se está validando en
este momento. ¿Cómo funciona esto? Bueno, esta función va a correr
sobre cada uno de los elementos dentro del arreglo. Puedes notar
aquí que yo estoy enviando un valor de inicio. Significa que a la hora
de empezar a recorrer estos números, «acumulador» va a tomar un
valor de cero. Luego la función se va a ejecutar con el valor
uno, «acumulador» va a tener un valor de cero y «valorActual» va
a tener un valor de uno. Entonces, yo hago un «return», que es la
suma del acumulador cero más uno. Luego, en la siguiente etapa del
loop, la función se ejecuta con el valor dos. En este caso, entonces,
«acumulador» tiene un valor de uno y «valorActual» tiene un valor de
dos y se retorna la suma. Luego, cuando se ejecuta con el valor
tres, el valor «acumulador» va a tener un valor de tres y
«valorActual» va a tener un valor de tres, que es el número que se
está validando. Entonces, hará un retorno de un valor de seis y así
sucesivamente hasta que se recorran todos los elementos dentro del
arreglo. El resultado que esperamos de esta suma debe ser
55. Puedes notar que al final yo obtengo un valor Integer a partir de
este arreglo. La función «reduce» solamente no funciona con
números, sino que la podemos utilizar en cualquier tipo de dato. Aquí
hay un ejemplo de cómo crear un string a partir de un arreglo de
strings, como puedes ver aquí. Utilizando la misma lógica, yo
concateno los valores string al acumulador y al final voy a terminar
con un valor string único con este valor. Ahora podemos ver la
ejecución de este código. Para eso abro la consola y agrego el pad al
documento. Y aquí puedes ver el resultado de todos los
console.log dentro de este archivo. Primero tenemos el valor «true»
de la función «some», el valor «false» de la función «every», luego la
suma utilizando «reduce», como puedes ver aquí, y al final el string
que generamos utilizando la función «reduce».

9.- clases

Qué es y cómo crear una clase en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En programación, las clases son plantillas que podemos utilizar para
crear objetos similares. En JavaScript, para nosotros poder declarar
una clase debemos utilizar la palabra clave «class». Luego debemos
agregarle un nombre a la clase. En este ejemplo, yo tengo una clase
Persona que contiene dos atributos: «nombre» y «apellido». Y
también tiene un método que se encarga de retornar el nombre
completo en forma de string. Habíamos dicho entonces que las clases
son plantillas para crear objetos similares. Como en este ejemplo que
ves aquí más abajo, aquí yo tengo dos objetos creados con la misma
clase. Un objeto creado con una clase se le conoce con el nombre de
instancia. Entonces, podemos decir que este objeto es una
instancia de la clase Persona. Para poder crear una instancia
debemos utilizar la palabra clave «new» y luego llamar el nombre de
la clase. Y seguido, agregamos paréntesis y agregamos parámetros
que requiera la clase. Aquí yo he creado una instancia que se llama
«Samuel» y puedes notar que a la hora de hacer un console.log del
nombre obtenemos el nombre «Samuel» y al llamar la función
«obtenerNombreCompleto» obtenemos «Samuel Reyes». Aquí tengo
otra instancia que está basada en la misma clase, pero en este caso
el nombre y el apellido son «David» y «Quesada». Entonces, a la hora
de hacer un console.log del nombre obtengo «David» y a la hora de
llamar el método «obtenerNombreCompleto» sale «David
Quesada». Podemos ver este código en ejecución ahora. Aquí puedes
ver los resultados de llamar los console.log en las diferentes
instancias de la clase.

El constructor de una clase en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las clases son plantillas que podemos utilizar para crear objetos
similares y estas contienen un método especial que se llama
«constructor». El constructor de una clase se llama cuando
invocamos el keyword «new» y este constructor sirve para inicializar
la clase. Como es una función, puede recibir parámetros como ves en
este ejemplo. Aquí yo he creado una clase Persona en donde el
constructor recibe dos parámetros, recibe un valor «nombre» y un
valor «apellido». Entonces yo utilizo estos valores para cambiar las
propiedades de la clase. Y también tengo una tercera propiedad que
se encarga de guardar el número de caracteres que tiene el nombre
completo. Puedes notar aquí que yo inicializo estas tres
propiedades dentro del constructor. Esto significa que, luego de que
yo he creado esta instancia, puedo obtener el valor de esta propiedad
y también puedo invocar sus métodos. Las clases no necesariamente
tienen que tener un constructor como este ejemplo. En caso de que
una clase no tenga un constructor, se utilizará uno por defecto. En
este ejemplo, yo tengo una clase de auto que tiene una
propiedad que se llama «marca». Yo igual puedo acceder a la
instancia de la clase luego de que ha sido creado con el keyword
«new». Pero puedes notar aquí que, en este caso, marca está
indefinido, por lo que entonces yo tendría que actualizar la propiedad
luego de una manera directa.

Métodos de una clase de JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las funciones que se declaren dentro de una clase se le van a llamar
«métodos de la clase». Yo aquí tengo una clase Persona, la cual tiene
tres propiedades y también tiene dos métodos. El primer método
retorna el nombre completo utilizando como valor el nombre y el
apellido de esta clase. Aquí también tengo otro método que se llama
«obtenerSaludo». Puedes notar que este método recibe un
parámetro. Este no es una propiedad dentro de la clase, sino que es
un parámetro que se puede pasar a la función para generar un
valor. Aquí yo declaro una condicional en donde si «hora» tiene un
valor de «mañana» se va a mostrar un saludo como el que ves
aquí. Si no, se va a devolver otro saludo diferente en caso de que el
valor no coincida con mañana. Puedes notar que yo puedo invocar a
otros métodos de la misma clase utilizando el keyword «this». Luego
de que yo he creado una instancia de la clase, yo puedo acceder a
estos métodos como se ve en este ejemplo. E incluso puedo llamar el
método que recibe parámetros, enviar los valores y así obtener un
resultado. Otro tipo de métodos que podemos declarar en una clase
son los métodos estáticos. Estos métodos estáticos se acceden a
través de la clase, como podemos ver aquí. Puedes notar que estos
métodos, «obtenerNombreCompleto» y «obtenerSaludo» se acceden
a través de la instancia de la clase, pero los métodos estáticos se
acceden a través de la clase. Aquí hay algo importante que hay que
tomar en cuenta y es que los métodos estáticos solamente pueden
acceder a la información estática y no a las propiedades de una
clase. Como por ejemplo aquí, dentro de este método estático, yo
estoy haciendo un console.log de la propiedad estática que
he definido más arriba dentro de esta clase. El resultado de este
console.log va a ser «Homo sapiens». Yo puedo acceder a este valor
también utilizando el keyword «this». Pero si yo quisiera hacer lo
mismo con la propiedad «nombre», voy a obtener un valor
indefinido. Podemos ver la ejecución de este código abriendo la
terminal y corriendo el código JavaScript. Aquí puedes ver el resultado
de llamar estas dos funciones y también el resultado de llamar el
método estático. Puedes notar que la función encontró los valores
estáticos, pero no la propiedad de la clase.

Herencia en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
En la programación orientada a objetos, el método de herencia es una
manera en que podemos pasar propiedades y métodos definidos en
una clase a otra clase. Te voy a mostrar un ejemplo de cómo hacer
esto en JavaScript. Aquí yo tengo una clase Animal que tiene un
constructor. Puedes notar que el constructor recibe un nombre que se
utiliza para actualizar la propiedad «nombre» dentro de esta
clase. Luego esta clase también tiene un método «hablar» en donde
se hace un console.log con esta información. Yo aquí he definido otra
clase que se llama «Perro» y puedes notar que estoy utilizando esta
sintaxis aquí, ya que yo quiero que «Perro» pueda heredar esta
propiedad y este método. Entonces, para eso llamo el keyboard
«extend» y llamo a la clase de la cual quiero que herede estos
valores. Luego, dentro del constructor de «Perro» puedes notar que
también recibe un nombre, al igual que animal, pero también hay un
valor extra: «raza». Este no es parte de la clase animal, por lo tanto
yo defino que «Perro» tiene una propiedad que se llama «raza» para
poder guardar el valor. Aquí, para poder actualizar el valor de
«nombre» dentro de la clase padre utilizo la función «super».
«Super» lo que hace es que llama al constructor de la clase
padre, Entonces, al pasarle yo el valor de nombre se actualiza el
nombre en la clase padre. Luego aquí, yo he definido un método
nuevo que se llama «ladra». Cuando se llama esta función se muestra
este valor en la consola. Ya con esto, entonces, yo puedo crear una
instancia de Perro y pasar el nombre y la raza del perro. Con
esto, entonces, yo ya tengo acceso a todas las propiedades y
los métodos de ambas clases. Puedes notar que yo puedo llamar el
método «hablar» que fue definido en la clase Animal más arriba, y
puedo llamar el método «ladra» que fue definido dentro de la clase
Perro.
Objetos windows y document en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
A la hora de correr aplicaciones JavaScript en el navegador hay
dos objetos que podemos utilizar para obtener información sobre
el navegador y también para poder acceder a los elementos en la
página. Estos objetos son el objeto «window» y el objeto
«document». Aquí te voy a mostrar cómo acceder y utilizar estos
objetos. Yo he creado una aplicación JavaScript que estoy
cargando utilizando Chrome. Luego aquí, puedes ver la vista de las
herramientas para el desarrollador. Tú puedes abrir estas
herramientas si te diriges al panel de «View» o Vista y te diriges a las
opciones de herramientas del desarrollador o «Developer». Este panel
ofrece varias opciones y entre ellos es el JavaScript Console. Aquí
puedes ver los console.log que ejecuta el código y también
puedes ejecutar código JavaScript. Los objetos «window» y
«document» son objetos que viven a nivel global. Esto significa que tú
puedes acceder a ellos en cualquier parte del código JavaScript. Si yo
me dirijo a la consola del navegador, puedo escribir aquí la palabra
«window» y puedes ver aquí que la consola me muestra la
opción para poder ver este objeto. Este es el objeto raíz del
navegador. Puedes ver que tiene un sinfín de propiedades y
métodos, todos relacionados a la instancia de la pestaña de
Chrome. Hay mucha información que podemos obtener sobre el
navegador utilizando este objeto. Una de esta información que
podemos leer es el tamaño de la ventana, como puedes ver aquí. Esto
es útil cuando tú debes adaptar algún contenido dependiendo del
tamaño de la ventana del navegador. El otro objeto que te quiero
mostrar es el objeto «document». El objeto «document» en sí es un
objeto hijo del objeto «windows», pero también podemos acceder a él
directamente digitando el nombre en la consola. El objeto
«document» hace referencia al documento HTML. Como puedes ver
aquí, a través de este documento podemos acceder a todas las
etiquetas dentro de la página y así poderlas manipular. En este
ejemplo que he puesto aquí, puedes notar que yo tengo una galería
de imágenes con robots. Y luego aquí he agregado un botón. A la
hora de hacer clic en este botón, puedes notar que se muestra este
popup. Este popup se abre a través del objeto «window». Si yo le
hago «Cancel» se muestra este mensaje, pero si yo hago clic en el
botón «OK», me envía a otra URL. Te voy a mostrar el código de esta
aplicación. Yo aquí en Visual Studio ya tengo el código de la página
que vistes anteriormente. Este es el documento HTML. Aquí tengo los
estilos que le da colores y formas a la galería y al botón. Y aquí tengo
las etiquetas que se encargan de cargar las imágenes, renderizar el
botón y también llaman el archivo JavaScript con el código. Dentro del
código JavaScript tengo estas constantes que toman el ancho y el
largo de la página para poder mostrarlas en la consola del
navegador. Aquí puedes notar que estoy utilizando el objeto Windows
para obtener estas dimensiones. Luego aquí, a través del objeto
«windows», estoy accediendo al objeto «document». Yo podría
también tener este código de esta manera y funcionaría igual. Luego
aquí, con este código, estoy obteniendo la instancia del botón y luego
le agrego un evento de clic para que cuando el usuario presione el
botón, el objeto «windows» abra la ventana de confirmación que
vistes anteriormente. En caso de que el usuario haga clic en el botón
«OK», tengo este código aquí en donde se muestra otro popup al
usuario y luego con esta propiedad yo puedo cambiar el url de la
página y dirigirme a otro enlace. Puedes notar aquí que yo estoy
utilizando el objeto «windows» para poder manipular el navegador.

Conociendo el DOM y métodos de JavaScript para

manipularlo

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Con el objeto «document», nosotros podemos tener acceso a los
elementos dentro del archivo HTML. Si yo pongo «document» en la
consola, puedes notar que la consola me muestra todas las
etiquetas dentro del documento. El ordenamiento de estos elementos
es un ordenamiento de tipo árbol. Esto significa que los elementos
pueden estar anidados unos dentro de otros al igual como las ramas
de un árbol. Como aquí, por ejemplo, yo tengo la etiqueta del
«header». Luego tengo la etiqueta que contiene las imágenes de la
galería. Tengo otra etiqueta que es un botón, luego tengo un
texto, tengo otro botón y tengo la etiqueta de «script» que se
encarga de cargar el JavaScript. Dentro de la galería, yo también
tengo una lista de imágenes. Y si así lo quisiera, podría tener otro
«div» aquí adentro y ese «div» podría contener más elementos. Es
por esta razón que nosotros observamos estos datos con una forma
de árbol. JavaScript ofrece métodos y maneras para poder acceder a
estos elementos y también nosotros podemos acceder a esta lista de
elementos utilizando el elemento raíz, que sería «document». Aquí yo
tengo el código HTML de la página que vistes anteriormente. Puedes
notar que tengo el CSS y también tengo las etiquetas que vimos en la
consola. Yo aquí dentro del JavaScript he puesto algunos métodos y
algunas constantes para ver cómo está compuesto el árbol dentro de
este documento. Aquí puedes notar que yo estoy utilizando el objeto
«document» y la propiedad «childNodes». «childNodes» retorna todos
los nodos hijos, que incluye todos los nodos de tipo elemento, los
nodos de texto y comentarios. Esto significa que aquí, en el HTML,
puedes notar que yo tengo algunos comentarios y también tengo
unos nodos de texto. Nodos de texto significa texto que no está
envuelto en una etiqueta HTML. Esta propiedad me va a devolver
todos los nodos hijos del documento. Por otro lado, la propiedad
children retorna los elementos hijos, excepto los nodos que son texto
y los nodos que son comentario. Nosotros, por lo general, donde
trabajamos más es en la parte del body del HTML. El body es esta
etiqueta que puedes ver aquí y para poder acceder a ella debemos
hacer «document.body». JavaScript ofrece varios métodos que
podemos utilizar para buscar los elementos dentro del árbol. Como
por ejemplo aquí, yo estoy utilizando este método para encontrar
todos los elementos que tengan este nombre de clase. Sabemos que
en el HTML hay dos elementos que tienen este nombre de clase. Esta
función me va a retornar un arreglo. Luego, utilizando un «for of», yo
puedo recorrer estos elementos y cambiar algunas propiedades si así
lo deseo. Como aquí, yo estoy cambiando el ancho del borde. A estos
elementos, en general, los nodos hijos y los elementos
que obtenemos a través de estas funciones, se les llama DOM, D O
M, que significa en inglés «Document Object Model». El DOM es
básicamente una interfaz que nos ofrece JavaScript para nosotros
poder acceder a los elementos del documento y así poder
manipularlos.

Obteniendo referencia de elementos en el DOM usando

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Para nosotros poder manipular elementos en el DOM, primero
debemos obtener una referencia a estos. Aquí te voy a mostrar varios
métodos que ofrece el DOM para poder obtener esta referencia. Aquí
tengo un documento HTML que contiene varias etiquetas. Tengo un
título que tiene una clase que se llama «clase-titulo», un «div» que
tiene una clase «galeria», tres imágenes, cada una con un
nombre, dos botones que tienen la misma clase, como se puede ver
aquí, pero diferente ID. Y luego tenemos la etiqueta «script» que se
encarga de cargar el archivo JavaScript. En el documento
JavaScript yo tengo varios ejemplos de cómo obtener referencias a
los elementos en la página HTML. El primero que te quiero mostrar, y
es el más común, es el de obtener un elemento por su ID. Aquí los
botones tienen su propio ID: botón uno y botón dos. Entonces, para
poder recuperar la referencia de esos botones, yo puedo llamar el
método «getElementsById» a través del objeto «document» y paso el
ID del elemento que quiero recuperar. Este, por lo general, es el
método más común que se utiliza, pero también hay muchos otros
que se pueden utilizar. Otro método que te quiero enseñar es el
«getElementsByClassName». Como el nombre lo indica, este recobra
todos los elementos que coincidan con este nombre de
clase. Significa que el valor de retorno de este método va a ser un
arreglo. En este caso, va a ser un objeto. En caso de que el elemento
no se encuentre, voy a obtener un valor de null. Pero en este
escenario, en caso de que no se encuentre ningún elemento, voy a
obtener un arreglo vacío. Aquí, como yo tengo dos botones con la
misma clase, yo espero recobrar un arreglo con dos botones
adentro. Este funciona muy similar al que tenemos aquí, con la
diferencia que este utiliza el nombre de la etiqueta. Como en este
caso yo quiero recobrar todos los elementos que tengan la etiqueta
«img», que en la página tenemos tres, al igual, voy a obtener un
arreglo. Otro método que te quiero mostrar es el
«querySelector». Este método recibe como parámetro un selector de
CSS. Esto significa que para poder utilizar este método debes estar un
poco familiarizado con CSS y cómo crear selectores. En este selector
yo quiero recobrar elementos que tengan el ID de botón uno. Este
método solamente me va a devolver un objeto, el primero
que coincida con este selector. En caso de que el objeto no se
encuentre, voy a obtener un valor de «null». «querySelectorAll»
funciona igual que «querySelector», con la diferencia que este
método me va a devolver un arreglo. Significa que, como parámetro,
yo debo pasar un selector de CSS que coincida con todos los
elementos que quiero recobrar. En este caso serían los botones. Este
método me va a devolver un arreglo vacío en caso de que no se
encuentre ningún elemento. Otro método que podemos utilizar es el
«getElementsByName». Este igual devuelve un arreglo con todas las
etiquetas o elementos que coincidan con este nombre. Aquí yo estoy
pasando como parámetro «robot3», que sabemos que es este
elemento que tenemos aquí. Por lo tanto, yo esperaría que este
arreglo solamente va a tener un elemento. Otro método disponible es
la función «closest». Aquí yo paso un selector de CSS y aquí puedes
notar que en lugar de llamar la función sobre el document, yo lo estoy
llamando sobre un elemento. «closest» me va a devolver el elemento
más cercano que utiliza este selector de CSS. Como en este caso yo
estoy llamando la función sobre «closest» y paso el selector de
CSS para la clase «galeria», significa que el resultado debería darme
este «div». Cabe resaltar que este método solamente funciona con
elementos padres o hijos. Significa que este método solamente
funciona sobre la misma rama del DOM. Por lo que yo, si intentará
buscar otro elemento que está en otra rama, no lo va a poder
encontrar. Como en este ejemplo que te muestro aquí. Estoy
llamando la función sobre este mismo elemento «robot3» y estoy
intentando buscar algún elemento que tenga esta clase. En este caso,
voy a obtener un valor de «null», ya que si te fijas en el HTML, la
galería y el botón son hijos directos de la etiqueta «body». Por lo
tanto, son ramas diferentes. Y el último método que te quiero mostrar
en la propiedad «parentElement». Todos los elementos contienen
esta propiedad, la cual apunta al elemento padre que contiene el
elemento.

Creando elementos de DOM usando JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Con JavaScript podemos crear elementos HTML y agregarlos al
DOM. Te voy a mostrar las diferentes maneras como puedes hacer
esto. El primer método, que es el más común, es utilizar la función
«createElement», que se puede acceder a través del objeto
«document». Esta función recibe como parámetro el nombre de una
etiqueta HTML. Como ves, en este caso yo estoy creando un
botón. Luego yo puedo acceder a las diferentes propiedades de
este objeto HTML y así poder configurarlo. Yo aquí estoy agregando el
nombre de la clase, el texto que va a tener el botón y luego,
accediendo al body de la página, puedo llamar a la función «append»
que va a agregar el elemento al DOM. Cuando estamos creando y
agregando varios elementos a la vez, es recomendable utilizar un
fragmento. Un fragmento es un contenedor que podemos utilizar para
agregar varios elementos y luego adjuntarlos al DOM todos al mismo
tiempo. Aquí te voy a mostrar un ejemplo de cómo hacer esto. Tengo
un arreglo que contiene una lista de URLs de varias imágenes. Luego
obtengo la referencia al «div galeria» que se encuentra en el
HTML, como podemos recordar. Para eso utilizo el método
«getElementsByClassName» y luego por el índice accedo al
elemento, recordando que esta función siempre retorna un
arreglo. Luego creo el fragmento. Para eso, entonces llamo
«document. createDocumentFragment». Aquí recorro las URLs dentro
del arreglo. Por cada URL creo un elemento que sería un tag de
imagen. Luego actualizo la propiedad de source donde paso la URL de
la imagen según su índice y luego le asigno un área «label»
como puedes ver aquí. Al final, yo adjunto el elemento imagen al
fragmento. Luego, para poder agregar todas las imágenes al DOM al
mismo tiempo, hago un «append» del fragmento dentro de la
galería. Como te mencioné anteriormente, este método es
recomendable cuando tenemos que agregar varios elementos al
mismo tiempo. Esto porque el método «append» puede ser un poco
costoso a nivel de memoria y procesamiento para el
navegador. Entonces, es por esta razón que cuando tienes que
agregar muchos elementos, es mejor utilizar un fragmento. Otro
método que podemos utilizar para crear elementos es
«cloneNode» Esto lo que hace es que clona un elemento HTML. Como
en este caso, yo estoy clonando la galería como puedes ver aquí. Esta
función recibe un parámetro booleano. En caso de que el parámetro
sea «true», se va a incluir todos los nodos hijos a la copia y en caso
de que sea «false» se hará una copia superficial del elemento. Otro
método que te quiero mostrar es el «createTextNode» Esto lo que
hace es que crea un nodo de texto. Significa que esto es un nodo de
texto que no está envuelto en una etiqueta HTML. Luego, estos
métodos que te voy a enseñar, son otras maneras en que puedes
agregar HTML al DOM. Cabe recalcar que estos métodos no son
seguros de utilizar, al menos de que valides y sanitices el string HTML
que utilizarás en estos métodos. El primero es utilizando el
«innerHTML». Esta es una propiedad que contienen los
elementos dentro del DOM. Con esto tú puedes pasar un string HTML,
como puedes ver aquí, y el browser lo renderizará. Igual sucede con
«insertAdjacentHTML». Como puedes ver aquí, recibe un string que
representa un código HTML. Esta función lo que hace es que
renderiza este HTML a la par del elemento donde estás llamando la
función. Y luego la propiedad «outerHTML» lo que hace es que
reemplaza este elemento por el código HTML que estás pasando
como string. Como te mencioné anteriormente, estos métodos no son
seguros debido a su naturaleza de string a la hora de pasar
los elementos al DOM. Una persona maliciosa puede aprovecharse de
este sistema para poder inyectar un script a la página y que la página
lo ejecute. Es por esta razón que estos métodos no son
recomendados a menos que sigas las precauciones adecuadas para
evitar algún problema en la página.

Manipulando el CSS a un elemento de DOM usando

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Uno de los objetivos de utilizar JavaScript en una página es
poder modificar sus elementos. Aquí yo tengo una página web que
contiene varias imágenes de robots. Esta página incluye dos
botones. Uno lo que hace es que cambia los estilos del borde de las
imágenes y el fondo de la página, como puedes ver aquí. El otro
botón lo que hace es que reinicia los estilos a su estado original. Te
voy a mostrar cómo yo he hecho esto en JavaScript. Aquí en el código
puedes encontrar el documento HTML, el cual contiene el CSS y todas
las etiquetas que renderizan la página que vistes
anteriormente. Luego, dentro del código de JavaScript, yo tengo todo
el código que ejecuta la funcionalidad que vistes. Primero aquí yo
recobro la referencia a cada uno de los botones y a la lista de
imágenes con este código. Luego tengo varias funciones, una que se
encarga de generar un color aleatorio y otra función que cambia el
fondo de la página. Puedes notar aquí que esta función llama
«obtenerColorAleatorio» y luego accede al body de la página para
poder cambiar el color de fondo. Aquí puedes notar esta propiedad
«style» que pertenece al body. Nosotros podemos utilizar esta
propiedad para cambiar los estilos de un elemento. Aquí tengo otra
función que se encarga también de cambiar el borde de las imágenes,
como puedes ver aquí. Se genera un color aleatorio y luego se pasa a
las propiedades CSS del borde. Igualmente, estoy utilizando la
propiedad «style» para poder acceder al CSS del borde. Aquí tengo
los eventos de clic de cada uno de los botones. Puedes notar que el
botón «Cambiar» llama estas dos funciones. Y el botón «Reiniciar» lo
que hace es que elimina los estilos agregados al body de la página. Y
lo mismo sucede con las imágenes. Básicamente, «style» es un objeto
dentro de cada uno de los elementos HTML que contiene propiedades
CSS que nosotros podemos utilizar para cambiar los estilos de un
elemento.

Recorriendo elementos hijos de un elemento DOM en

JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Hay varios métodos que podemos utilizar para recorrer los
nodos hijos o elementos hijos dentro del body de un documento
HTML. Aquí yo tengo una página que contiene varias etiquetas. Una
de estas es un «div» que contiene una lista de imágenes. Y aquí
puedes ver varios «divs» que están anidados uno dentro del
otro hasta llegar a un nivel diez, como puedes ver aquí. Para recorrer
las imágenes, simplemente lo que yo debo hacer es obtener la lista
de estas utilizando la función «getElementsByTagName». Con esto,
yo obtengo un arreglo de todas las imágenes. Al ser un arreglo,
entonces, yo puedo utilizar un «for» loop para poder recorrer cada
uno de los elementos. Pero ¿qué pasa, por ejemplo, en el caso de los
«divs»? Como podemos ver, cada uno de los «divs» está anidado uno
dentro del otro. Esta lógica es un poco más compleja. Hay varias
maneras en que esto se puede hacer. Una de las más comunes es
utilizar recursión. Recursión es una técnica en programación donde
una función se llama a sí misma. En este caso, yo he creado una
función que se llama recorrer elementos. Esta función recibe como
parámetro un elemento HTML. Lo primero que hace es un console.log
del nombre de la etiqueta del elemento. Y luego utiliza un «for» loop,
como puedes ver aquí, para recorrer todos los elementos hijos del
elemento que se recibió como parámetro. Luego, la función se llama
otra vez, como puedes ver aquí, y se pasa como parámetro el
elemento hijo. Luego, para empezar la recursión, yo llamo la función
recorrer elementos y puedes notar que estoy enviando el nodo raíz, o
sea el nodo «body». Esta función lo que va a hacer es ir recorriendo
cada uno de los nodos anidados dentro del nodo padre. Significa que
por cada uno de estos «divs» la función se va a ejecutar. Y luego de
que la función se ejecute, se va a llamar otra vez nuevamente
pasando como parámetro el nodo hijo hasta llegar al nivel diez. En
este momento que llega al último nodo, la recursión se va a
detener. Este es un ejemplo de cómo hacer este tipo de
funcionalidad. Puede ser que tal vez tú tengas alguna otra idea de
cómo resolver este problema. Lo más importante aquí es saber que
hay mucha flexibilidad en el tipo de soluciones que podemos
encontrar a un problema y podemos ser creativos a la hora de
hacerlo.

11.- Entendiendo el código asíncrono en javascript

¿Qué es código asíncrono en JavaScript?

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
¿Qué es el código asíncrono en JavaScript? Para entender el código
asíncrono, primero debemos entender que es el código síncrono. El
código síncrono es el que ejecuta un comando uno detrás del
otro. Por lo general, la mayoría del código que escribimos en
JavaScript se ejecuta síncronamente. Como en este ejemplo.
Imaginemos que tenemos una aplicación de JavaScript con estas
líneas de código. Este console.log «Como estás?» se va a ejecutar
luego de que este console.log ha terminado e igual la declaración del
arreglo e igual el recorrido de este arreglo. Cada operación se va a
ejecutar una detrás de la otra cuando la anterior haya terminado. El
código síncrono es predecible. Esto significa que sabemos cuándo va
a empezar y sabemos cuándo va a terminar. El problema es que no
todas las operaciones de una aplicación web son predecibles o no
sabemos con exactitud cuándo van a terminar. Para eso, entonces,
necesitamos conocer la definición de
operaciones asíncronas. Ejemplos de operaciones asíncronas pueden
ser la carga de una página web, cuando el usuario hace clic en un
botón o interactúa con la página. Estas acciones dependen del
usuario y no de la aplicación en sí o la carga de información desde un
servidor remoto. Esta operación es asíncrona, ya que el tiempo de
carga puede variar debido a muchos factores. Esta puede
variar depende de qué tan rápido sea el servidor para responder
la petición o que tan lento o rápido sea el Internet del
usuario. Entonces, para esto debemos aplicar código asíncrono. Estas
son técnicas de la programación que permiten recibir una respuesta
luego de que una operación asíncrona ha terminado. El código
asíncrono permite la ejecución de otras tareas mientras la operación
asíncrona se ejecuta. Los motores de JavaScript tienen sistemas
especiales que manejan operaciones síncronas y asíncronas
eficientemente. El gráfico que ves en pantalla es un ejemplo de cómo
se ejecutan las operaciones síncronas y asíncronas. Aquí puedes ver
que hay una cadena de operaciones. Primero se ejecuta una
operación o comando síncrono. Luego, imaginemos que viene una
asíncrona. En este caso se ha pedido una carga de información a un
servicio remoto. Esta operación se ejecuta y se deja a la
espera. Mientras esta se ejecuta o mientras el navegador
espera recibir esta información desde el servicio remoto, otras
operaciones síncronas se van ejecutando. Cuando el navegador
reciba esta información, entonces el «callback» o la respuesta se va a
ejecutar. Es importante recalcar aquí que las operaciones síncronas
siempre van a tener precedencia sobre las asíncronas. Esto significa
que este «callback» o respuesta no se va a ejecutar hasta que todas
las operaciones síncronas se hayan ejecutado.
Métodos setTimeout y setInterval

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
JavaScript ofrece varios métodos que podemos utilizar para
ejecutar código asíncronamente. En esta lección te voy a explicar dos
métodos: setInterval y setTimeout. Para eso, entonces, vamos a ver
un ejemplo. Aquí yo tengo una función que, como puedes ver, toma la
hora y fecha actual y, luego, muestra la hora utilizando este
formato. Luego,con setInterval, yo voy a hacer que esta función
se ejecute una vez cada segundo. Para eso, entonces llamo la
función, paso como parámetro la función que quiero que se ejecute y
paso un valor en milisegundos. Esto significa que un valor de mil va a
hacer que esta función se ejecute cada segundo. Aquí pueden notar
que yo estoy guardando el valor resultante en una constante. Esta
función setInterval cuando se ejecuta devuelve un ID. Esta ID lo
podemos utilizar para cancelar este interval. Ahora aquí yo voy a
ejecutar el código en la consola. Puedes notar aquí cómo el código se
ejecuta una vez cada segundo. Ahora te voy a mostrar el otro método
setTimeout. Este método lo que hace es que ejecuta una función
luego de que cierto tiempo ha pasado. A diferencia de setInterval, en
setTimeout, la función se va a ejecutar solamente una vez. Esto
significa que, en este código, cuando cinco segundos han pasado, se
va a llamar esta función clearInterval. ClearInterval lo que hace es
que elimina o limpia un intervalo. Aquí puedes ver que yo estoy
pasando el ID del interval que creé anteriormente. Con este
setTimeout significa que este Interval solamente se va a ejecutar por
cinco segundos. Es por esta razón que tú viste aquí que el intervalo se
detuvo luego de que algunos valores se mostraron. Si no fuera por
este setTimeout, el setInterval se seguiría ejecutando hasta que la
aplicación termine. Al igual que el setInterval, nosotros podemos
eliminar un setTimeout o cancelarlo. Esto es a través del ID que el
setTimeout retorna cuando se crea. Aquí puedes ver este ejemplo en
donde, con otro setTimeout, yo estoy eliminando este timeout más
arriba. Digamos que este SetTimeout cancela el que tenemos
aquí. Para poder eliminar o cancelar un setTimeout, llamamos la
función clearTimeout. Entonces, si yo ejecuto el código, puedes ver
que el setTimeout se cancela y el intervalo se sigue ejecutando
indefinidamente.

Métodos callback

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Como el comentario aquí en el código lo indica, una función callback
es una función que se pasa como argumento a otra función y se
ejecuta después de completar esa función. Este es un término muy
común utilizado en JavaScript y aquí te voy a mostrar un ejemplo de
una función callback. Yo aquí tengo una función, hacer algo
asíncrono, que recibe una función como parámetro. Luego, dentro de
esta función, yo tengo un setTimeout. En este caso, cuando el
setTimeout se termine, se va a obtener un valor aleatorio, como
puedes ver aquí, y, luego, se va a llamar la función que se pasó como
parámetro y pasar el resultado. Esta técnica que ves aquí es la
técnica de función callback. Esto significa que yo puedo pasar
cualquier función a esta función padre. En este caso, por ejemplo, yo
tengo una función que se llama "procesar resultado" que recibe el
resultado del callback y lo muestra en la consola. Entonces, a la hora
de llamar "hacer algo asíncrono", pasamos esta función como
parámetro. Puede ser que esta sintaxis te sea familiar, ya que
muchos métodos en JavaScript utilizan callbacks como son los
métodos de arreglos o los métodos setTimeout o setInterval.

Promesas en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las promesas son un objeto especial que podemos utilizar
para ejecutar código asíncrono. Estas tienen una particularidad y es
que nosotros podemos utilizar las promesas para indicar si una
operación asíncrona terminó exitosamente o no. Para crear una
promesa, utilizamos el keyword new y llamamos la clase Promise. El
constructor de esta clase recibe como parámetro una función. Esta
función recibe dos funciones como parámetro. El primer parámetro o
función la utilizamos para resolver la promesa de una manera
exitosa y la segunda la utilizamos para fallar la promesa, o sea, para
indicar de que hubo un error dentro de la ejecución del
código. Aquí, en este ejemplo, yo tengo una función que, como
puedes notar, retorna un objeto promesa. Dentro de esta promesa yo
tengo un setTimeout que calcula un número aleatorio y luego hace
una comparación para obtener un valor booleano. En caso de que
este valor sea true, entonces, la promesa se va a resolver
exitosamente y, si no, entonces se va a rechazar. Aquí puedes ver el
uso de esta función. Yo llamo la función recordando que el objeto
promesa se va a retornar. La función then es una función dentro de la
clase Promise que se utiliza para recibir la respuesta del código
asíncrono. Significa que then se va a ejecutar hasta cuando este
se haya terminado o hasta cuando la promesa haya sido resuelta
exitosamente. Entonces, este mensaje que recibirías aquí es el
mismo mensaje que se pasa a la hora de resolver la promesa. La
función catch es otra función disponible dentro de la clase
Promise. Esta función se encarga de detectar errores. Significa que, si
la promesa rechazada, el mensaje de error que recibirás será este
error que ves aquí. Ahora vamos a ver este código en
ejecución. Puedes notar que la ejecución del código duró un
segundo, como se indica aquí, en el setTimeout, y la promesa
se completó exitosamente. Yo puedo seguir ejecutando este código
hasta que, en algún momento, la promesa falle. Las promesas son
muy útiles cuando tenemos que crear operaciones asíncronas, en
especial, cuando tenemos que cargar recursos desde un servicio
remoto.

Funciones asíncronas en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Las funciones asíncronas son funciones que ejecutan código
asíncrono. Estas funciones fueron creadas para simplificar la
sintaxis de las promesas. Para definir una función asíncrona
simplemente debemos adjuntar el keyword async antes de la
declaración de la función, como puedes ver aquí. Cuando hacemos un
return desde una función asíncrona, estas funciones siempre van a
retornar un objeto promesa. Aquí te voy a mostrar un ejemplo de
cómo utilizar esta función. Yo aquí tengo una función que se llama
Obtener usuario, que, como puedes notar, retorna una promesa. Esta
promesa ejecuta setTimeout y, cuando este termina, va a resolver la
promesa en donde se pasa un objeto. Este objeto tiene un valor de
nombre y un valor de edad. Luego, dentro de la función Obtener
información usuario, yo estoy llamando la función Obtener
usuario, como puedes ver aquí. Aquí yo estoy utilizando el keyword
await. Esto porque esta función devuelve una promesa. Yo necesito
utilizar este keyword para indicar que yo estoy esperando este
resultado. En caso de que no lo utilice, el usuario va a recibir el
valor del objeto promesa en sí. Pero a mí no me interesa el objeto, a
mí me interesa el resultado. Entonces, por esta razón, debo utilizar
esta palabra clave. Ya con esto, entonces, cuando este setTimeout
termine, usuario va a obtener el resultado del objeto. Aquí, entonces,
luego de que esto se haya ejecutado, yo puedo hacer un console
log. Aquí puedes notar que yo estoy utilizando un try y un catch. Esta
es una sintaxis que JavaScript tiene para detectar errores en el
código. Significa que con try yo puedo crear un bloque de código que
va a ejecutar una acción. En caso de que haya un error en esta
acción, entonces, catch se va a ejecutar. Eso es lo que llamamos en
programación detección y manejo de errores. Entonces, en este caso,
ya que yo no estoy utilizando promesas, yo puedo utilizar esta
sintaxis para ejecutar la promesa y detectar error en caso de que algo
suceda. Ahora podemos ver el código en ejecución. Aquí puedes ver
el resultado de llamar la función Obtener usuario.

12.- Eventos en Javascript

¿Que son eventos y escuchadores de eventos?

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En programación, los eventos son acciones que suceden fuera del
control de una aplicación. Cuando hablamos de desarrollo de
aplicaciones web, los eventos son los que suceden dentro del
navegador. Cuando interactuamos con una página o una aplicación
web, hay muchos eventos que se generan por la acción del
puntero, por la carga de recursos o la carga de la página en sí. Aquí te
voy a mostrar algunos eventos dentro de esta página. Puedes notar
que esta página tiene una galería de imágenes y, en el fondo,
también tiene un formulario. Cuando nosotros hacemos scroll en la
página, este es un tipo de evento. Luego también, cuando hacemos
clic en alguno de los elementos de la página, este es otro tipo de
evento. Otro tipo de evento muy común es cuando escribimos texto
dentro de un formulario. También cuando hacemos clic en un
botón. Yo, en el código de esta página, he agregado varias funciones
que escuchan estos eventos. Estas funciones son callbacks que se
ejecutan cuando un evento sucede. En inglés este tipo de funciones
se llaman event listeners o escuchadores de eventos. Este es un
término que debes conocer ya que es muy común dentro de la
programación web.

Eventos y addEventListener en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los eventos son acciones que suceden en el navegador que
están fuera del control de una aplicación web. Para que una
aplicación pueda reaccionar y ejecutar una
funcionalidad, dependiendo del evento que haya sucedido, debemos
agregar un Event Listener. Hay dos maneras de poder agregar estos
escuchadores de evento. El primer método que te quiero mostrar es
utilizando las propiedades disponibles dentro de las etiquetas
HTML. Cada tipo de evento tiene un nombre, por ejemplo, el evento
de click se llama onclick, como puedes ver aquí. Esta es una
propiedad HTML que recibe como parámetro un código de
JavaScript. Este código de JavaScript va a llamar una función
que recibe un parámetro, como puedes ver aquí. Hay muchos y muy
variados tipos de eventos y cada evento tiene su propio nombre. Esto
significa que, si tú quisieras escuchar todos los eventos dentro de
esta imagen, tendrías que poner una propiedad y llamar una función
por cada uno de estos eventos. En este código de ejemplo, yo tengo
esta función que ha sido declarada dentro del archivo de JavaScript
que puedes ver aquí. Esta función recibe el número y luego hace un
console log para mostrar cuál robot fue presionado. Este es un
método rápido de poder agregar un Event Listener a un evento. Pero,
por lo general, no es un método recomendado, ya que se vuelve muy
complicado de mantener cuando una aplicación web se hace muy
grande. Es por esta razón que es mejor utilizar esta otra función. La
función de la que estoy hablando se llama addEventListener, como
puedes ver aquí. Esta es una función disponible dentro de todos los
elementos HTML de una página y, con esta función, nosotros
podemos agregar un event Listener a cualquier tipo de evento. Para
poder utilizar esta función primero debemos definir el target. El target
es el elemento donde se va a ejecutar la acción. Por ejemplo, si yo
quiero agregar un listener al evento de scroll de la página, yo debo
agregar ese evento al objeto document, como puedes ver
aquí. Entonces, para hacer esto, yo llamo Document
punto addEventListener, debo pasar el nombre del evento y luego
una función. Esta función recibe un objeto que se llama evento. Este
objeto tiene propiedades que describen la acción o el evento que
acaba de suceder. Y, luego, esta función sería el Event
Listener. Significa que esta función se va a ejecutar cuando
este evento suceda. Aquí, en este otro ejemplo, yo he agregado un
listener al Windows, como puedes ver aquí, ya que yo quiero rastrear
cuando el tamaño de la ventana del navegador haya cambiado. Este
es un evento que solamente se puede rastrear a través del
objeto window del navegador. En este otro ejemplo, yo he agregado
un listener al evento de input de un campo de texto, como puedes ver
aquí. Esto significa que el usuario, cada vez que escriba una letra
dentro de este campo de texto nombre, esta función se va a
ejecutar. En este caso, ya que yo quiero escuchar el evento en un
campo específico, primero yo debo obtener su referencia utilizando la
función getElementById.

Objeto Event en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Los objetos Event son objetos que contienen información sobre
el evento que acaba de suceder. Cada objeto event es diferente
acorde al tipo de evento que haya sucedido. Un objeto Event del
evento scroll no va a ser igual que el objeto Event de un evento
Resize. Aquí, en esta página, yo he agregado código para registrar
Event listeners a varios tipos de eventos. El primer evento que
podemos notar es este objeto que puedes ver aquí. Este evento se
ejecuta cuando hacemos scroll en la página. Al hacer un console log
del objeto Event, puedes notar que hay bastante información aquí
sobre lo que ha sucedido con este evento, incluido un timestamp. Un
timestamp es un número que describe la hora y el momento actual en
que sucedió algo. Entonces, esta propiedad nos da información sobre
el momento en que sucedió este evento. Otro evento que podemos
analizar es el input event. Puedes notar que el objeto Event de este
evento tiene información diferente, incluido la información que fue
agregado al campo de texto. Hay algunas propiedades que son
comunes entre todos los eventos. Una de estas es el target. El target
apunta al elemento HTML en donde se generó el evento. Otro evento
que también podemos analizar es el evento de clic, como puedes ver
aquí. Puedes notar que el nombre ha cambiado. Cuando escribíamos
texto en el input, el evento se llamaba input event, pero,en este caso,
se llama pointer event, y puedes notar también que este tipo de
evento tiene aún más información. Este evento nos da coordenadas X
y Y de la posición donde sucedió el click en la página. También tiene
información sobre el target y demás, como puedes ver aquí. Este tipo
de evento es muy importante, por ejemplo, cuando estás
construyendo una aplicación web interactiva, un juego o algo que
requiera el rastreo de la posición del mouse en la pantalla. JavaScript
tiene muchos más eventos que podemos utilizar para crear
aplicaciones interactivas. Aquí yo te he mostrado una lista corta, pero
tú puedes consultar la documentación en línea donde puedes
encontrar la lista entera de eventos de JavaScript.

Método removeEventListener

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Con JavaScript, nosotros podemos agregar funciones listener que
escuchan y ejecutan código cuando un evento sucede y nosotros
también podemos eliminar esos listeners, como en este ejemplo. Yo
he agregado un listener que escucha los ticks de esta página, como
puedes ver aquí. Luego de haber hecho clic unas seis veces, puedes
notar que el listener ya no funciona. Esto sucede porque en el código
yo tengo esta funcionalidad que puedes ver aquí. Esta línea de código
agrega un Event Listener al evento de clic en el document. Dentro de
esta función, puedes notar que yo tengo un contador. Cada vez que el
usuario hace clic en la página, el contador aumenta y, cuando el
contador es mayor a cinco, yo llamo a esta función: remove event
listener. Esta función lo que hace es que elimina el listener del
objeto. Entonces, para llamar esta función, debo llamar primero el
document punto RemoveEventListener, pasar el nombre del evento
donde registrado el listener y pasar la función. Puedes notar aquí que
yo estoy pasando la función por su nombre directamente. Yo no
puedo pasar una función que tenga el mismo código, ya que en ese
caso sería una referencia diferente y el remove listener no va a
funcionar. Entonces, para que esto funcione, debes pasar la función
Event Listener directamente a la función removeEventListener.

Método dispatchEvent

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Aquí, en este ejemplo, puedes notar que la consola me indica que yo
he hecho clic en la página tres veces, pero puedes notar que, cuando
yo refresco la página, yo no he hecho ningún clic. Esta funcionalidad
sucede por este código que ves aquí. Yo aquí he agregado un full loop
que se ejecuta mientras Y sea menor a tres. Luego, dentro de este
loop, yo estoy llamando la función dispatchEvent. Esta es una función
que está disponible dentro de todos los elementos HTML en el
DOM. Esta función sirve para lanzar eventos. Como puedes notar
aquí, yo estoy creando un nuevo objeto de tipo evento que es de tipo
click. Este tipo de funcionalidad es útil cuando nosotros necesitamos
probar el código de JavaScript. Cuando tú empieces a trabajar en
aplicaciones más complejas, deberás crear pruebas unitarias. Las
pruebas unitarias es código que prueba las aplicaciones web. Por lo
general, estas pruebas unitarias simulan la interacción del usuario
con una aplicación. Entonces, es probable que tú puedas utilizar este
tipo de funcionalidad para hacer esta simulación y así probar tus
funciones.

13.- Cargando Datos Remotos

¿Qué es JSON?

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Es común que las aplicaciones web se conecten a servidores
remotos para poder solicitar información. Esta información debe venir
en un formato específico para que la aplicación web pueda
entenderla. Uno de los formatos que más se usa actualmente es el
formato JSON. Los archivos JSON se distinguen por la extensión .json,
como puedes ver aquí. La sintaxis de este tipo de formato es muy
similar a JavaScript, como puedes ver aquí, con la diferencia de que
hay ciertas reglas específicas que los archivos JSON deben seguir
para que sea un archivo válido. Una de las reglas más importantes es
que la información debe organizarse en pares de nombre y
valor, como en este caso. Yo tengo un nombre que se llama Imágenes
y el valor es un arreglo de objetos, como puedes ver aquí. Los
nombres de los valores deben estar entre comillas dobles. En este
caso, las comillas simples no son válidos. Siempre se deben utilizar
comillas dobles en los archivos JSON. Luego, en este caso, puedes
notar que el archivo JSON empieza con llaves. Esto sucede porque
este JSON tiene una propiedad de imágenes que es un objeto, pero
también es válido tener un arreglo. Esto significa que tú puedes crear
un archivo JSON que contenga un arreglo de objetos. Otra regla que
es importante tener en cuenta es que todos los valores se separan
por comas. El último valor en una lista no debe llevar coma. Si no, vas
a recibir un error a la hora de leer el JSON. Y, como último, los strings
deben llevar comillas dobles, al igual que los nombres de las
propiedades.
Método fetch para cargar datos remotos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
El método fetch es el método que se utiliza en JavaScript para cargar
datos remotos. Esta función recibe una serie de parámetros para
poder configurar la petición al servidor remoto. En su forma más
sencilla nosotros solamente debemos pasar la URL del documento
que deseamos cargar, como en este ejemplo. En caso de que sea
necesario conectarse a un servidor remoto, es posible que tengamos
que pasar más parámetros a esta función. En este ejemplo,
solamente te quiero explicar los parámetros de la funcionalidad más
básica de esta función. Aquí yo estoy llamando al método para poder
cargar este archivo JSON. Este archivo JSON está en mi
computadora, entonces, yo solamente tengo que pasar el nombre del
archivo para que la función fetch lo pueda cargar. Esta función
retorna un objeto promesa. Significa que debemos utilizar la función
then para poder procesar la información luego de que el archivo ha
sido cargado. En la primera etapa puedes notar que tenemos un
objeto Response. Este objeto tiene información sobre la respuesta de
la carga del archivo. Una de las propiedades que tiene este objeto es
la propiedad Ok. Esta propiedad determina si la carga fue exitosa. En
caso de que esta propiedad tenga un valor falso, nosotros podemos
entonces manejar el error. En este ejemplo, pueden notar que yo he
envuelto la función fetch dentro de otra promesa. Esto es debido a
que yo he creado una función para ejecutar esta funcionalidad. La
razón de esto es que yo quiero que la función "cargar datos" retorne
el valor que se ha cargado o, si no, que retorne un error en caso de
que algún error haya sucedido a la hora de cargar los
archivos. Entonces, por esta razón, es que yo necesito el método
"rechazar" en caso de que haya algún error. Entonces, en este
ejemplo, imaginemos que este "if" no ha sido ejecutado y los datos se
pudieron cargar. El siguiente paso, entonces, es tomar el objeto
respuesta y llamar la función JSON. Esta función lo que va a hacer es
retornar el valor JSON o los datos JSON dentro de la respuesta. Puedes
notar que esta función también retorna una promesa. Entonces, por
esta razón es que debemos utilizar otra función then. Ya aquí, en este
punto, vamos a obtener los datos JSON. Entonces, en este caso, para
poder resolver la promesa, yo simplemente llamo la función
"resolver" y paso los datos. La invocación de la función fetch puede
ser mucho más compleja que este código que ves aquí, pero espero
que con este ejemplo hayas aprendido un poco a utilizar el método
Fetch.

Mostrando al usuario datos cargados remotamente

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Yo aquí tengo el ejemplo de una aplicación web, la cual contiene un
botón. Al hacer clic en este botón, un archivo JSON se carga y
se genera esta galería que puedes ver aquí. Te voy a mostrar cómo
generar estos elementos a partir de la respuesta de la carga del
archivo JSON. Dentro del código HTML, puedes notar que el
contenedor está vacío. Esto es porque los elementos de la galería se
generan utilizando JavaScript. Ya dentro del código JavaScript,
podemos encontrar varias cosas. Primero, podemos encontrar el
evento de clic del botón, como puedes ver aquí. Este listener del
evento Click se agrega cuando el evento DOM Content Loaded ha sido
disparado. Esto se hace para asegurarnos de que, a la hora de
intentar recobrar la referencia al botón, éste exista en la
página. Luego de que se hace clic en el botón, se llama la
función "Cargar galería". Dentro de esta función puede notar que yo
tengo un try y un catch. Esto es porque yo voy a cargar datos
remotos y es posible que se genere un error. Luego, puedes notar que
yo hago la carga de los datos utilizando esta función. Esta función
llama el evento Fetch que puedes ver aquí, más abajo. Luego de que
los datos han sido cargados, entonces, yo recorro el arreglo de
imágenes que se encuentran dentro del archivo JSON. El archivo JSON
es este que puedes ver aquí. Puedes notar que el archivo tiene un
arreglo de objetos. Cada objeto contiene una URL, un valor alt, un
título de la imagen y una descripción. Entonces, dentro de este
forEach, yo creo los elementos para renderizar el título, la
descripción, la imagen... Y luego creo un div que sirve como
contenedor de la imagen. Luego de que he creado cada uno de estos
elementos, puedes notar que yo utilizo los valores del JSON para
poder agregar contenido a cada tag HTML como, por ejemplo, la URL,
la imagen, la descripción o el título. Al final, entonces, yo hago una
appendChild de todos estos elementos al contenedor imagen y,
luego, yo hago una appendChild de contenedor imagen al contenedor
principal que va a contener las imágenes. Esta es una manera muy
básica de cómo renderizar contenido que se carga a partir de un
archivo JSON. Hay librerías que automatizan este proceso como, por
ejemplo, los frameworks que nosotros utilizamos para
crear aplicaciones web grandes como View, Angular o React u otras
librerías que pueden utilizarse también para el mismo propósito, pero
espero que, con este ejemplo, hayas aprendido cómo crear
estos elementos y agregar contenido a partir de un archivo JS.

Detección de errores en la carga de datos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
A la hora de cargar datos desde un servicio remoto, los errores
pueden ocurrir. Es por esa razón que nosotros debemos aprender a
capturar estos errores y manejarlos para que, así, el usuario pueda
tener una mejor experiencia con nuestras aplicaciones web. Te voy a
mostrar un ejemplo. Yo aquí tengo una aplicación que tiene un botón
que, a la hora de hacer click, carga un archivo JSON y genera esta
galería con la información dentro del archivo. Yo ahora aquí voy a
utilizar las herramientas para el desarrollador de Chrome para simular
un error. Para eso, entonces, me dirijo al panel de Network o Red y
luego me dirijo a la opción de Throttling. Esta opción lo que nos
permite es simular la carga de una aplicación web utilizando redes de
conexión más lenta, como puedes ver aquí, o, incluso, en caso de que
la red no tenga conexión al Internet. Entonces, aquí yo voy a
seleccionar esta opción para eliminar la conexión a la red o el
Internet y bloquear esta aplicación. Entonces, cuando yo hago clic en
el botón, la aplicación va a intentar cargar el archivo JSON, como
puedes ver aquí, pero esto genera un error. Entonces, en este
ejemplo, yo le estoy mostrando un mensaje de error al usuario para
indicar que un error sucedió. Ahora te voy a mostrar cómo he hecho
este ejemplo. Dentro del código HTML, yo ya tengo el contenido del
mensaje de error, como puedes ver aquí, y, dentro del CSS, también
tengo los estilos del mensaje de error, como puedes ver aquí. Algo
que pueden notar es que yo he puesto el display del mensaje de error
en None. Esto significa que, cuando la aplicación carga, el mensaje
de error no se va a mostrar. Dentro del archivo JavaScript, puedes
notar que yo estoy recobrando la referencia al mensaje de error
dentro del HTML. Entonces, utilizo un try y un catch para detectar si
hay algún error dentro de la carga del archivo JSON. En caso de que
un error se genere, entonces, simplemente lo que hago es que llamo
la propiedad style del mensaje de error y le pongo un valor al display
de block. Esto hará que el mensaje de error se muestre en la pantalla.

Detección de errores en la carga de datos

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
A la hora de cargar datos desde un servicio remoto, los errores
pueden ocurrir. Es por esa razón que nosotros debemos aprender a
capturar estos errores y manejarlos para que, así, el usuario pueda
tener una mejor experiencia con nuestras aplicaciones web. Te voy a
mostrar un ejemplo. Yo aquí tengo una aplicación que tiene un botón
que, a la hora de hacer click, carga un archivo JSON y genera esta
galería con la información dentro del archivo. Yo ahora aquí voy a
utilizar las herramientas para el desarrollador de Chrome para simular
un error. Para eso, entonces, me dirijo al panel de Network o Red y
luego me dirijo a la opción de Throttling. Esta opción lo que nos
permite es simular la carga de una aplicación web utilizando redes de
conexión más lenta, como puedes ver aquí, o, incluso, en caso de que
la red no tenga conexión al Internet. Entonces, aquí yo voy a
seleccionar esta opción para eliminar la conexión a la red o el
Internet y bloquear esta aplicación. Entonces, cuando yo hago clic en
el botón, la aplicación va a intentar cargar el archivo JSON, como
puedes ver aquí, pero esto genera un error. Entonces, en este
ejemplo, yo le estoy mostrando un mensaje de error al usuario para
indicar que un error sucedió. Ahora te voy a mostrar cómo he hecho
este ejemplo. Dentro del código HTML, yo ya tengo el contenido del
mensaje de error, como puedes ver aquí, y, dentro del CSS, también
tengo los estilos del mensaje de error, como puedes ver aquí. Algo
que pueden notar es que yo he puesto el display del mensaje de error
en None. Esto significa que, cuando la aplicación carga, el mensaje
de error no se va a mostrar. Dentro del archivo JavaScript, puedes
notar que yo estoy recobrando la referencia al mensaje de error
dentro del HTML. Entonces, utilizo un try y un catch para detectar si
hay algún error dentro de la carga del archivo JSON. En caso de que
un error se genere, entonces, simplemente lo que hago es que llamo
la propiedad style del mensaje de error y le pongo un valor al display
de block. Esto hará que el mensaje de error se muestre en la pantalla.

14.- Ejercicios

Números impares

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Felicidades por haber completado el contenido de este curso. Ahora,
para practicar los nuevos conocimientos que has adquirido, vamos a
hacer algunos ejercicios. Este primer ejercicio consiste en contar
cuántos números pares hay entre uno y 100. Si tú deseas resolver
este ejercicio por ti mismo, puedes poner una pausa ahora. Si
no, quédate conmigo para ver cómo yo lo resuelvo. Para resolver este
ejercicio voy a utilizar este código que ves aquí. Yo aquí he creado
una variable que se llama contador. Luego, utilizo un for loop para
recorrer los números entre uno y 100, como puedes ver en esta línea
de código. El siguiente paso es determinar si el número es un número
par. Para esto, entonces, voy a utilizar el operador de módulo,
recordando que este operador devuelve el residuo de una
división. Entonces, al dividir este número entre dos y si el residuo es
cero, significa que el número es par. Aquí puedes notar que estoy
utilizando el operador de comparación estricta para comparar el
resultado de la operación con cero. Entonces, esta expresión me va a
devolver un valor booleano. Ya entonces, con este valor booleano, yo
puedo poner una declaración condicional en donde se valida que, si
es par, es true, el contador aumenta en uno. Ahora podemos ver la
ejecución de este código. Para eso, entonces, abro la terminal y llamo
a Node y corro el archivo JavaScript. Puedes notar que el resultado de
esta operación es 50.