Upload via hfc (batch)

Uploaded using hfc tool

.gitattributes

@@ -196,3 +196,14 @@ subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/06-Ciclo[[:space:]]For[[:space:]]Iteración[[:space:]]de[[:space:]]Listas[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Consolelog[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/07-Iteración[[:space:]]con[[:space:]]forof[[:space:]]en[[:space:]]JavaScript[[:space:]]para[[:space:]]arrays[[:space:]]y[[:space:]]strings.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/08-Iteración[[:space:]]sobre[[:space:]]Objetos[[:space:]]con[[:space:]]forIn[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/09-Uso[[:space:]]del[[:space:]]ciclo[[:space:]]while[[:space:]]para[[:space:]]iteración[[:space:]]en[[:space:]]programación.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/10-Ciclos[[:space:]]doWhile[[:space:]]Estructura[[:space:]]y[[:space:]]Diferencias[[:space:]]con[[:space:]]While.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/01-Funciones[[:space:]]en[[:space:]]JavaScript[[:space:]]Cómo[[:space:]]Calcular[[:space:]]Precios[[:space:]]con[[:space:]]Descuentos.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/02-Diferencias[[:space:]]entre[[:space:]]Funciones[[:space:]]y[[:space:]]Métodos[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/03-Funciones[[:space:]]Puras[[:space:]]e[[:space:]]Impuras[[:space:]]en[[:space:]]Programación[[:space:]]Conceptos[[:space:]]y[[:space:]]Ejemplos.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/04-Arrow[[:space:]]Functions[[:space:]]y[[:space:]]Enlace[[:space:]]Léxico[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/05-Scope[[:space:]]y[[:space:]]Contextos[[:space:]]de[[:space:]]Ejecución[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/06-Closures[[:space:]]y[[:space:]]Ámbito[[:space:]]Léxico[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/07-Fundamentos[[:space:]]del[[:space:]]Desarrollo[[:space:]]Web[[:space:]]Frontend[[:space:]]y[[:space:]]Backend.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/04-Manipulación[[:space:]]de[[:space:]]Arrays/01-Arrays[[:space:]]Propiedades[[:space:]]Acceso[[:space:]]y[[:space:]]Creación[[:space:]]en[[:space:]]Programación.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/04-Manipulación[[:space:]]de[[:space:]]Arrays/02-Mutabilidad[[:space:]]e[[:space:]]inmutabilidad[[:space:]]en[[:space:]]arrays[[:space:]]conceptos[[:space:]]y[[:space:]]ejemplos[[:space:]]prácticos.mp4 filter=lfs diff=lfs merge=lfs -text

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/09-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/09-Uso del ciclo while para iteración en programación.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:639e7bce49fa97cb0f5e3d34ddcd0ebce1763a0aa5be4dd3739adc3af26dcc47
+size 22379041

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/09-Uso del ciclo while para iteración en programación.vtt

@@ -0,0 +1,302 @@
+WEBVTT
+
+00:00.000 --> 00:02.760
+Vamos a ver ahora un nuevo método, que es
+el método while,
+
+00:02.760 --> 00:05.460
+que este método también lo vamos a
+utilizar para poder iterar.
+
+00:05.460 --> 00:08.860
+Quiere decir, para poder meter
+instrucciones en un ciclo
+
+00:08.860 --> 00:12.200
+y que se vayan repitiendo siempre y cuando
+sea true
+
+00:12.200 --> 00:14.400
+la condición que tenemos ahí dentro de while.
+
+00:14.400 --> 00:16.700
+Vamos a ver su
+estructura.
+
+00:16.700 --> 00:21.800
+While, vamos a poner aquí para poder hacer
+comentarios,
+
+00:21.800 --> 00:24.800
+tener espacio para poder
+escribir.
+
+00:24.800 --> 00:26.300
+While es un
+ciclo,
+
+00:26.300 --> 00:29.660
+el cual nosotros vamos a utilizar para
+poder iterar.
+
+00:29.660 --> 00:33.060
+Este ciclo lo que va a hacer es que nos va
+a meter prácticamente
+
+00:33.060 --> 00:36.160
+en un loop que se va a estar repitiendo
+las cosas
+
+00:36.160 --> 00:41.260
+siempre y cuando la instrucción que esté
+aquí adentro sea verídica.
+
+00:41.260 --> 00:43.160
+En el momento en el que deje de ser verídica,
+
+00:43.160 --> 00:45.000
+este ciclo se va a
+romper.
+
+00:45.000 --> 00:46.600
+Y nosotros vamos a tener como
+resultado
+
+00:46.600 --> 00:49.100
+prácticamente el código que tengamos adentro.
+
+00:49.100 --> 00:52.260
+La estructura de while es prácticamente,
+
+00:52.260 --> 00:54.260
+ponemos while como palabra reservada,
+
+00:54.260 --> 00:57.660
+adentro ponemos cuál va a ser la
+condición
+
+00:57.660 --> 01:00.000
+que nosotros estamos
+utilizando.
+
+01:00.000 --> 01:02.860
+Y mientras esta condición sea verdad,
+
+01:02.860 --> 01:07.000
+entonces se va a ejecutar el código que
+tenemos aquí adentro.
+
+01:07.000 --> 01:10.060
+Aquí es importante porque si no manejamos
+bien while,
+
+01:10.060 --> 01:12.200
+podemos entrar en un loop
+infinito
+
+01:12.200 --> 01:16.100
+y quiere decir que todo este código se va
+a repetir de manera infinita.
+
+01:16.100 --> 01:17.460
+Si lo estamos haciendo en el navegador,
+
+01:17.460 --> 01:20.200
+puede ser incluso que la pantalla de
+nuestro navegador
+
+01:20.200 --> 01:24.000
+o la pestaña de nuestro navegador se coma
+toda la memoria RAM
+
+01:24.000 --> 01:26.560
+y nuestro navegador prácticamente deje de
+funcionar.
+
+01:26.560 --> 01:30.300
+Así que tenemos que tener cuidado con la
+condición que tenemos aquí.
+
+01:30.300 --> 01:33.560
+Esta es la estructura básica del método while.
+
+01:33.560 --> 01:36.360
+Y es prácticamente así de
+sencilla.
+
+01:36.360 --> 01:37.860
+Vamos a pasar ahorita a un
+ejemplo
+
+01:37.860 --> 01:41.460
+de cómo utilizaríamos while en algo práctico.
+
+01:41.460 --> 01:44.300
+Lo primero que tenemos que hacer es
+generamos una variable
+
+01:44.300 --> 01:49.660
+que se va a convertir, por ejemplo, en un
+contador.
+
+01:49.660 --> 01:52.700
+Este contador de momento va a ser igual a
+cero.
+
+01:52.700 --> 01:56.000
+Este contador es lo que vamos nosotros a
+meter a la condición
+
+01:56.000 --> 01:58.260
+para que vaya
+incrementando
+
+01:58.260 --> 02:00.660
+y llegue prácticamente a lo que estamos
+buscando
+
+02:00.660 --> 02:02.800
+dentro de la misma
+condición.
+
+02:02.800 --> 02:04.800
+Aquí entonces utilizamos
+while
+
+02:04.800 --> 02:08.900
+y adentro ponemos cuál es la condición.
+
+02:08.900 --> 02:15.200
+Mientras contador sea menor a
+10,
+
+02:15.200 --> 02:21.660
+entonces nosotros podemos aquí tener de
+momento un console.log
+
+02:21.660 --> 02:28.560
+para que me imprima contador en el navegador.
+
+02:28.560 --> 02:32.060
+Y es importante aquí poder tener, por ejemplo,
+
+02:32.060 --> 02:38.200
+que una vez que se termine esto, contador++,
+
+02:38.200 --> 02:40.660
+porque tiene que empezar a incrementar.
+
+02:40.660 --> 02:42.300
+Entonces vamos a
+repasar.
+
+02:42.300 --> 02:45.700
+Tenemos una variable let que se llama
+contador,
+
+02:45.700 --> 02:47.260
+que es igual a
+cero.
+
+02:47.260 --> 02:49.660
+Mientras, entonces, estamos en while,
+
+02:49.660 --> 02:53.960
+el ciclo que queremos hacer es mientras
+contador sea menor a 10,
+
+02:53.960 --> 02:56.560
+entonces imprímeme en la
+consola
+
+02:56.560 --> 02:58.960
+el número que tiene contador en ese momento.
+
+02:58.960 --> 03:00.960
+Una vez que esta línea se
+ejecute,
+
+03:00.960 --> 03:02.560
+contador tiene que
+incrementar.
+
+03:02.560 --> 03:05.620
+¿Para qué? Para que en el siguiente loop,
+
+03:05.620 --> 03:08.100
+contador ahora ya no es cero, ahora es uno,
+
+03:08.100 --> 03:10.160
+pero uno sigue siendo menor a
+10.
+
+03:10.160 --> 03:13.320
+Esto se va a romper hasta que contador
+llegue a 10
+
+03:13.320 --> 03:16.420
+y cuando es contador es menor a 10, no.
+
+03:16.420 --> 03:18.320
+Entonces en este momento se va a generar
+un break
+
+03:18.320 --> 03:21.200
+y se va a romper este loop y se va a dejar
+de imprimir
+
+03:21.200 --> 03:24.800
+lo que es el valor de contador
+prácticamente en la consola.
+
+03:24.800 --> 03:26.360
+Si se nos olvida
+esto,
+
+03:26.360 --> 03:28.220
+contador siempre va a ser menor a
+10
+
+03:28.220 --> 03:30.960
+y aquí es donde podemos entrar en un loop
+infinito
+
+03:30.960 --> 03:33.700
+que va a llevar a la memoria
+prácticamente
+
+03:33.700 --> 03:36.300
+de nuestro navegador a
+crashear.
+
+03:36.300 --> 03:39.260
+Se dan cuenta, ahorita ya se imprimieron 10.
+
+03:39.260 --> 03:40.720
+Es como, Diego, llegaron a
+9.
+
+03:40.720 --> 03:43.660
+Sí, porque estamos del cero al
+nueve
+
+03:43.660 --> 03:45.760
+y el 10 no es menor al
+10.
+
+03:45.760 --> 03:47.660
+Entonces prácticamente aquí nos
+imprime
+
+03:47.660 --> 03:51.360
+lo que es verdad en esta
+condición
+
+03:51.360 --> 03:54.360
+que hace que While nos imprima
+contador
+
+03:54.360 --> 04:19.360
+10 veces del cero al
+nueve.
+

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/09-index_d7170355-2163-4a7d-9633-bc5247dbcfd1.js

@@ -0,0 +1,12 @@
+/*
+while(condicion) {
+  código
+}
+*/
+
+let contador = 0;
+
+while (contador < 10) {
+  console.log(contador);
+  contador++;
+}

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/10-Ciclos doWhile Estructura y Diferencias con While.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8783ee64c15baf1b64557f70db3d6248c177cf7a1564a51ac54967ad8885158
+size 22005040

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/10-Ciclos doWhile Estructura y Diferencias con While.vtt

@@ -0,0 +1,206 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+Vamos a ver ahora un método que se llama
+doWhile.
+
+00:03.000 --> 00:06.000
+Este método también nos va a ayudar para
+poder hacer ciclos,
+
+00:06.000 --> 00:08.500
+que es asegurar que las cosas se vayan
+repitiendo
+
+00:08.500 --> 00:11.000
+hasta que logremos el resultado que
+estamos buscando,
+
+00:11.000 --> 00:13.000
+siempre y cuando la condición se vaya
+cumpliendo.
+
+00:13.000 --> 00:15.500
+Es algo similar a while, pero ahorita
+vamos a explicar
+
+00:15.500 --> 00:17.500
+cuáles son las diferencias entre ambos,
+
+00:17.500 --> 00:20.000
+pero de inicio vamos a ver cómo
+construimos un doWhile.
+
+00:21.000 --> 00:23.000
+Ya que estamos aquí en nuestro código,
+
+00:23.000 --> 00:25.000
+antes de ver un
+ejemplo,
+
+00:25.000 --> 00:29.000
+vamos a poner aquí comentarios para poder
+hacer notas.
+
+00:29.000 --> 00:32.000
+Y vamos a ver cuál es la estructura que
+utilizamos en un doWhile.
+
+00:32.000 --> 00:34.000
+Lo primero es utilizamos el
+do.
+
+00:34.000 --> 00:40.000
+Y dentro del do, en los corchetes, va a
+ser el código que se va a ejecutar.
+
+00:40.000 --> 00:45.000
+Aquí la primera diferencia con while es
+que primero vamos a poner el código a ejecutar,
+
+00:45.000 --> 00:52.000
+y ya después utilizamos el while para
+poder ver cuál es la condición que se tiene que cumplir.
+
+00:53.000 --> 00:56.000
+Entonces, primero va a entrar el código a
+ejecutar,
+
+00:56.000 --> 01:00.000
+después se va a ver cómo lleva esta
+condición a ver si se está cumpliendo.
+
+01:00.000 --> 01:03.000
+Siempre y cuando la condición aquí se siga
+cumpliendo,
+
+01:03.000 --> 01:07.000
+regresamos a el do para poder implementar
+el código que se tiene que ejecutar,
+
+01:07.000 --> 01:11.000
+así sucesivamente, hasta que la condición
+se deje de cumplir.
+
+01:11.000 --> 01:14.000
+En ese momento va a entrar un break y se
+va a romper prácticamente
+
+01:14.000 --> 01:17.000
+nuestro loop de lo que sea que estemos
+construyendo.
+
+01:17.000 --> 01:22.000
+Entonces, ya en un ejemplo mucho más
+práctico de cómo construiríamos un doWhile,
+
+01:22.000 --> 01:25.000
+es, venimos aquí y construimos una
+variable let,
+
+01:25.000 --> 01:30.000
+que en este caso se va a llamar contador,
+y va a ser igual a cero.
+
+01:30.000 --> 01:34.000
+En este momento vamos a utilizar entonces
+el do con nuestros brackets,
+
+01:34.000 --> 01:40.000
+y aquí vamos a poner el código que
+nosotros queremos que se ejecute de primera instancia.
+
+01:40.000 --> 01:43.000
+Para hacer algo sencillo, vamos a utilizar
+un console.log
+
+01:43.000 --> 01:47.000
+que nos vaya a imprimir el valor de contador,
+
+01:47.000 --> 01:50.000
+y después, para evitar entrar en un loop
+infinito,
+
+01:50.000 --> 01:56.000
+vamos a poner que contador tiene que
+incrementarse por uno.
+
+01:56.000 --> 01:59.000
+Ya que tenemos eso, entonces vamos a venir
+a nuestro while,
+
+01:59.000 --> 02:02.000
+y en nuestro while vamos a poner cuál es
+la condición.
+
+02:02.000 --> 02:08.000
+Mientras contador sea menor a
+10,
+
+02:08.000 --> 02:13.000
+entonces se tiene que seguir ejecutando
+este do.
+
+02:13.000 --> 02:18.000
+Esta es prácticamente la estructura en un
+ejemplo de cómo utilizaríamos un doWhile.
+
+02:18.000 --> 02:21.000
+Tenemos el código que se va a ejecutar de
+primera mano,
+
+02:21.000 --> 02:24.000
+utilizando el do, y ya después tenemos
+nuestra condición con nuestro while.
+
+02:24.000 --> 02:30.000
+Si guardamos esto, aquí podemos ver que se
+está imprimiendo del 0 al 9 una vez más.
+
+02:30.000 --> 02:31.000
+Pero entonces tú puedes
+preguntar,
+
+02:31.000 --> 02:35.000
+¿cómo, Diego? Pues no me queda muy claro
+cuál es la diferencia,
+
+02:35.000 --> 02:39.000
+por ejemplo, entre un while y un doWhile,
+para qué lo utilizaría.
+
+02:39.000 --> 02:44.000
+Como te acabo de comentar, la diferencia
+principal es que en un doWhile,
+
+02:44.000 --> 02:48.000
+primero se va a ejecutar el código antes
+de validar la condición.
+
+02:48.000 --> 02:53.000
+Y en un while, siempre se va a validar la
+condición antes de ejecutar el código.
+
+02:53.000 --> 02:55.000
+Entonces, el caso de uso
+es,
+
+02:55.000 --> 02:59.000
+si tú requieres que primero se ejecute el
+código antes de que se valude,
+
+02:59.000 --> 03:02.000
+si es verdad o no, utilizas un doWhile.
+
+03:02.000 --> 03:05.000
+Si lo que necesitas es nada más validar
+que algo sea verdad
+
+03:05.000 --> 03:09.000
+antes de implementar el código, utilizas
+un while.
+
+03:09.000 --> 03:14.000
+Pero de forma práctica, esta es la forma
+de poder implementar un doWhile.
+

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/10-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y Lógica/10-index_4e2b15d9-94de-49f9-bb60-c70238a85a25.js

@@ -0,0 +1,14 @@
+/* 
+
+do {
+  código
+} while (condicion)
+
+*/
+
+let contador = 0;
+
+do {
+  console.log(contador);
+  contador++;
+} while (contador < 10);

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Funciones en JavaScript Cómo Calcular Precios con Descuentos.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:74dd2e0652e9710cfea7e8bcb16d6169c851ca4202f103dbb434307ce26adf79
+size 124849975

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-clase-anatomia-de-una-funcion_ebd815d1-e594-4489-b4f8-47db59cdccb7.js

@@ -0,0 +1,14 @@
+function calculateDiscountedPrice (price, discountPercentage) {
+  const discount = (price * discountPercentage) / 100
+  const priceWithDiscount = price - discount
+
+  return priceWithDiscount
+}
+
+const originalPrice = 1000
+const discountPercentage = 15
+const finalPrice = calculateDiscountedPrice(originalPrice, discountPercentage)
+
+console.log('Original Price: $' + originalPrice)
+console.log('Discount: ' + discountPercentage + '%')
+console.log('Price with discount: $' + finalPrice)

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y Métodos en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:585c06a6ffcdcb03aa6d90dedf998f2b7d70c19a147a7e92b61adc27aace237f
+size 62509318

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y Métodos en JavaScript.vtt

@@ -0,0 +1,815 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+En esta clase vamos a hablar sobre las
+principales diferencias
+
+00:03.000 --> 00:05.500
+entre funciones y entre
+métodos.
+
+00:05.500 --> 00:08.300
+Cuando escribimos una función en JavaScript,
+
+00:08.300 --> 00:11.600
+lo que hacemos es, por supuesto, escribirla,
+llamarla,
+
+00:11.600 --> 00:15.100
+y si nosotros colocamos un typeof de esa
+función
+
+00:15.100 --> 00:17.200
+para saber qué tipo de dato
+es,
+
+00:17.200 --> 00:20.300
+el programa nos va a arrojar que es de
+tipo function,
+
+00:20.300 --> 00:24.400
+pero eso no quiere decir que las funciones
+dejen de ser objetos.
+
+00:24.400 --> 00:26.000
+Al igual que los
+objetos,
+
+00:26.000 --> 00:28.400
+las funciones también tienen propiedades,
+
+00:28.400 --> 00:31.700
+también tienen métodos, tienen un contexto
+de ejecución
+
+00:31.700 --> 00:33.900
+y también pueden ser
+invocadas.
+
+00:33.900 --> 00:36.700
+Así que todo esto, lo ideal es que lo
+revisemos,
+
+00:36.700 --> 00:39.400
+todas esas propiedades y todas las
+características
+
+00:39.400 --> 00:42.000
+que también tienen al igual que los objetos.
+
+00:42.000 --> 00:44.400
+Para ello, también tengo una pregunta para ti,
+
+00:44.400 --> 00:46.600
+y es que ¿crees que las
+funciones
+
+00:46.600 --> 00:50.300
+puedan estar dentro de los objetos y
+viceversa?
+
+00:50.300 --> 00:52.500
+Bueno, vamos a revisar eso en esta clase,
+
+00:52.500 --> 00:55.500
+justamente para ello vamos a ir a Visual
+Studio Code.
+
+00:55.500 --> 00:58.100
+Vamos a comenzar hablando de las
+capacidades
+
+00:58.100 --> 01:01.400
+que tienen las funciones al igual que
+otros objetos.
+
+01:01.400 --> 01:03.900
+Entonces, coloquemos un título alusivo a esto,
+
+01:03.900 --> 01:08.100
+capacidades que tienen las
+funciones
+
+01:08.100 --> 01:11.400
+al igual que otros
+objetos.
+
+01:11.400 --> 01:13.400
+Muy bien, teniendo en cuenta
+esto,
+
+01:13.400 --> 01:15.500
+lo que vamos a hacer es
+comenzar
+
+01:15.500 --> 01:18.300
+hablando justamente de estas
+funciones
+
+01:18.300 --> 01:21.300
+que nosotros podemos pasar como
+argumentos
+
+01:21.300 --> 01:23.000
+a otras
+funciones.
+
+01:23.000 --> 01:24.400
+Vamos a escribir
+acá,
+
+01:24.400 --> 01:28.800
+pasar funciones como
+argumentos.
+
+01:28.800 --> 01:31.900
+Esto también es conocido como callback.
+
+01:31.900 --> 01:33.500
+Esto es súper
+importante
+
+01:33.500 --> 01:36.300
+y normalmente lo hablamos muchísimo en
+programación
+
+01:36.300 --> 01:38.800
+y también es muy preguntado en
+entrevistas
+
+01:38.800 --> 01:40.400
+para que lo tengas en
+cuenta.
+
+01:40.400 --> 01:42.600
+Simplemente un callback es una
+función
+
+01:42.600 --> 01:44.900
+que se pasa como
+argumento.
+
+01:44.900 --> 01:46.000
+¿Cómo sería
+esto?
+
+01:46.000 --> 01:48.600
+Entonces colocamos acá, por ejemplo,
+una función,
+
+01:48.600 --> 01:51.800
+voy a colocarle cualquier nombre en este
+momento,
+
+01:51.800 --> 01:55.600
+y si nosotros creamos otra función, por
+ejemplo, B,
+
+01:55.600 --> 01:58.200
+nosotros podríamos pasarle como
+argumento
+
+01:58.200 --> 02:01.200
+esa función A que habíamos creado al
+principio.
+
+02:01.200 --> 02:03.800
+Y simplemente la llamamos común y
+corriente
+
+02:03.800 --> 02:07.500
+y le pasamos como argumento esa función A.
+
+02:07.500 --> 02:10.100
+De esa manera ya tendríamos las
+funciones
+
+02:10.100 --> 02:13.500
+que son pasadas como
+argumentos.
+
+02:13.500 --> 02:16.500
+Por otro lado, lo que podemos
+hacer
+
+02:16.500 --> 02:19.000
+es retornar
+funciones.
+
+02:19.000 --> 02:20.700
+¿Cómo nos quedaría
+esto?
+
+02:20.700 --> 02:23.200
+Bueno, vamos a escribir una función,
+
+02:23.200 --> 02:26.900
+voy a copiarme esta función que teníamos
+por aquí arriba,
+
+02:26.900 --> 02:32.500
+voy a escribir acá, retornar funciones,
+
+02:32.500 --> 02:35.500
+y dentro de esta función
+A,
+
+02:35.500 --> 02:38.800
+lo que vamos a hacer es escribir esta
+misma función B,
+
+02:38.800 --> 02:43.200
+le voy a quitar este parámetro que le
+habíamos escrito antes,
+
+02:43.200 --> 02:46.500
+y lo que podemos hacer es que dentro de la
+función A,
+
+02:46.500 --> 02:48.800
+pero fuera de la función
+B,
+
+02:48.800 --> 02:52.900
+podemos retornar, return, la misma función B.
+
+02:52.900 --> 02:55.700
+Esto, por supuesto, iría atado a la
+lógica
+
+02:55.700 --> 02:58.900
+que nosotros necesitemos en cierto caso en
+particular,
+
+02:58.900 --> 03:01.000
+sin embargo, en este caso,
+bueno,
+
+03:01.000 --> 03:04.300
+podríamos notar que podemos hacer este
+tipo de cosas
+
+03:04.300 --> 03:05.700
+al trabajar con
+funciones,
+
+03:05.700 --> 03:11.400
+tener otra función dentro y también
+retornarla.
+
+03:11.400 --> 03:13.400
+Por otro lado, lo que podemos
+hacer
+
+03:13.400 --> 03:16.700
+es asignar funciones a
+variables.
+
+03:16.700 --> 03:20.800
+Asignar funciones a
+variables.
+
+03:20.800 --> 03:22.300
+En este caso, ¿cómo
+sería?
+
+03:22.300 --> 03:26.100
+Bueno, podemos colocar const A, por ejemplo,
+
+03:26.100 --> 03:29.900
+y lo que hacemos es decir function y la
+función.
+
+03:29.900 --> 03:33.600
+En este caso, algo importante anotar
+function
+
+03:33.600 --> 03:36.600
+es que tenemos uno, una
+variable,
+
+03:36.600 --> 03:40.200
+que en este caso es A, seguido de la función,
+
+03:40.200 --> 03:43.200
+pero ya esta función no tiene nombre,
+
+03:43.200 --> 03:45.400
+es decir, que el nombre de esa
+función
+
+03:45.400 --> 03:48.300
+es como si la tuviera ya esta variable y
+listo,
+
+03:48.300 --> 03:49.900
+no tenemos que volver a
+colocarle
+
+03:49.900 --> 03:51.700
+otro nombre de función
+allí.
+
+03:51.700 --> 03:53.300
+Entonces, esa es otra de las
+formas
+
+03:53.300 --> 03:56.300
+que podemos hacer también de las funciones,
+
+03:56.300 --> 03:58.100
+al igual que otros
+objetos.
+
+03:58.100 --> 04:01.900
+En este caso, lo que hacemos es crear una
+variable,
+
+04:01.900 --> 04:04.000
+puede ser, por ejemplo, const
+A,
+
+04:04.000 --> 04:05.600
+solamente para este
+ejemplo,
+
+04:05.600 --> 04:10.400
+y decimos function y creamos una función
+normalita,
+
+04:10.400 --> 04:11.600
+como ya la
+conocemos.
+
+04:11.600 --> 04:13.900
+En este caso, es importante
+notar
+
+04:13.900 --> 04:17.600
+que el nombre de la función en este caso
+desaparece
+
+04:17.600 --> 04:21.200
+y lo dejamos netamente a cargo de la
+variable
+
+04:21.200 --> 04:23.100
+que nosotros acabamos de
+crear.
+
+04:23.100 --> 04:24.800
+Esto también se
+conoce
+
+04:24.800 --> 04:28.500
+con el nombre de expresión de función.
+
+04:28.500 --> 04:31.800
+Estas funciones que nosotros conocemos
+normalmente,
+
+04:31.800 --> 04:34.200
+es decir, que creamos la palabra clave,
+
+04:34.200 --> 04:35.900
+luego el nombre, en
+fin,
+
+04:35.900 --> 04:39.000
+esto se conoce como declaración de función.
+
+04:39.000 --> 04:41.200
+Entonces, esto también es súper
+clave
+
+04:41.200 --> 04:44.100
+a la hora de escribir funciones, en fin.
+
+04:44.100 --> 04:46.400
+Otra de las cosas que podemos
+encontrar
+
+04:46.400 --> 04:48.100
+es que estas
+funciones
+
+04:48.100 --> 04:51.700
+pueden tener tanto propiedades como métodos.
+
+04:51.700 --> 04:53.100
+Entonces, vamos a
+escribirle,
+
+04:53.100 --> 04:56.300
+tener propiedades y
+métodos.
+
+04:56.300 --> 04:59.200
+En este caso, ¿cómo lo podríamos
+hacer?
+
+04:59.200 --> 05:02.000
+Bueno, escribimos una
+función
+
+05:02.000 --> 05:06.400
+y en esa función, ya sería normal, como la
+conocemos,
+
+05:06.400 --> 05:08.500
+sin embargo, podemos crear, por ejemplo,
+
+05:08.500 --> 05:11.200
+un objeto,
+obj,
+
+05:11.200 --> 05:15.100
+y vamos a esa función
+decirle,
+
+05:15.100 --> 05:18.200
+oye, mira, yo quiero que su contexto de
+ejecución
+
+05:18.200 --> 05:20.100
+sea
+objeto.
+
+05:20.100 --> 05:22.200
+Entonces, lo que hacemos es
+decirle
+
+05:22.200 --> 05:24.600
+que la función tenga un
+método,
+
+05:24.600 --> 05:26.500
+que en este caso sería
+call,
+
+05:26.500 --> 05:29.700
+y le podríamos pasar también el
+objeto
+
+05:29.700 --> 05:31.100
+para que lo
+tome
+
+05:31.100 --> 05:34.000
+como si fuera precisamente su contexto de
+ejecución.
+
+05:34.000 --> 05:37.700
+No te preocupes por esos términos de
+contextos de ejecución,
+
+05:37.700 --> 05:40.000
+lo único importante acá es
+saber
+
+05:40.000 --> 05:42.600
+que las funciones pueden también tener
+métodos
+
+05:42.600 --> 05:45.200
+asociados para diferentes
+fines.
+
+05:45.200 --> 05:48.100
+Otra de las cosas que podemos hacer con
+funciones
+
+05:48.100 --> 05:51.000
+es justamente anidar
+funciones.
+
+05:51.000 --> 05:54.500
+Entonces, vamos a colocar anidar funciones,
+
+05:54.500 --> 05:58.000
+que esto también se conoce con el nombre
+de nested functions,
+
+05:58.000 --> 06:00.200
+también sería en inglés, voy a colocarlo
+por acá,
+
+06:00.200 --> 06:02.600
+nested
+functions,
+
+06:02.600 --> 06:03.500
+listo.
+
+06:03.500 --> 06:05.200
+Ahora, ¿cómo lo podríamos
+hacer?
+
+06:05.200 --> 06:07.300
+Bueno, colocamos, por
+ejemplo,
+
+06:07.300 --> 06:09.700
+voy a copiarme por acá de alguna que ya
+tengamos,
+
+06:09.700 --> 06:11.500
+como
+esta,
+
+06:11.500 --> 06:13.900
+y lo que hacemos es pegarla por acá,
+
+06:13.900 --> 06:16.400
+voy a evitar el
+return,
+
+06:16.400 --> 06:18.300
+que en este caso no
+sería,
+
+06:18.300 --> 06:21.000
+y podemos anidar de esta forma, es decir,
+
+06:21.000 --> 06:23.600
+function A contendría a function
+B,
+
+06:23.600 --> 06:27.000
+y function B podría contener, por ejemplo,
+
+06:27.000 --> 06:30.700
+otra function, que en este caso podría ser C.
+
+06:30.700 --> 06:33.300
+Asimismo, podríamos irlas
+llamando
+
+06:33.300 --> 06:34.900
+dentro de cada
+una,
+
+06:34.900 --> 06:37.000
+si lo necesitamos así, por supuesto.
+
+06:37.000 --> 06:39.400
+Entonces, sería aquí llamar
+B
+
+06:39.400 --> 06:41.700
+y acá llamar
+A.
+
+06:41.700 --> 06:44.600
+Esta sería una de las formas en las que
+podríamos
+
+06:44.600 --> 06:47.700
+llamar funciones dentro de ellas mismas,
+
+06:47.700 --> 06:50.500
+acceder a las variables que
+tienen
+
+06:50.500 --> 06:52.800
+las funciones que son
+grandes,
+
+06:52.800 --> 06:54.300
+es decir, por
+ejemplo,
+
+06:54.300 --> 06:56.300
+desde C puedo acceder a propiedades de A,
+
+06:56.300 --> 06:58.500
+desde B puedo acceder a propiedades de A,
+
+06:58.500 --> 07:00.300
+y así
+sucesivamente.
+
+07:00.300 --> 07:03.100
+Y esta es una de las características que
+también tiene
+
+07:03.100 --> 07:06.000
+el hecho de que podamos anidar funciones.
+
+07:06.000 --> 07:10.000
+Por otro lado, vamos a resolver esta
+pregunta
+
+07:10.000 --> 07:12.900
+que hicimos antes de llegar a Visual
+Studio Code,
+
+07:12.900 --> 07:17.700
+y es que si es posible almacenar funciones
+en objetos.
+
+07:17.700 --> 07:19.800
+Porfa, déjame en los
+comentarios
+
+07:19.800 --> 07:23.300
+tú qué crees antes de que sigamos
+continuando con este tema.
+
+07:23.300 --> 07:24.800
+Entonces, voy a
+colocar,
+
+07:24.800 --> 07:31.100
+¿es posible almacenar funciones en
+objetos?
+
+07:31.100 --> 07:33.300
+Vamos a colocarlo por acá en pregunta,
+
+07:33.300 --> 07:36.300
+mientras yo ya sé que estás escribiendo en
+los comentarios
+
+07:36.300 --> 07:38.600
+la respuesta, y vamos a
+revisarla.
+
+07:38.600 --> 07:40.500
+Entonces, vamos a decir lo siguiente.
+
+07:40.500 --> 07:43.200
+Tenemos un objeto, que en este caso,
+por ejemplo,
+
+07:43.200 --> 07:46.900
+sería un cohete, vamos a escribirlo en inglés,
+
+07:46.900 --> 07:49.200
+y acá vamos a colocar las propiedades,
+
+07:49.200 --> 07:51.400
+por supuesto, que tiene este objeto.
+
+07:51.400 --> 07:52.600
+¿Como cuál
+sería?
+
+07:52.600 --> 07:57.000
+El nombre, vamos a colocarle Falcon 9,
+
+07:57.000 --> 07:59.700
+y luego vamos a colocarle otra propiedad.
+
+07:59.700 --> 08:01.800
+Supongamos que ese es el
+cohete,
+
+08:01.800 --> 08:04.500
+y en su lanzamiento va a dar un mensaje.
+
+08:04.500 --> 08:07.600
+Entonces, vamos a colocar launch message,
+
+08:07.600 --> 08:10.900
+y acá lo que podemos hacer es que
+justamente
+
+08:10.900 --> 08:14.300
+cuando el cohete despegue, ese mensaje sea
+mostrado,
+
+08:14.300 --> 08:15.100
+por
+ejemplo.
+
+08:15.100 --> 08:15.900
+¿Cómo lo
+haríamos?
+
+08:15.900 --> 08:18.700
+Bueno, colocando una
+función,
+
+08:18.700 --> 08:23.100
+y esta función va a llamarse launch message,
+
+08:23.100 --> 08:28.500
+y aquí lo que hacemos es netamente colocar
+un console.log,
+
+08:28.500 --> 08:32.400
+y dentro podríamos colocar, por ejemplo,
+un fueguito,
+
+08:32.400 --> 08:34.200
+o algo alusivo a ese
+mensaje.
+
+08:34.200 --> 08:37.500
+Veamos en los emojis a ver si encontramos
+un fuego,
+
+08:37.500 --> 08:39.000
+o algo parecido a
+ello.
+
+08:39.000 --> 08:40.300
+Por aquí lo
+vi.
+
+08:40.300 --> 08:44.200
+Vamos a copiarlo, lo pegamos, ya tenemos
+nuestro mensaje,
+
+08:44.200 --> 08:48.000
+y para poder revisarlo, o para ver, por
+supuesto,
+
+08:48.000 --> 08:52.100
+este mensaje, colocamos rocket, luego,
+seguido,
+
+08:52.100 --> 08:55.300
+vamos a colocar un punto, launch message,
+
+08:55.300 --> 08:58.300
+y ejecutamos esa
+función.
+
+08:58.300 --> 09:00.600
+Vamos a correr nuestro programa para
+revisar
+
+09:00.600 --> 09:02.700
+qué es lo que sucedió
+acá.
+
+09:02.700 --> 09:07.600
+Decimos, node clase, bueno, toca
+escribirlo bien,
+
+09:07.600 --> 09:10.500
+por supuesto, corremos el
+programa,
+
+09:10.500 --> 09:12.500
+y bueno, nos va a sacar un par de errores,
+
+09:12.500 --> 09:15.000
+supongo que por el código que tenemos
+anteriormente.
+
+09:15.000 --> 09:18.000
+Lo voy a comentar para que no nos afecte.
+
+09:18.000 --> 09:19.800
+Entonces, vamos a
+comentarlo.
+
+09:19.800 --> 09:22.700
+Lo voy a comentar de esta forma, que es
+súper simple,
+
+09:22.700 --> 09:28.400
+solamente colocar un asterisco antes de
+estos slash,
+
+09:28.400 --> 09:31.400
+y ahora sí, vamos a correr nuestro código.
+
+09:31.400 --> 09:34.000
+Ahora sí, vemos que tenemos nuestro fueguito,
+
+09:34.000 --> 09:36.900
+y es precisamente porque lo que hicimos es,
+
+09:36.900 --> 09:39.400
+un objeto, dentro de ese
+objeto,
+
+09:39.400 --> 09:42.700
+colocamos en una de sus propiedades,
+una función,
+
+09:42.700 --> 09:47.000
+y por supuesto, esa función la podemos
+también ejecutar.
+
+09:47.000 --> 09:50.800
+A esto es lo que se le conoce como método.
+
+09:50.800 --> 09:53.100
+Entonces, ahí respondiendo a la pregunta,
+
+09:53.100 --> 09:56.300
+sí, es posible almacenar funciones en objetos,
+
+09:56.300 --> 09:59.800
+y justamente a esto es a lo que le
+conocemos
+
+09:59.800 --> 10:21.800
+con el nombre de
+método.
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-clase-funciones-vs-metodos_ae2120c7-56da-4567-8adb-ad30c110a238.js

@@ -0,0 +1,48 @@
+// Capacidades que tienen las funciones al igual que otros objetos
+
+// 1. Pasar funciones como argumentos -> callback
+
+function a () {}
+function b (a) {}
+b(a)
+
+// Retornar funciones
+
+function a () {
+  function b () {}
+  return b
+}
+
+// Asignar funciones a variables -> Expresión de función
+
+const a = function () {}
+
+// Tener propiedades y métodos
+
+function a () {}
+const obj = {}
+a.call(obj)
+
+// Anidar funciones -> Nested functions
+
+function a () {
+  function b () {
+    function c () {
+    
+    }
+    c()
+  }
+  b()
+}
+a()
+
+// ¿Es posible almacenar funciones en objetos?
+
+const rocket = {
+  name: 'Falcon 9',
+  launchMessage: function launchMessage () {
+    console.log('🔥')
+  }
+}
+
+rocket.launchMessage()

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programación Conceptos y Ejemplos.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf959dc19882dcb79ccb4e3e62cf015a70f5bd7ee7ee195d3c06191d28346ea9
+size 62703758

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programación Conceptos y Ejemplos.vtt

@@ -0,0 +1,843 @@
+WEBVTT
+
+00:00.000 --> 00:05.400
+En esta clase vamos a estar hablando sobre
+las funciones puras y las funciones impuras.
+
+00:05.400 --> 00:08.500
+Te voy a ir haciendo un par de preguntas a
+lo largo de la clase
+
+00:08.500 --> 00:13.700
+para que, porfa, me vayas colocando lo que
+consideres en la cajita de los comentarios.
+
+00:13.700 --> 00:18.500
+Me encantaría saber cuáles son esas
+consideraciones que tienes a lo largo de estas preguntas.
+
+00:18.500 --> 00:22.800
+Entonces, vamos a comenzar primero con lo
+que son las funciones puras.
+
+00:22.800 --> 00:25.900
+Voy a colocar por acá funciones puras.
+
+00:25.900 --> 00:31.900
+Algo importante de estas funciones es que
+tienen dos características súper fundamentales.
+
+00:31.900 --> 00:39.900
+La primera, por supuesto, es que, dada una
+misma entrada, vamos a obtener siempre la misma salida.
+
+00:39.900 --> 00:43.400
+Esto es muy característico de estas funciones.
+
+00:43.400 --> 00:47.900
+Y, por otro lado, es que no producen
+efectos secundarios.
+
+00:47.900 --> 00:49.900
+¿Eso qué quiere
+decir?
+
+00:49.900 --> 00:54.900
+Bueno, resulta que nosotros tenemos
+ciertas formas de escribir nuestro código.
+
+00:54.900 --> 00:57.400
+Ya te voy a decir cuáles son esas ciertas
+formas
+
+00:57.400 --> 01:01.900
+que hacen que nuestro código sea diferente
+a lo largo del tiempo.
+
+01:01.900 --> 01:07.400
+O que, inclusive, manipulemos ciertas
+cosas y que eviten que nuestra función siga siendo pura,
+
+01:07.400 --> 01:10.400
+o que siga siendo con la misma entrada y
+la misma salida.
+
+01:10.400 --> 01:15.900
+A eso es lo que le consideramos con el
+nombre de efectos secundarios o side effects en inglés.
+
+01:15.900 --> 01:19.400
+Eso también es muy conocido en el mundo de
+la programación.
+
+01:19.400 --> 01:22.400
+Y lo vas a estar escuchando también
+constantemente.
+
+01:22.400 --> 01:27.400
+¿Cuáles son esas ciertas cosas que
+hablábamos ahorita o esos efectos secundarios?
+
+01:27.400 --> 01:29.900
+Bueno, vamos a escribir algunos por acá.
+
+01:29.900 --> 01:32.400
+Voy a colocar side
+effects.
+
+01:32.400 --> 01:35.400
+Y entre ellos vamos a
+encontrar...
+
+01:35.400 --> 01:38.900
+El primero es modificar variables globales.
+
+01:38.900 --> 01:44.400
+Todo eso que sea acceder a otras variables
+que tengamos en nuestro código dentro de una función,
+
+01:44.400 --> 01:48.400
+va a hacer, por supuesto, que ya nuestra
+función no sea pura.
+
+01:48.400 --> 01:49.900
+Entonces vamos a
+colocarlo.
+
+01:49.900 --> 01:53.400
+Modificar variables
+globales.
+
+01:54.900 --> 01:59.900
+Por otro lado, tenemos lo que es modificar
+los parámetros de una función.
+
+01:59.900 --> 02:02.900
+Eso también nos causa un side effect.
+
+02:02.900 --> 02:06.400
+Entonces voy a colocar modificar parámetros.
+
+02:06.400 --> 02:10.900
+Por otro lado, tendríamos lo que es las
+solicitudes HTTP.
+
+02:10.900 --> 02:14.400
+Es decir, todo lo que sean llamados a APIs,
+
+02:14.400 --> 02:16.900
+también nos va a causar un efecto secundario.
+
+02:16.900 --> 02:21.400
+Entonces vamos a colocarlo, tres llamados
+a APIs,
+
+02:21.400 --> 02:23.900
+o
+llamados...
+
+02:23.900 --> 02:26.900
+HTTP puede ser, o solicitudes, más fácil.
+
+02:26.900 --> 02:30.900
+Solicitudes
+HTTP.
+
+02:32.900 --> 02:36.900
+Por otro lado, tendríamos lo que es
+imprimir mensajes,
+
+02:36.900 --> 02:40.400
+tanto en la pantalla como en nuestro mismo
+código.
+
+02:40.400 --> 02:44.900
+Eso también lo hemos conocido con console.
+log o incluso alert,
+
+02:44.900 --> 02:47.900
+que también lo podemos utilizar para
+imprimir mensajes.
+
+02:47.900 --> 02:51.900
+Entonces vamos a colocar todo lo que sea
+imprimir mensajes
+
+02:51.900 --> 02:55.900
+en pantalla o en
+consola.
+
+02:56.900 --> 03:01.400
+El número cinco sería todo lo que sea
+manipulación del DOM.
+
+03:01.400 --> 03:05.400
+Entonces si vamos a acceder o hacer alguna
+consulta,
+
+03:05.400 --> 03:07.900
+eso también sería un side
+effect.
+
+03:07.900 --> 03:11.900
+Manipulación del
+DOM.
+
+03:11.900 --> 03:16.900
+Y por último, también tendríamos lo que es
+acceder a la hora,
+
+03:16.900 --> 03:19.400
+o al día, ese tipo de cosas también.
+
+03:19.400 --> 03:21.400
+Entonces vamos a colocarlo
+acá,
+
+03:21.400 --> 03:25.400
+obtener la hora actual, por ejemplo.
+
+03:25.400 --> 03:28.900
+Entonces, todo esto nos produce side effects,
+
+03:28.900 --> 03:31.900
+o efectos secundarios, que por supuesto,
+
+03:31.900 --> 03:35.400
+hacen que nuestras funciones puras dejen
+de ser puras.
+
+03:35.400 --> 03:38.900
+Sin embargo, esos side effects o efectos
+secundarios
+
+03:38.900 --> 03:42.900
+no quiere decir que sea algo malo, por el
+contrario.
+
+03:42.900 --> 03:45.400
+Muchos de ellos también son necesarios.
+
+03:45.400 --> 03:47.900
+Si estamos haciendo debugging en nuestro
+código,
+
+03:47.900 --> 03:51.400
+por supuesto colocar algún mensaje en
+pantalla o en consola
+
+03:51.400 --> 03:53.400
+va a ser súper
+necesario.
+
+03:53.400 --> 03:57.400
+Solicitudes HTTP también es algo que hace
+parte del día a día,
+
+03:57.400 --> 04:00.400
+por supuesto, inclusive para
+desarrolladores frontends.
+
+04:00.400 --> 04:02.400
+Modificar
+parámetros.
+
+04:02.400 --> 04:05.400
+Hay muchas de estas side effects que no
+son malos,
+
+04:05.400 --> 04:09.400
+simplemente hacen que estas funciones
+dejen de ser puras.
+
+04:09.400 --> 04:12.900
+Entonces, por otro lado, vamos a revisar,
+entonces,
+
+04:12.900 --> 04:15.900
+cómo sería la estructura de una función pura.
+
+04:15.900 --> 04:21.400
+Para eso vamos a escribir una función de suma,
+por ejemplo,
+
+04:21.400 --> 04:23.400
+vamos a escribirlo en
+inglés,
+
+04:23.400 --> 04:25.900
+y vamos a colocar unos
+parámetros.
+
+04:25.900 --> 04:28.400
+Puede ser de la suma de dos números.
+
+04:28.400 --> 04:30.900
+Entonces coloquemos, por ejemplo, a y b.
+
+04:30.900 --> 04:32.400
+¿Y qué nos va a
+retornar?
+
+04:32.400 --> 04:35.900
+Pues, por supuesto, la suma de a y b.
+
+04:35.900 --> 04:39.400
+Esta función, por supuesto, es una función
+pura
+
+04:39.400 --> 04:42.900
+porque siempre vamos a recibir los mismos
+parámetros,
+
+04:42.900 --> 04:44.900
+es decir, la misma
+entrada,
+
+04:44.900 --> 04:47.400
+y siempre también vamos a obtener la misma
+salida.
+
+04:47.400 --> 04:50.400
+Por más de que nosotros cambiemos, en fin,
+
+04:50.400 --> 04:52.400
+siempre va a ser exactamente lo mismo,
+
+04:52.400 --> 04:53.900
+y como podemos
+observar,
+
+04:53.900 --> 04:56.900
+no tenemos modificación de variables globales,
+
+04:56.900 --> 04:59.400
+modificación de parámetros, solicitudes,
+en fin,
+
+04:59.400 --> 05:01.400
+no cumplimos con estas
+condiciones,
+
+05:01.400 --> 05:03.400
+así que por esa
+razón
+
+05:03.400 --> 05:06.400
+vemos que esta función es una función pura.
+
+05:06.400 --> 05:09.900
+Ahora, pregunta, ¿qué
+pasaría
+
+05:09.900 --> 05:13.400
+si nosotros colocamos esta función por
+aquí abajo
+
+05:13.400 --> 05:16.400
+y le colocamos un
+console.log
+
+05:16.400 --> 05:20.400
+y decimos, ah, bueno, es que yo quiero
+saber qué es a.
+
+05:20.400 --> 05:22.400
+Tenemos ese
+console.log.
+
+05:22.400 --> 05:24.400
+¿Ahí la función es
+pura?
+
+05:24.400 --> 05:26.900
+Porque estamos modificando una función que
+es pura,
+
+05:26.900 --> 05:28.900
+le estamos colocando el console.log.
+
+05:28.900 --> 05:31.400
+¿Es pura o en este caso ya es
+impura?
+
+05:31.400 --> 05:33.900
+Cuéntame, por favor, en los comentarios.
+
+05:33.900 --> 05:36.900
+Bueno, en este caso, ya lo que hacemos es,
+
+05:36.900 --> 05:38.900
+voy a copiarme este
+título,
+
+05:38.900 --> 05:41.400
+y vamos a copiarlo por
+acá,
+
+05:41.400 --> 05:44.400
+y decimos que esta función ya no es pura.
+
+05:44.400 --> 05:46.900
+Es una función impura
+precisamente
+
+05:46.900 --> 05:50.400
+porque estamos teniendo aquí un efecto
+secundario,
+
+05:50.400 --> 05:52.400
+como vemos por
+acá,
+
+05:52.400 --> 05:55.400
+imprimir mensajes en la pantalla o en la
+consola
+
+05:55.400 --> 05:57.900
+nos produce, por supuesto, esos side effects,
+
+05:57.900 --> 06:00.400
+y ya tendríamos, por
+supuesto,
+
+06:00.400 --> 06:02.400
+una modificación de nuestra función
+pura
+
+06:02.400 --> 06:04.900
+y deja de serlo
+inmediatamente.
+
+06:05.900 --> 06:07.900
+Otro ejemplo muy
+común,
+
+06:07.900 --> 06:10.900
+también de las funciones que son impuras,
+
+06:10.900 --> 06:13.900
+es modificar una variable que sea global,
+
+06:13.900 --> 06:15.900
+como lo vemos en este primer
+caso
+
+06:15.900 --> 06:17.900
+que dice modificar variables globales.
+
+06:17.900 --> 06:19.900
+¿Cómo es en este
+caso?
+
+06:19.900 --> 06:22.400
+Si tuviéramos, por ejemplo, un contador,
+
+06:22.400 --> 06:24.900
+entonces,
+counter,
+
+06:24.900 --> 06:27.900
+si tuviéramos, por ejemplo, una
+variable
+
+06:27.900 --> 06:29.900
+que se llame
+total,
+
+06:29.900 --> 06:32.400
+y ese total sea
+cero,
+
+06:32.400 --> 06:34.900
+¿qué es lo que queremos en este
+caso?
+
+06:34.900 --> 06:36.900
+Tener ese total
+inicial,
+
+06:36.900 --> 06:39.900
+es decir, estamos inicializando una variable,
+
+06:39.900 --> 06:41.900
+pero posteriormente, con el
+tiempo,
+
+06:41.900 --> 06:44.900
+queremos que, dependiendo de nuestra
+función
+
+06:44.900 --> 06:47.900
+o dependiendo de ciertas cosas que sucedan
+allá adentro,
+
+06:47.900 --> 06:49.900
+ese total sea diferente o
+cambie.
+
+06:49.900 --> 06:51.900
+Entonces, ¿cómo se vería
+eso?
+
+06:51.900 --> 06:53.900
+Sería, por ejemplo,
+function,
+
+06:53.900 --> 06:56.900
+podríamos colocar una
+suma
+
+06:56.900 --> 06:58.900
+con un side
+effect.
+
+06:58.900 --> 07:00.900
+Entonces, vamos a colocarle
+así.
+
+07:00.900 --> 07:03.900
+Y, por dentro, lo que hacemos es
+decir
+
+07:03.900 --> 07:08.900
+que total va a ser lo que había antes en
+total,
+
+07:08.900 --> 07:11.900
+más la suma de, puede ser un
+parámetro
+
+07:11.900 --> 07:13.900
+que le agreguemos
+acá.
+
+07:13.900 --> 07:16.900
+Entonces, digamos que esto es más igual,
+
+07:16.900 --> 07:19.900
+ahí lo que estamos haciendo es
+diciéndole
+
+07:19.900 --> 07:23.900
+algo parecido a igual a total más a,
+
+07:23.900 --> 07:25.900
+pero en vez de hacer
+esto,
+
+07:25.900 --> 07:27.900
+lo que podemos también hacer en
+JavaScript
+
+07:27.900 --> 07:29.900
+es decir total más
+igual,
+
+07:29.900 --> 07:32.900
+y nos ahorramos tener que volver a
+escribir total
+
+07:32.900 --> 07:34.900
+y solamente decir
+a.
+
+07:34.900 --> 07:36.900
+Entonces, voy a quitar esta de aquí arriba,
+
+07:36.900 --> 07:39.900
+y esta a la pasamos como
+parámetro.
+
+07:39.900 --> 07:41.900
+Entonces, aquí ya tenemos nuestra
+función
+
+07:41.900 --> 07:45.900
+y retornamos, por ejemplo, el total.
+
+07:45.900 --> 07:47.900
+Este es un caso muy común
+también
+
+07:47.900 --> 07:50.900
+de poder manipular o de
+tener,
+
+07:50.900 --> 07:53.900
+obtener funciones que son
+impuras.
+
+07:53.900 --> 07:56.900
+Tenemos total, que es una variable global,
+
+07:56.900 --> 08:00.900
+y conforme vayamos trabajando en nuestra
+función,
+
+08:00.900 --> 08:03.900
+vamos a ir modificando esa variable que es
+global.
+
+08:03.900 --> 08:06.900
+Entonces, ahí tenemos ese ejemplo
+justamente
+
+08:06.900 --> 08:08.900
+de función
+impura.
+
+08:08.900 --> 08:10.900
+Ahora, veamos otro
+ejemplo.
+
+08:10.900 --> 08:13.900
+Me vas a contar esta función para ti,
+¿qué es?
+
+08:13.900 --> 08:15.900
+Vamos a colocar
+function,
+
+08:15.900 --> 08:18.900
+square, que es como
+cuadrado.
+
+08:18.900 --> 08:20.900
+Le vamos a colocar un
+parámetro,
+
+08:20.900 --> 08:23.900
+y dentro vamos a decir que vamos a
+retornar
+
+08:23.900 --> 08:26.900
+x por
+x.
+
+08:26.900 --> 08:28.900
+Vamos a colocarle un espacio entre ambas.
+
+08:28.900 --> 08:29.900
+¿Para ti qué
+es?
+
+08:29.900 --> 08:32.900
+¿Una función pura o una función
+impura?
+
+08:32.900 --> 08:34.900
+Bueno, voy a colocar por aquí el resultado.
+
+08:34.900 --> 08:37.900
+Esta es una función
+pura,
+
+08:37.900 --> 08:40.900
+porque tenemos solamente nuestro parámetro,
+
+08:40.900 --> 08:42.900
+nuestra entrada, y la
+salida
+
+08:42.900 --> 08:45.900
+siempre va a ser exactamente la misma,
+
+08:45.900 --> 08:47.900
+sin efectos
+secundarios.
+
+08:47.900 --> 08:50.900
+Ahora, si tuviéramos, por ejemplo, function,
+
+08:50.900 --> 08:53.900
+a esta le vamos a decir
+attain,
+
+08:53.900 --> 08:56.900
+y vamos a enviarle un
+parámetro,
+
+08:56.900 --> 08:58.900
+y por dentro lo que vamos a hacer
+es
+
+08:58.900 --> 09:02.900
+return y más
+10.
+
+09:02.900 --> 09:06.900
+¿Esta qué es? ¿Una función pura o es una
+función impura?
+
+09:06.900 --> 09:09.900
+Bueno, en este caso la voy a seguir
+dejando
+
+09:09.900 --> 09:11.900
+en esta categoría de función
+pura,
+
+09:11.900 --> 09:12.900
+porque también lo
+es.
+
+09:12.900 --> 09:16.900
+Tenemos las mismas entradas con la misma
+salida.
+
+09:16.900 --> 09:20.900
+Ahora, ¿qué pasaría si nosotros
+tuviéramos
+
+09:20.900 --> 09:23.900
+la combinación de dos funciones
+puras?
+
+09:23.900 --> 09:26.900
+Es decir, ¿qué pasaría si tuviéramos,
+por ejemplo,
+
+09:26.900 --> 09:33.900
+const number igual a
+5,
+
+09:33.900 --> 09:38.900
+y también tuviéramos const final result,
+
+09:38.900 --> 09:44.900
+que va a ser igual a quién? Va a ser igual
+a attain,
+
+09:44.900 --> 09:49.900
+y vamos a decirle que este attain como
+parámetro
+
+09:49.900 --> 09:52.900
+va a recibir square
+x,
+
+09:52.900 --> 09:54.900
+entonces vamos a colocarle por
+acá,
+
+09:54.900 --> 09:56.900
+esto es una combinación que
+también
+
+09:56.900 --> 09:58.900
+es muy interesante
+revisar,
+
+09:58.900 --> 10:01.900
+y le ponemos como parámetro a square,
+
+10:01.900 --> 10:03.900
+porque él tiene que recibir un número,
+
+10:03.900 --> 10:05.900
+le vamos a decir qué
+es,
+
+10:05.900 --> 10:08.900
+por supuesto, el nombre que acabamos de
+escribir.
+
+10:08.900 --> 10:11.900
+Entonces aquí tenemos la combinación de
+estas dos.
+
+10:11.900 --> 10:14.900
+Vamos a colocar un
+console.log
+
+10:14.900 --> 10:16.900
+para revisar esto que acabamos de hacer,
+
+10:16.900 --> 10:19.900
+le vamos a decir final
+result,
+
+10:19.900 --> 10:23.900
+vamos a, esperemos a que no me salga algún
+error
+
+10:23.900 --> 10:25.900
+de pronto por algo que escribimos
+anteriormente,
+
+10:25.900 --> 10:28.900
+entonces vamos a escribir acá, y listo.
+
+10:28.900 --> 10:32.900
+Miren que aquí el resultado es
+35.
+
+10:32.900 --> 10:34.900
+Muy bien, ahí nos funcionó nuestra súper
+combinación.
+
+10:34.900 --> 10:38.900
+Pero lo importante aquí es revisar lo
+siguiente,
+
+10:38.900 --> 10:41.900
+tenemos función pura, función
+pura,
+
+10:41.900 --> 10:46.900
+pero acá tenemos la combinación de dos
+funciones puras.
+
+10:46.900 --> 10:49.900
+¿Esto qué es? ¿Una función
+impura
+
+10:49.900 --> 10:51.900
+o sigue siendo una función
+pura?
+
+10:51.900 --> 10:54.900
+¿Tú qué crees? Cuéntame en los comentarios.
+
+10:54.900 --> 10:58.900
+Bueno, la respuesta es que
+independientemente de esto,
+
+10:58.900 --> 11:00.900
+esto sigue siendo una función
+pura.
+
+11:00.900 --> 11:03.900
+Entonces es muy interesante también
+revisar esos casos,
+
+11:03.900 --> 11:06.900
+y que siempre tengamos en cuenta
+simplemente
+
+11:06.900 --> 11:08.900
+estas reglas que acabamos de escribir.
+
+11:08.900 --> 11:10.900
+Si tienes side effects o
+no,
+
+11:10.900 --> 11:13.900
+pues básicamente nos va a dar esa
+ilusión
+
+11:13.900 --> 11:16.900
+o esa noción de que es una función impura,
+
+11:16.900 --> 11:18.900
+de lo contrario va a ser una función pura,
+
+11:18.900 --> 11:20.900
+también basada en esas
+características
+
+11:20.900 --> 11:34.900
+que hablábamos al
+principio.
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-clase-funciones-puras-e-impuras_e3c125f1-5bce-4b8b-a394-31d35f63fa55.js

@@ -0,0 +1,41 @@
+// Funciones puras
+
+// Side Effects
+// 1. Modificar variables globales
+// 2. Modificar parámetros
+// 3. Solicitudes HTTP
+// 4. Imprimir mensajes en pantalla o consola
+// 5. Manipulación del DOM
+// 6. Obtener la hora actual
+
+function sum (a, b) {
+  return a + b
+}
+
+// Funciones impuras
+
+function sum (a, b) {
+  console.log('A: ', a)
+  return a + b
+}
+
+let total = 0
+
+function sumWithSideEffect (a) {
+  total += a
+  return total
+}
+
+// Función pura
+
+function square(x) {
+  return x * x
+}
+
+function addTen (y) {
+  return y + 10
+}
+
+const number = 5
+const finalResut = addTen(square(number))
+console.log(finalResut)

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace Léxico en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f56fbce4d80dbac7e7dc9bd7a7b68face38bc81527813dfa261d75f14c9be40
+size 90119959

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace Léxico en JavaScript.vtt

@@ -0,0 +1,878 @@
+WEBVTT
+
+00:00.000 --> 00:03.300
+En esta clase vamos a hablar sobre las
+arrow functions
+
+00:03.300 --> 00:06.000
+y también sobre el lexical
+binding.
+
+00:06.000 --> 00:08.600
+Para ello, es importante que tengamos en
+cuenta
+
+00:08.600 --> 00:11.800
+esas funciones tradicionales que ya
+debemos conocer,
+
+00:11.800 --> 00:14.700
+que son justamente como las que estás
+viendo en pantalla.
+
+00:14.700 --> 00:19.300
+Tenemos una función, un nombre, unos
+parámetros, un cuerpo,
+
+00:19.300 --> 00:22.000
+y también tenemos un llamado a esa función.
+
+00:22.000 --> 00:23.800
+Pero bueno, te estarás
+preguntando
+
+00:23.800 --> 00:26.200
+por qué crear otro tipo de
+funciones
+
+00:26.200 --> 00:28.400
+si ya tenemos este tipo de
+funciones
+
+00:28.400 --> 00:30.100
+que estamos viendo en
+pantalla.
+
+00:30.100 --> 00:32.200
+Pues bien, la razón principal
+es,
+
+00:32.200 --> 00:35.200
+uno, para hacerlas un poco más cortas,
+
+00:35.200 --> 00:38.200
+y la segunda es para evitar todo este
+tema
+
+00:38.200 --> 00:40.200
+del dist, del
+contexto,
+
+00:40.200 --> 00:42.900
+para que no tengan ningún tipo de vinculación.
+
+00:42.900 --> 00:46.300
+Para ello, entonces, crearon las arrow
+functions,
+
+00:46.300 --> 00:48.200
+que son estas que estás viendo
+acá.
+
+00:48.200 --> 00:50.600
+Y algo muy característico
+es,
+
+00:50.600 --> 00:54.200
+primero, ya quitamos lo que es la palabra
+function
+
+00:54.200 --> 00:57.200
+y ya dejamos lo que es el const almuerzo,
+
+00:57.200 --> 01:01.200
+en este caso, que es netamente como una
+variable.
+
+01:01.200 --> 01:03.400
+Luego siguen lo que son los parámetros,
+
+01:03.400 --> 01:05.400
+y seguido está una
+flecha.
+
+01:05.400 --> 01:08.700
+Esa flecha es la que nos indica el return
+o ya,
+
+01:08.700 --> 01:12.000
+lo que vamos a continuar viendo después de
+las llaves,
+
+01:12.000 --> 01:13.200
+que es el
+body.
+
+01:13.200 --> 01:17.000
+Y luego está nuevamente lo que es el
+llamado de la función.
+
+01:17.000 --> 01:19.000
+Si ahorita estábamos
+hablando
+
+01:19.000 --> 01:22.000
+de que podíamos reducir la cantidad de
+líneas
+
+01:22.000 --> 01:24.700
+o de que fuera un poco más reducida esas
+funciones,
+
+01:24.700 --> 01:26.600
+pues bueno, aquí no lo estamos viendo,
+
+01:26.600 --> 01:28.100
+ciertamente, como más
+corta.
+
+01:28.100 --> 01:30.400
+Estamos viendo la misma cantidad de líneas.
+
+01:30.400 --> 01:32.000
+Entonces, lo que vamos a
+hacer
+
+01:32.000 --> 01:34.200
+es que vamos a ir a nuestro editor de
+código
+
+01:34.200 --> 01:37.400
+para compartirte, por supuesto, un montón
+de datos curiosos
+
+01:37.400 --> 01:40.600
+y formas también de crear estas arrow
+functions
+
+01:40.600 --> 01:43.000
+junto también con el enlace
+léxico.
+
+01:43.000 --> 01:46.200
+Vamos a comenzar escribiendo una función
+normal,
+
+01:46.200 --> 01:48.400
+tradicional, como las
+conocemos.
+
+01:48.400 --> 01:50.100
+Entonces, sería
+const,
+
+01:50.100 --> 01:53.000
+vamos a colocar una función de saludo,
+
+01:53.000 --> 01:56.400
+vamos a escribir lo que es function,
+en este caso,
+
+01:56.400 --> 02:01.000
+y seguido vamos a colocar, por ejemplo,
+un nombre
+
+02:01.000 --> 02:04.600
+en donde nosotros podamos aquí también
+retornar
+
+02:04.600 --> 02:06.400
+lo que es este
+nombre,
+
+02:06.400 --> 02:08.200
+como si fuera una especie de
+salud.
+
+02:08.200 --> 02:10.400
+Entonces, podemos colocar acá, por ejemplo,
+
+02:10.400 --> 02:13.300
+hola y el
+nombre.
+
+02:13.300 --> 02:14.600
+Listo. En este
+caso,
+
+02:14.600 --> 02:17.600
+estamos creando una expresión de función.
+
+02:17.600 --> 02:20.100
+Entonces, tenemos lo que es una función
+tradicional,
+
+02:20.100 --> 02:22.000
+no le tenemos el nombre a este lado,
+
+02:22.000 --> 02:24.300
+sino que simplemente creamos,
+¿qué?
+
+02:24.300 --> 02:26.800
+Una variable y ahí es donde
+tenemos
+
+02:26.800 --> 02:29.000
+esa asignación de la
+función.
+
+02:29.000 --> 02:32.100
+Ahora, si nosotros creamos una arrow function,
+
+02:32.100 --> 02:36.000
+voy a copiarme esto mismo, lo voy a pegar
+por acá,
+
+02:36.000 --> 02:38.700
+y tenemos esa misma
+función,
+
+02:38.700 --> 02:41.000
+voy a colocarle
+new
+
+02:41.000 --> 02:43.700
+para que no nos confunda aquí el programa,
+
+02:43.700 --> 02:45.400
+y seguido de esto lo que vamos a
+hacer
+
+02:45.400 --> 02:48.200
+es quitarle la palabra
+function,
+
+02:48.200 --> 02:52.000
+después lo que hacemos es agregarle una
+flecha,
+
+02:52.000 --> 02:53.800
+de ahí viene también su
+nombre.
+
+02:53.800 --> 02:57.100
+Entonces, simplemente lo que tenemos que
+tener en cuenta
+
+02:57.100 --> 02:58.900
+es que es la misma
+función,
+
+02:58.900 --> 03:00.900
+o la misma expresión de
+función,
+
+03:00.900 --> 03:05.100
+simplemente que sin el function y con la
+flecha.
+
+03:05.100 --> 03:07.600
+Por otro lado, lo que podemos
+hacer
+
+03:07.600 --> 03:10.100
+es dejarlo en una sola
+línea.
+
+03:10.100 --> 03:13.100
+Voy a colocarte por acá eso que vamos a hacer.
+
+03:13.100 --> 03:17.800
+Entonces, sería función flecha o arrow
+function,
+
+03:17.800 --> 03:21.900
+pero con un retorno que sea implícito.
+
+03:21.900 --> 03:24.900
+Entonces, implicit
+return.
+
+03:24.900 --> 03:26.400
+En este caso, ¿cómo
+sería?
+
+03:26.400 --> 03:30.100
+Ah, y te voy a colocar este comentario acá,
+
+03:30.100 --> 03:31.500
+este es
+explícito,
+
+03:31.500 --> 03:34.200
+es decir, nosotros directamente le estamos
+diciendo
+
+03:34.200 --> 03:36.000
+return tal
+cosa.
+
+03:36.000 --> 03:38.800
+En este caso, va a ser completamente distinto.
+
+03:38.800 --> 03:42.300
+Vamos a colocar nuevamente este saludo,
+
+03:42.300 --> 03:46.100
+new greeting, vamos a colocarle implicit,
+
+03:46.100 --> 03:49.900
+y lo que vamos a hacer es quitarle este
+return,
+
+03:49.900 --> 03:53.700
+pero para que nos funcione debemos
+quitarle también esta llave,
+
+03:53.700 --> 03:55.000
+la otra
+llave,
+
+03:55.000 --> 03:59.200
+y subir justamente lo que tenemos dentro
+de nuestro cuerpo.
+
+03:59.200 --> 04:01.800
+Por otro lado, algo importante a
+notar
+
+04:01.800 --> 04:06.100
+es que acá nosotros podemos quitarle los
+paréntesis
+
+04:06.100 --> 04:07.500
+a estos
+parámetros.
+
+04:07.500 --> 04:09.500
+¿Por qué? Porque solamente es
+uno.
+
+04:09.500 --> 04:11.500
+Entonces, lo podemos dejar
+así
+
+04:11.500 --> 04:13.900
+y también nos funcionaría nuestra función.
+
+04:13.900 --> 04:17.400
+¿En qué casos si necesitaríamos colocarle
+los paréntesis?
+
+04:17.400 --> 04:20.100
+Bueno, cuando tengamos más de un parámetro.
+
+04:20.100 --> 04:24.800
+Por ejemplo, si nosotros creamos esta otra
+función,
+
+04:24.800 --> 04:30.800
+implicit with two
+parameters,
+
+04:30.800 --> 04:32.000
+¿paraméteres?
+
+04:32.000 --> 04:36.900
+Aquí lo que hacemos es decirle name,
+last name,
+
+04:36.900 --> 04:38.200
+por
+ejemplo,
+
+04:38.200 --> 04:43.800
+y seguido le colocamos hola, yo soy, nombre,
+
+04:43.800 --> 04:46.600
+y luego le colocamos el
+apellido.
+
+04:46.600 --> 04:48.600
+Entonces, en este
+caso,
+
+04:48.600 --> 04:51.100
+realmente lo único que nos interesa ver
+acá
+
+04:51.100 --> 04:53.400
+son los parámetros y los paréntesis,
+
+04:53.400 --> 04:56.000
+es que acá netamente le colocamos los
+paréntesis
+
+04:56.000 --> 04:59.800
+y cuando es solamente un parámetro se los
+podemos quitar.
+
+04:59.800 --> 05:03.400
+Ahora, algo importante a revisar con estas
+arrow functions
+
+05:03.400 --> 05:06.000
+es precisamente la vinculación que
+tienen
+
+05:06.000 --> 05:09.200
+con el contexto de ejecución o con el dis.
+
+05:09.200 --> 05:11.600
+Para ello vamos a crear otro ejemplo.
+
+05:11.600 --> 05:13.600
+Entonces, venimos por este
+lado
+
+05:13.600 --> 05:17.600
+y vamos a escribir lexical
+binding.
+
+05:17.600 --> 05:18.600
+Muy
+bien.
+
+05:18.600 --> 05:21.000
+Entonces, por este lado lo que vamos a
+hacer es
+
+05:21.000 --> 05:22.800
+primero crear un
+objeto
+
+05:22.800 --> 05:24.800
+y vamos a crear
+métodos.
+
+05:24.800 --> 05:27.600
+El primer método va a ser con una función
+tradicional
+
+05:27.600 --> 05:30.600
+y el segundo va a ser con arrow
+functions
+
+05:30.600 --> 05:34.600
+precisamente para que veamos cómo cambia
+ese enlace léxico
+
+05:34.600 --> 05:37.800
+o ese enlace, justamente esa vinculación
+con el dis.
+
+05:37.800 --> 05:40.600
+Creemos entonces nuestro
+objeto.
+
+05:40.600 --> 05:43.600
+Sería const
+fictionalCharacter.
+
+05:43.600 --> 05:47.600
+Entonces,
+fictionalCharacter,
+
+05:47.600 --> 05:49.600
+character.
+
+05:49.600 --> 05:51.600
+Y vamos a abrir entonces nuestras
+llaves
+
+05:51.600 --> 05:53.600
+para empezar a crear nuestro objeto.
+
+05:53.600 --> 05:55.600
+Lo primero es colocar un
+nombre.
+
+05:55.600 --> 05:57.600
+Entonces, vamos a colocar
+name.
+
+05:57.600 --> 06:00.600
+En este caso voy a colocar al tío Ben,
+
+06:00.600 --> 06:03.600
+uncle Ben, del Hombre
+Araña.
+
+06:03.600 --> 06:06.600
+Y acá lo que voy a colocar es un
+mensaje
+
+06:06.600 --> 06:08.600
+con la función
+tradicional.
+
+06:08.600 --> 06:15.600
+Entonces, coloquemos message with
+traditional function.
+
+06:15.600 --> 06:16.600
+Excelente.
+
+06:16.600 --> 06:18.600
+Y acá colocamos la
+función,
+
+06:18.600 --> 06:21.600
+que sería
+function,
+
+06:21.600 --> 06:24.600
+seguido de el
+parámetro,
+
+06:24.600 --> 06:26.600
+que va a ser quién, el
+mensaje,
+
+06:26.600 --> 06:28.600
+message,
+
+06:28.600 --> 06:30.600
+y dentro vamos a colocar un
+cuerpo.
+
+06:30.600 --> 06:32.600
+Este cuerpo lo ideal es que tenga el
+dis
+
+06:32.600 --> 06:35.600
+para que podamos ver cómo esa diferencia.
+
+06:35.600 --> 06:38.600
+Entonces, colocamos
+console.log
+
+06:38.600 --> 06:41.600
+y dentro lo que hacemos es hacer esa
+vinculación.
+
+06:41.600 --> 06:46.600
+Podemos colocar, por ejemplo, dis.name,
+
+06:46.600 --> 06:48.600
+en este caso para que tomemos este
+name
+
+06:48.600 --> 06:49.600
+que está por
+aquí,
+
+06:49.600 --> 06:52.600
+y luego decimos el tío Ben
+dice,
+
+06:52.600 --> 06:54.600
+y ¿qué podría
+decir?
+
+06:54.600 --> 06:59.600
+Bueno, el mensaje que le estamos mandando
+como parámetro.
+
+06:59.600 --> 07:01.600
+Entonces, aquí, recapitulación rápida.
+
+07:01.600 --> 07:03.600
+Tenemos un
+objeto.
+
+07:03.600 --> 07:05.600
+En este caso tenemos un nombre dentro de
+ese objeto
+
+07:05.600 --> 07:06.600
+que es el tío
+Ben,
+
+07:06.600 --> 07:09.600
+y tenemos un método, en este
+caso,
+
+07:09.600 --> 07:12.600
+que es el mensaje del tío Ben, en este caso,
+
+07:12.600 --> 07:16.600
+que toma el nombre que tiene dentro de ese
+objeto
+
+07:16.600 --> 07:19.600
+y también un mensaje que le vamos a pasar
+por parámetro.
+
+07:19.600 --> 07:23.600
+Seguido, vamos a crear exactamente esto mismo,
+
+07:23.600 --> 07:24.600
+tan, tan,
+tan,
+
+07:24.600 --> 07:28.600
+pero lo vamos a hacer con una función de
+arrow function.
+
+07:28.600 --> 07:31.600
+Entonces, vamos a colocar with arrow function,
+
+07:31.600 --> 07:34.600
+y aquí, por supuesto, vamos a cambiarlo.
+
+07:34.600 --> 07:36.600
+Le quitamos la palabra
+function
+
+07:36.600 --> 07:40.600
+y le colocamos la flechita por
+acá.
+
+07:40.600 --> 07:41.600
+Muy
+bien.
+
+07:41.600 --> 07:46.600
+Y así ya tendríamos nuestro objeto con dos
+métodos.
+
+07:46.600 --> 07:49.600
+Ahora sigue el turno de la ejecución.
+
+07:49.600 --> 07:53.600
+Entonces, vamos a colocar fictional character,
+
+07:53.600 --> 07:55.600
+lo traemos por aquí
+abajo,
+
+07:55.600 --> 07:57.600
+y le decimos que nos llame a
+quién,
+
+07:57.600 --> 08:00.600
+a este mensaje con la función tradicional.
+
+08:00.600 --> 08:02.600
+En este caso, lo que vamos a
+hacer
+
+08:02.600 --> 08:07.600
+es netamente pasarle el mensaje que
+necesitamos ahí como parámetro.
+
+08:07.600 --> 08:09.600
+Entonces, ¿qué le vamos a
+decir?
+
+08:09.600 --> 08:11.600
+Le vamos a decir, por
+ejemplo,
+
+08:11.600 --> 08:21.600
+with great power comes great responsibility.
+
+08:21.600 --> 08:24.600
+Entonces, un gran poder conlleva una gran
+responsabilidad.
+
+08:24.600 --> 08:27.600
+Y luego vamos a colocar exactamente lo mismo,
+
+08:27.600 --> 08:30.600
+solo que vamos a cambiar el
+método,
+
+08:30.600 --> 08:33.600
+en este caso sería con arrow function,
+
+08:33.600 --> 08:35.600
+y vamos a cambiar este
+mensaje.
+
+08:35.600 --> 08:39.600
+Puede ser, por ejemplo, voy a colocarle
+por acá,
+
+08:39.600 --> 08:43.600
+beware, que lo haya escrito bien, sí,
+
+08:43.600 --> 08:46.600
+of Dr.
+Octopus.
+
+08:46.600 --> 08:48.600
+Cuidado con el Dr.
+Octopus.
+
+08:48.600 --> 08:49.600
+Listo.
+
+08:49.600 --> 08:50.600
+Ahí es
+cualquiera.
+
+08:50.600 --> 08:52.600
+Cualquier mensaje que nosotros queramos pone.
+
+08:52.600 --> 08:53.600
+OK.
+
+08:53.600 --> 08:54.600
+Vamos a
+guardar,
+
+08:54.600 --> 08:57.600
+y lo que vamos a hacer es correr nuestro
+código.
+
+08:57.600 --> 09:01.600
+Para ello, colocamos node, clase y ejecutamos.
+
+09:01.600 --> 09:04.600
+Aquí mira lo
+interesante.
+
+09:04.600 --> 09:07.600
+Resulta que en la primera
+función,
+
+09:07.600 --> 09:08.600
+en esta que
+ejecutamos,
+
+09:08.600 --> 09:10.600
+nos sale el tío Ben
+dice,
+
+09:10.600 --> 09:13.600
+un gran poder conlleva una gran
+responsabilidad,
+
+09:13.600 --> 09:14.600
+todo súper
+bien,
+
+09:14.600 --> 09:18.600
+pero en la segunda nos sale que indefinido
+dice,
+
+09:18.600 --> 09:20.600
+cuidado con
+x.
+
+09:20.600 --> 09:21.600
+Listo.
+
+09:20.600 --> 09:21.600
+Entonces, mira lo
+interesante,
+
+09:21.600 --> 09:25.600
+y es que aquí, this para esta arrow
+function
+
+09:25.600 --> 09:27.600
+es como si no
+existiera,
+
+09:27.600 --> 09:29.600
+como si no fuera este
+objeto.
+
+09:29.600 --> 09:32.600
+Y aquí es donde hablamos precisamente de
+ese enlace léxico,
+
+09:32.600 --> 09:34.600
+es decir, que no hay una
+vinculación
+
+09:34.600 --> 09:37.600
+justamente en este tipo de
+casos.
+
+09:37.600 --> 09:40.600
+Entonces, esto es algo increíble que
+podemos revisar
+
+09:40.600 --> 09:41.600
+y una de las grandes
+diferencias
+
+09:41.600 --> 09:44.600
+que también podemos notar con las
+funciones tradicionales
+
+09:44.600 --> 09:46.600
+y las arrow
+functions.
+
+09:46.600 --> 09:48.600
+Y aquí, mientras te estaba contando todo
+esto
+
+09:48.600 --> 09:51.600
+de las funciones, el this y
+demás,
+
+09:51.600 --> 09:54.600
+me acabo de dar cuenta que este
+great
+
+09:54.600 --> 09:57.600
+le falta justamente la
+g.
+
+09:57.600 --> 09:59.600
+Y para que esto no te suceda como a mí,
+
+09:59.600 --> 10:01.600
+hay una extensión
+poderosísima,
+
+10:01.600 --> 10:03.600
+hay una herramienta espectacular que te
+puede servir,
+
+10:03.600 --> 10:06.600
+te la dejo, por supuesto, en la cajita de
+recursos
+
+10:06.600 --> 10:08.600
+para que si estás trabajando en inglés,
+
+10:08.600 --> 10:11.600
+pues este tipo de typos no te sucedan.
+
+10:11.600 --> 10:13.600
+Entonces, ya en
+resumen,
+
+10:13.600 --> 10:16.600
+lo que vimos en esta clase es arrow functions,
+
+10:16.600 --> 10:18.600
+la diferencia también con las funciones
+tradicionales,
+
+10:18.600 --> 10:21.600
+y también el lexical
+binding,
+
+10:21.600 --> 10:24.600
+o también en español como enlace léxico.
+
+10:24.600 --> 10:26.600
+Cuéntame, por favor, en los comentarios,
+
+10:26.600 --> 10:28.600
+¿cuál es tu forma favorita de escribir
+funciones?
+
+10:28.600 --> 10:47.600
+Si con la función tradicional o con las
+arrow functions.
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-clase-arrow-functions_7e661920-826a-43c9-97cf-d5d67e3de5ea.js

@@ -0,0 +1,29 @@
+const greeting = function (name) {
+  return `Hi, ${name}`
+}
+
+// Arrow function - explicit return 
+
+const newGreeting = (name) => {
+  return `Hi, ${name}`
+}
+
+// Arrow function - implicit return 
+
+const newGreetingImplicit = name => `Hi, ${name}`
+const newGreetingImplicitWithTwoParameters = (name, lastName) => `Hi, I'm ${name} ${lastName}`
+
+// Lexical Binding
+
+const finctionalCharacter = {
+  name: 'Uncle Ben',
+  messageWithTraditionalFunction: function (message) {
+    console.log(`${this.name} says: ${message}`)
+  },
+  messageWithArrowFunction: (message) => {
+    console.log(`${this.name} says: ${message}`)
+  }
+}
+
+finctionalCharacter.messageWithTraditionalFunction('With great power comes great responsability.')
+finctionalCharacter.messageWithArrowFunction('Beware of Doctor Octopus.')

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecución en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bebf8f7bd0328e8f753a89d812ed151c5afdeb19c739abb76b4de544d52ed7eb
+size 58855670

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecución en JavaScript.vtt

@@ -0,0 +1,1070 @@
+WEBVTT
+
+00:00.000 --> 00:03.440
+En esta clase vamos a hablar sobre los
+contextos de ejecución
+
+00:03.440 --> 00:07.440
+y el scope chain, o también conocido como
+cadena de alcances.
+
+00:08.000 --> 00:10.600
+¿Por qué es que son importantes estos dos
+conceptos?
+
+00:10.960 --> 00:14.000
+Resulta que en JavaScript podemos escribir
+variables
+
+00:14.000 --> 00:16.600
+con diferentes tipos de palabras claves,
+
+00:16.600 --> 00:19.200
+como lo son var, let y
+const.
+
+00:19.440 --> 00:22.000
+Pero resulta que estas tres palabras
+claves
+
+00:22.000 --> 00:23.880
+tienen ciertas
+diferencias,
+
+00:23.880 --> 00:28.280
+y gracias a esas diferencias es que
+decidimos utilizar una u otra.
+
+00:28.280 --> 00:32.760
+Resulta que entre esas diferencias tenemos
+el scope, el hoisting,
+
+00:32.760 --> 00:35.960
+si pueden ser reasignadas o si pueden ser
+redeclaradas.
+
+00:36.280 --> 00:41.280
+En este caso, por ejemplo, tenemos que var
+tiene un scope de tipo function,
+
+00:41.480 --> 00:43.880
+que let tiene un scope de tipo bloque,
+
+00:44.080 --> 00:46.960
+y que const también tiene un scope de tipo
+bloque.
+
+00:47.080 --> 00:50.360
+Lo importante es tener súper presente esas
+diferencias
+
+00:50.560 --> 00:53.680
+a la hora, por supuesto, de empezar con
+contextos de ejecución
+
+00:53.880 --> 00:56.080
+y con todo este tema de
+scopes
+
+00:56.080 --> 00:59.560
+y el por qué es que es tan importante
+estos dos tipos de conceptos.
+
+00:59.960 --> 01:02.760
+Para ello, vamos a empezar a ver un código,
+
+01:02.760 --> 01:04.760
+que es este que tenemos aquí en pantalla,
+
+01:05.160 --> 01:07.960
+y como podemos observar, tenemos unas
+variables
+
+01:07.960 --> 01:10.080
+que ya están declaradas con
+const,
+
+01:10.280 --> 01:13.760
+como lo son productName, price y brand.
+
+01:13.960 --> 01:17.480
+Resulta que todo lo que vemos al lado
+izquierdo del igual
+
+01:17.760 --> 01:21.560
+es, por supuesto, lo que es la declaración
+de las variables.
+
+01:21.560 --> 01:25.760
+Y lo que está después del igual es la
+asignación de estas variables.
+
+01:26.160 --> 01:30.160
+Luego tenemos una función que por dentro
+hace ciertas cosas,
+
+01:30.160 --> 01:33.160
+entre ellas declarar nuevamente dos variables,
+
+01:33.360 --> 01:35.360
+y luego tenemos un
+return.
+
+01:35.760 --> 01:38.360
+En este return tenemos un
+string,
+
+01:38.560 --> 01:41.360
+y ese string dice, the
+productName,
+
+01:41.560 --> 01:43.560
+ahí ya está tomando una de las
+variables
+
+01:43.560 --> 01:46.760
+que nosotros ya declaramos y asignamos
+anteriormente,
+
+01:46.960 --> 01:50.560
+luego dice costs, y luego dice price,
+
+01:50.560 --> 01:53.760
+ese price también es como si estuviera
+tomando otra variable,
+
+01:54.160 --> 01:56.560
+sigue nuestra cadena de
+texto,
+
+01:56.560 --> 01:59.960
+y al final también está utilizando una
+variable de esas
+
+01:59.960 --> 02:02.760
+que ya estamos asignando y declarando arriba.
+
+02:03.760 --> 02:07.160
+Finalmente, debajo de esa función tenemos
+un console.log
+
+02:07.160 --> 02:09.160
+que ejecuta esta
+función.
+
+02:09.560 --> 02:12.760
+Lo importante acá es tener en cuenta qué
+es lo que va a pasar.
+
+02:12.960 --> 02:16.560
+Resulta que la salida es justamente de laptop,
+
+02:16.760 --> 02:20.160
+ahí ya podemos ver que productName es quién,
+
+02:20.160 --> 02:23.960
+justamente la variable que declaramos y
+asignamos
+
+02:23.960 --> 02:25.960
+dentro de la
+función.
+
+02:26.160 --> 02:29.960
+Luego dice costs, y de ahí sigue el
+valor
+
+02:29.960 --> 02:32.960
+que cogió justamente el
+899.
+
+02:33.160 --> 02:36.960
+Este también nos indica que tomó la
+variable que asignamos
+
+02:36.960 --> 02:39.960
+y declaramos justo dentro de la función,
+
+02:40.160 --> 02:42.960
+y al final lo que es la variable brand,
+
+02:42.960 --> 02:45.960
+la tomó de dónde, de arriba de la función,
+
+02:45.960 --> 02:48.560
+es decir, que se salió
+justamente,
+
+02:48.560 --> 02:53.560
+y tomó ese techCode que habíamos asignado
+y declarado inicialmente.
+
+02:53.760 --> 02:59.960
+La salida de este código es de laptop, costs,
+899,
+
+02:59.960 --> 03:03.760
+él tomó ese valor, y luego dice techCode.
+
+03:03.760 --> 03:06.960
+Lo importante es básicamente saber cuál es
+la salida
+
+03:06.960 --> 03:08.560
+en cuanto a
+variables.
+
+03:08.760 --> 03:12.360
+Entonces, vamos a ver de dónde él sacó
+justamente esos valores.
+
+03:12.760 --> 03:15.960
+Entonces, productName, aquí podemos ver
+que lo tomó
+
+03:15.960 --> 03:18.960
+de la variable que nosotros declaramos y
+asignamos
+
+03:18.960 --> 03:21.960
+dentro de la función, al igual que price,
+
+03:21.960 --> 03:25.360
+que también lo tomó de la variable que
+está dentro de la función,
+
+03:25.560 --> 03:29.560
+y lo que es brand lo tomó de afuera de esa
+función.
+
+03:29.760 --> 03:33.360
+Ahora veamos esto que vamos a colocar a
+continuación.
+
+03:33.560 --> 03:37.560
+Es el mismo código, tenemos las tres
+variables asignadas arriba,
+
+03:37.760 --> 03:41.160
+la función con las mismas variables que
+teníamos anteriormente,
+
+03:41.360 --> 03:45.160
+solo que en el console.log ya no estamos
+ejecutando la función,
+
+03:45.160 --> 03:48.160
+sino que estamos colocando una cadena de
+texto
+
+03:48.360 --> 03:52.360
+que tiene también esas variables de
+productName, price y brand.
+
+03:52.560 --> 03:55.760
+Cuéntame en los comentarios cuál crees que
+es la salida
+
+03:55.760 --> 03:57.160
+ahora de este
+código.
+
+03:57.360 --> 04:01.160
+La salida es de smartphone, ahí ya vemos
+que cambió,
+
+04:01.360 --> 04:06.560
+el costo también cambió y la marca, el brand,
+también cambió.
+
+04:06.760 --> 04:08.760
+Revisemos qué fue lo que hizo en este caso.
+
+04:08.960 --> 04:12.160
+Acá, productName lo tomó de
+dónde?
+
+04:12.360 --> 04:14.160
+De afuera de la
+función.
+
+04:14.160 --> 04:18.160
+Luego, el precio también lo tomó de afuera
+de la función
+
+04:18.360 --> 04:21.360
+y brand también lo tomó de afuera de la
+función.
+
+04:21.560 --> 04:23.360
+Cuéntame en los comentarios, por favor,
+
+04:23.560 --> 04:25.760
+por qué crees que sucede este tipo de cosas,
+
+04:25.960 --> 04:29.760
+porque en el código anterior lo tomó
+justamente de variables internas
+
+04:29.960 --> 04:31.960
+y luego no lo tomó de variables internas.
+
+04:32.160 --> 04:35.760
+Aquí podemos ver que estas variables que
+están arriba
+
+04:35.960 --> 04:37.960
+son las que priman en este
+código
+
+04:38.160 --> 04:41.160
+y que esta función fue completamente ignorada.
+
+04:41.160 --> 04:45.960
+Revisemos este concepto justamente con
+estas muñecas rusas
+
+04:46.160 --> 04:49.360
+que básicamente es una muñeca
+gigante
+
+04:49.560 --> 04:52.360
+que puede almacenar otras muñecas por dentro,
+
+04:52.560 --> 04:53.760
+dependiendo de su
+tamaño.
+
+04:53.960 --> 04:57.760
+Y así es como funciona el contexto de
+ejecución en JavaScript.
+
+04:57.960 --> 05:02.360
+Resulta que podemos tener código que puede
+almacenar otro código.
+
+05:02.560 --> 05:04.960
+Entonces, el contexto global sería
+quién?
+
+05:05.160 --> 05:06.560
+La muñeca más
+grande.
+
+05:06.760 --> 05:08.360
+Y el contexto local
+sería,
+
+05:08.560 --> 05:10.560
+como haciendo la analogía con nuestro código,
+
+05:10.560 --> 05:12.960
+serían las funciones o ciertos
+bloques
+
+05:13.160 --> 05:14.960
+que también nos podemos encontrar por ahí.
+
+05:15.160 --> 05:19.560
+Veamos esto en nuestro ejemplo número 2
+que vimos hace ratico.
+
+05:19.760 --> 05:23.160
+Tenemos este código en donde el contexto
+global,
+
+05:23.360 --> 05:26.160
+es decir, la muñeca más grande, sería
+quién?
+
+05:26.360 --> 05:28.160
+Todas esas variables que escribimos
+arriba
+
+05:28.360 --> 05:30.960
+y el console.log que está en la parte de
+abajo,
+
+05:31.160 --> 05:35.760
+excepto la función, porque la función
+sería el contexto local.
+
+05:35.960 --> 05:39.760
+¿Cuándo nosotros hablamos o cuándo podemos
+saber esas diferencias?
+
+05:39.760 --> 05:42.160
+Pues justamente cuando tenemos llaves.
+
+05:42.360 --> 05:44.360
+En este caso, las llaves donde aparecen,
+
+05:44.560 --> 05:46.560
+cuando creamos una
+función.
+
+05:46.760 --> 05:50.160
+Y ahí ya estamos hablando de que este es
+una muñeca interna
+
+05:50.360 --> 05:52.960
+y justamente tendríamos un solo contexto
+global
+
+05:53.160 --> 05:55.360
+que sería todo lo que esté por fuera de
+las llaves,
+
+05:55.560 --> 05:58.160
+como su nombre lo indica en la parte global.
+
+05:58.360 --> 06:01.560
+Ahora, cosas que debemos tener súper
+presentes.
+
+06:01.760 --> 06:03.960
+Uno, del contexto
+global,
+
+06:04.160 --> 06:07.760
+no podemos acceder a contextos locales.
+
+06:07.960 --> 06:09.160
+Eso
+no.
+
+06:09.160 --> 06:12.360
+Pero sí podemos, desde contextos locales,
+
+06:12.560 --> 06:15.160
+poder acceder a variables que estén
+afuera
+
+06:15.360 --> 06:16.960
+o en ese contexto
+global.
+
+06:17.160 --> 06:18.760
+Por eso, en el primer
+ejemplo,
+
+06:18.960 --> 06:21.560
+nosotros sí podíamos acceder a
+productName
+
+06:21.760 --> 06:23.760
+que estaba por fuera de la
+función.
+
+06:23.960 --> 06:25.960
+Vamos ahora con otro
+ejemplo.
+
+06:26.160 --> 06:28.560
+Tenemos este código de
+acá,
+
+06:28.760 --> 06:30.960
+en donde inicialmente tenemos una variable,
+
+06:31.160 --> 06:32.560
+luego una
+función,
+
+06:32.760 --> 06:34.760
+y dentro de la función tenemos
+¿qué?
+
+06:34.960 --> 06:35.960
+Un
+condicional.
+
+06:36.160 --> 06:38.560
+Si los puntos del usuario son menores a 100,
+
+06:38.560 --> 06:40.760
+va a suceder lo primero de ese
+condicional
+
+06:40.960 --> 06:44.160
+y si no, va a suceder lo segundo de este
+condicional.
+
+06:44.360 --> 06:46.360
+Y finalmente, tenemos un
+Console.Log
+
+06:46.560 --> 06:48.560
+que nos ejecuta esta
+función.
+
+06:48.760 --> 06:51.560
+Resulta que aquí lo importante es
+definir
+
+06:51.760 --> 06:53.760
+¿quién es el contexto
+global
+
+06:53.960 --> 06:56.760
+y quién es el contexto o contextos
+locales?
+
+06:56.960 --> 06:59.360
+Así que cuéntame, por favor, en los
+comentarios,
+
+06:59.560 --> 07:00.960
+si quieres tomarle un
+screenshot,
+
+07:01.160 --> 07:03.160
+y trata de definir
+justamente
+
+07:03.360 --> 07:05.960
+cuáles son los contextos que podemos
+identificar acá,
+
+07:05.960 --> 07:08.560
+cuáles son los globales y cuáles son los
+locales.
+
+07:13.760 --> 07:16.760
+Resulta que para eso tenemos que
+identificar muy bien
+
+07:16.960 --> 07:18.360
+qué es un
+bloque,
+
+07:18.560 --> 07:20.960
+porque de allí es que nosotros podemos
+identificar
+
+07:21.160 --> 07:23.160
+esos contextos locales
+justamente.
+
+07:23.360 --> 07:24.960
+¿Quiénes son esos
+bloques?
+
+07:25.160 --> 07:27.160
+Bueno, primero puede ser una
+función
+
+07:27.360 --> 07:29.960
+en donde vemos que abre y cierra con llaves,
+
+07:30.160 --> 07:32.160
+esa apertura y ese
+cierre
+
+07:32.360 --> 07:34.360
+nos indica justamente que hay un bloque.
+
+07:34.360 --> 07:36.360
+¿En dónde más podemos ver
+esto?
+
+07:36.560 --> 07:38.560
+En JavaScript, en For, en un
+While,
+
+07:38.760 --> 07:40.760
+en un condicional como
+NIF,
+
+07:40.960 --> 07:42.960
+y también si nosotros abrimos y
+cerramos
+
+07:43.160 --> 07:45.160
+esas llaves de forma
+sola.
+
+07:45.360 --> 07:47.960
+Ahora, tenemos este código
+nuevamente
+
+07:48.160 --> 07:51.160
+y vamos a empezar a definir cuáles son
+nuestros contextos
+
+07:51.360 --> 07:53.760
+o cuáles son los que podemos identificar
+justamente.
+
+07:53.960 --> 07:55.960
+Tenemos en nuestra primera
+instancia
+
+07:56.160 --> 07:58.160
+la variable que creamos
+inicialmente
+
+07:58.360 --> 07:59.960
+que es
+userPoints,
+
+08:00.160 --> 08:02.160
+eso estaría dentro del contexto global,
+
+08:02.160 --> 08:04.160
+y también nuestro
+console.log.
+
+08:04.360 --> 08:06.360
+Ahí ya empezamos a
+notar
+
+08:06.560 --> 08:08.560
+que nuestra función es un
+bloque,
+
+08:08.760 --> 08:11.760
+porque ya vimos que abre y cierra con llaves,
+
+08:11.960 --> 08:13.960
+y está
+opaco.
+
+08:14.160 --> 08:16.160
+Ese tema de que esté
+opaco
+
+08:16.360 --> 08:18.360
+nos indica que
+justamente
+
+08:18.560 --> 08:20.560
+es otro tipo de
+bloque,
+
+08:20.760 --> 08:22.760
+y aquí ya empezamos a
+decir
+
+08:22.960 --> 08:24.960
+que es un contexto
+local.
+
+08:25.160 --> 08:28.160
+Este sería nuestro primer contexto local,
+
+08:28.360 --> 08:30.360
+el segundo sería este de
+acá,
+
+08:30.360 --> 08:32.360
+y el tercero sería la segunda
+parte
+
+08:32.560 --> 08:34.560
+de nuestro
+condicional.
+
+08:34.760 --> 08:36.760
+Teniendo entonces un contexto global,
+
+08:36.960 --> 08:38.960
+y luego tenemos
+ya
+
+08:39.160 --> 08:41.160
+varios contextos
+locales.
+
+08:41.360 --> 08:43.360
+A eso es lo que se le
+conoce
+
+08:43.560 --> 08:45.560
+con el nombre de
+scopeChain
+
+08:45.760 --> 08:47.760
+o cadena de
+alcances.
+
+08:47.960 --> 08:49.960
+Es decir, como su nombre lo
+indica,
+
+08:50.160 --> 08:52.160
+esas variables, ¿a dónde tienen
+alcance?
+
+08:52.360 --> 08:54.360
+Y como vimos en esta clase al principio,
+
+08:54.560 --> 08:56.560
+podemos ir del contexto
+local
+
+08:56.760 --> 08:58.760
+al contexto
+global,
+
+08:58.760 --> 09:00.760
+o de lo más
+pequeño,
+
+09:00.960 --> 09:02.960
+de las muñecas más pequeñas a las más grandes,
+
+09:03.160 --> 09:05.160
+y no en el otro
+sentido,
+
+09:05.360 --> 09:07.360
+de afuera hacia adentro, eso no lo podemos
+hacer.
+
+09:07.560 --> 09:09.560
+Ahora veamos el último
+ejemplo.
+
+09:09.760 --> 09:11.760
+Tenemos una
+variable
+
+09:11.960 --> 09:13.960
+que se llama
+globalVariable,
+
+09:14.160 --> 09:16.160
+que está declarada y asignada con const.
+
+09:16.360 --> 09:18.360
+Luego tenemos una
+función
+
+09:18.560 --> 09:20.560
+que se llama
+local1,
+
+09:20.760 --> 09:22.760
+y dentro tenemos dos
+console.log,
+
+09:22.960 --> 09:24.960
+inicialmente.
+
+09:25.160 --> 09:27.160
+El primer console.log dice
+global1,
+
+09:27.160 --> 09:29.160
+y el segundo dice
+local1.
+
+09:29.360 --> 09:31.360
+Luego tenemos una
+función,
+
+09:31.560 --> 09:33.560
+también por dentro tiene un console.
+log,
+
+09:33.760 --> 09:35.760
+tenemos otra función que se llama local3,
+
+09:35.960 --> 09:37.960
+también tiene un
+console.log,
+
+09:38.160 --> 09:40.160
+y en la primera
+función,
+
+09:40.360 --> 09:42.360
+en la
+grande,
+
+09:42.560 --> 09:44.560
+tenemos la
+ejecución
+
+09:44.760 --> 09:46.760
+de las dos funciones que son internas.
+
+09:46.960 --> 09:48.960
+Y luego ya en nuestro contexto
+global
+
+09:49.160 --> 09:51.160
+tenemos un
+console.log
+
+09:51.360 --> 09:53.360
+que nos ejecuta esa función
+grande
+
+09:53.560 --> 09:55.560
+que es
+local1.
+
+09:55.560 --> 09:57.560
+Y aquí tenemos justamente
+global1
+
+09:57.760 --> 09:59.760
+y una carita
+feliz,
+
+09:59.960 --> 10:01.960
+pero resulta que en el segundo console.
+log
+
+10:02.160 --> 10:04.160
+él ya nos dice que hay un
+error.
+
+10:04.360 --> 10:06.360
+Dice, ey, pues qué
+pena,
+
+10:06.560 --> 10:08.560
+pero localVariable no está definido.
+
+10:08.760 --> 10:10.760
+Resulta que aquí lo que está
+sucediendo
+
+10:10.960 --> 10:12.960
+es que precisamente esa
+función,
+
+10:13.160 --> 10:15.160
+como ya tenemos un contexto
+local,
+
+10:15.360 --> 10:17.360
+dice, localVariable no está
+acá,
+
+10:17.560 --> 10:19.560
+¿qué tengo que
+hacer?
+
+10:19.760 --> 10:21.760
+Bueno, ir a mirar al contexto global,
+
+10:21.960 --> 10:23.960
+es decir, salirme de esa función a ver si
+existe.
+
+10:23.960 --> 10:25.960
+Y bueno, como no existe, pues va a salir
+un error.
+
+10:26.160 --> 10:28.160
+Ahora, lo que vamos a
+hacer
+
+10:28.360 --> 10:30.360
+es comentar ese
+console.log,
+
+10:30.560 --> 10:32.560
+ese
+segundo,
+
+10:32.760 --> 10:34.760
+que nos está saliendo ese
+error,
+
+10:34.960 --> 10:36.960
+y vamos a seguir ejecutando nuestro
+código
+
+10:37.160 --> 10:39.160
+a ver qué
+sucede.
+
+10:39.360 --> 10:41.360
+Ahora, cuéntame en los
+comentarios,
+
+10:41.560 --> 10:43.560
+haciendo ese comentario del console.
+log,
+
+10:43.760 --> 10:45.760
+¿cuál es la
+salida?
+
+10:45.960 --> 10:47.960
+La salida justamente es
+global1,
+
+10:48.160 --> 10:50.160
+la carita
+feliz,
+
+10:50.360 --> 10:52.360
+y luego vemos que pasa a la función
+interna
+
+10:52.360 --> 10:54.360
+que se llama
+local2.
+
+10:54.560 --> 10:56.560
+Ahí tenemos un
+console.log
+
+10:56.760 --> 10:58.760
+que dice
+local2,
+
+10:58.960 --> 11:00.960
+y va a tomar esa variable que se llama carrot.
+
+11:01.160 --> 11:03.160
+Y
+justamente
+
+11:03.360 --> 11:05.360
+nos sale en la salida del
+código
+
+11:05.560 --> 11:07.560
+local2 y el
+emoji,
+
+11:07.760 --> 11:09.760
+o el emoticón de esta
+zanahoria.
+
+11:09.960 --> 11:11.960
+Y
+luego
+
+11:12.160 --> 11:14.160
+pasamos a la función que dice local3.
+
+11:14.360 --> 11:16.360
+Ahí tenemos un
+console.log
+
+11:16.560 --> 11:18.560
+que dice
+local3,
+
+11:18.760 --> 11:20.760
+y seguido esa
+variable
+
+11:20.760 --> 11:22.760
+que se llama
+carrot.
+
+11:22.960 --> 11:24.960
+Resulta que como en esta
+función
+
+11:25.160 --> 11:27.160
+de local3 no
+tenemos
+
+11:27.360 --> 11:29.360
+internamente ninguna variable que se
+llame
+
+11:29.560 --> 11:31.560
+de esa forma, pues ¿el qué va a
+hacer?
+
+11:31.760 --> 11:33.760
+Bueno, yo soy contexto local, voy a
+mirar
+
+11:33.960 --> 11:35.960
+en el contexto global, que en este
+caso
+
+11:36.160 --> 11:38.160
+quién sería, una función más arriba,
+
+11:38.360 --> 11:40.360
+es decir, la que dice
+local1,
+
+11:40.560 --> 11:42.560
+ahí tampoco hay una variable que se llame
+carrot,
+
+11:42.760 --> 11:44.760
+y él lo que hace es salirse otra
+vez
+
+11:44.960 --> 11:46.960
+de ese contexto, ya llegaría al
+contexto
+
+11:47.160 --> 11:49.160
+global que sería donde está el global
+variable,
+
+11:49.160 --> 11:51.160
+tampoco encuentra la
+variable
+
+11:51.360 --> 11:53.360
+carrot, y lo que hace es
+salir
+
+11:53.560 --> 11:55.560
+justamente un error, porque no lo encontró.
+
+11:55.760 --> 11:57.760
+Es decir, que entre
+contextos
+
+11:57.960 --> 11:59.960
+locales, como lo es
+local3
+
+12:00.160 --> 12:02.160
+y local2, no se
+pueden
+
+12:02.360 --> 12:04.360
+comunicar. Lo único que podemos
+hacer
+
+12:04.560 --> 12:06.560
+es como las muñecas, ir
+de
+
+12:06.760 --> 12:08.760
+pequeña a grande, y no
+podemos
+
+12:08.960 --> 12:10.960
+comunicarnos entre
+muñecas
+
+12:11.160 --> 12:13.160
+iguales, que en este caso, ¿quiénes serían
+las internas?
+
+12:13.360 --> 12:15.360
+local2 y
+local3.
+
+12:15.560 --> 12:17.560
+Y por eso tenemos ese
+error.
+
+12:17.560 --> 12:19.560
+Cuéntame, por favor, si te
+esperabas
+
+12:19.560 --> 12:47.560
+este resultado en este
+código.
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y Ámbito Léxico en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1aea2675a35e350e23e984c94860af990a21f456007af5e6f69cb794f7367a5a
+size 45913818

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y Ámbito Léxico en JavaScript.vtt

@@ -0,0 +1,324 @@
+WEBVTT
+
+00:00.000 --> 00:03.280
+En esta clase vamos a estar hablando sobre
+los closures.
+
+00:03.600 --> 00:09.840
+Para ello vamos a revisar su definición
+que es básicamente una función que tiene acceso a
+
+00:10.360 --> 00:16.760
+variables de un ámbito externo, incluso
+después de que esta función ya haya terminado de ejecutarse.
+
+00:17.520 --> 00:18.680
+Para
+
+00:18.680 --> 00:24.200
+extender muy bien los closures también
+debemos entender otro concepto que se llama el ámbito léxico,
+
+00:24.200 --> 00:30.920
+que es justamente cuando una función se
+declara, bueno se crea precisamente este ámbito léxico, y
+
+00:31.080 --> 00:37.960
+esto indica que esa función puede acceder
+a variables dentro de ese ámbito y a las variables de
+
+00:38.240 --> 00:44.160
+ámbitos que son superiores. Vamos a
+entender esto con un ejemplo. Para ello vamos a crear una función
+
+00:44.760 --> 00:50.600
+y esta función se va a llamar other function,
+y vamos a crearla con
+
+00:50.600 --> 00:57.880
+justamente una variable que se llama other
+variable, variable, y allí vamos a crear un
+
+00:58.480 --> 01:01.860
+string que en este caso va a ser I am
+from
+
+01:02.640 --> 01:04.360
+other
+function.
+
+01:04.360 --> 01:12.120
+Y seguido de esto vamos a crear, por supuesto,
+otra función. Esta función va a ser lo opuesto a esta, es decir,
+
+01:12.120 --> 01:14.960
+que se va a llamar en vez de other, inner.
+
+01:14.960 --> 01:20.060
+Y dentro de esta función vamos a colocar
+un console.log,
+
+01:20.360 --> 01:27.960
+console.log, en donde vamos a colocar la,
+esta variable para que no la imprima, voy a colocar un espacio por acá,
+
+01:28.360 --> 01:34.540
+y finalmente vamos a retornar ¿quién?
+Vamos a retornar esta función que está acá.
+
+01:35.200 --> 01:41.600
+Ahora vamos a finalmente colocar una
+variable que se va a llamar closure
+
+01:41.600 --> 01:43.920
+example,
+
+01:43.920 --> 01:50.760
+example, y vamos a ejecutar esta función
+inicial que creamos. Seguido vamos a ejecutar
+
+01:51.360 --> 01:59.120
+esto que hicimos acá. ¿Qué estamos
+haciendo? Una función que tiene una variable, que por dentro también tiene una función,
+
+01:59.680 --> 02:05.720
+recordemos estos conceptos que estamos
+viendo acá de ámbito léxico, que es justamente que esta función
+
+02:05.720 --> 02:12.440
+cuando se crea, se crea algo llamado
+ámbito léxico, pero que si yo tengo otra función para aquí adentro,
+
+02:12.800 --> 02:19.800
+también se va a crear otro ámbito léxico.
+Esta función puede acceder a todo lo que tenga por dentro y también a
+
+02:19.920 --> 02:25.320
+todo lo que tenga por fuera. Vamos a
+revisar esto, entonces vamos a guardar y vamos a colocar
+
+02:25.760 --> 02:33.000
+la ejecución del programa, voy a subir
+esto un poco y aquí vamos a ver qué dice I am from other function.
+
+02:33.000 --> 02:40.840
+¿Eso qué quiere decir? Que esta función
+accedió justamente a todo lo que estaba por fuera y esto es precisamente la definición de un closure,
+
+02:40.840 --> 02:47.480
+es precisamente que nosotros podamos
+acceder a aquellas variables que estén en la parte externa de esta función.
+
+02:47.920 --> 02:55.160
+Ahora, hay que también tener cuidado con
+el tema de los closures, vamos a revisar porque vamos a crear una función
+
+02:55.600 --> 03:00.480
+que se llame create counter y resulta que
+esta función
+
+03:00.480 --> 03:08.000
+precisamente nos va a crear un contador,
+lo vamos a escribir de la siguiente manera, creando una variable que se llame count
+
+03:08.240 --> 03:11.800
+y se va a inicializar con este valor en 0.
+
+03:12.600 --> 03:18.240
+Seguido de esto vamos a colocar un return
+de otra función, ahí estamos creando por supuesto nuestro closure,
+
+03:18.320 --> 03:23.840
+con esa función interna que va a acceder a
+lo externo y vamos a colocar nuestra variable
+
+03:23.840 --> 03:31.720
+adentro y vamos a decirle más más, esto es
+posible precisamente por el tema del closure que puede acceder a estas variables que están externas.
+
+03:32.240 --> 03:37.080
+Seguido vamos a colocar un console.log de
+quién, de esta variable count
+
+03:37.640 --> 03:43.320
+y luego lo que vamos a hacer es crear una
+serie de variables para poder ejecutar ese contador.
+
+03:43.640 --> 03:45.800
+Entonces colocamos
+const,
+
+03:47.080 --> 03:51.400
+counter a, puede ser cualquier cosa en
+este momento y vamos a ejecutar
+
+03:51.400 --> 03:56.120
+esta función, entonces venimos acá, la
+ejecutamos y luego
+
+03:56.640 --> 04:04.560
+cogemos esta variable y la empezamos
+también a ejecutar, entonces tenemos counter a una vez y otra vez y vamos a hacer esto mismo
+
+04:04.800 --> 04:12.280
+con otra, con otra variable, en este caso
+la vamos a llamar b, también va a ejecutar esta función y aquí vamos a ejecutar
+
+04:12.680 --> 04:16.000
+esta counter b, vamos a revisar qué es lo
+que está pasando.
+
+04:16.000 --> 04:24.400
+Ejecutamos acá nuevamente nuestro programa
+y aquí nos sale lo que teníamos inicialmente de la función que hicimos ahorita
+
+04:24.400 --> 04:30.600
+y acá ya empieza nuestra ejecución del
+programa, el segundo programa, 1, 2 y 1.
+
+04:31.240 --> 04:34.000
+Resulta que él ya empieza a tener
+problemas de memoria
+
+04:34.680 --> 04:40.840
+justamente porque a pesar de que es la
+misma función, él aquí almacena unos valores pero aquí también se almacenan
+
+04:40.840 --> 04:47.400
+otros valores y justamente por eso es que
+debemos tener cuidado con los closures para no excedernos en este uso de la memoria.
+
+04:47.760 --> 04:53.880
+Por otro lado nosotros también podemos
+tener diferentes tipos de contextos en los closures,
+
+04:54.360 --> 05:01.040
+como así, voy a bajar esta terminal un
+poco y voy a empezar a escribir otra función, esta función se va a llamar
+
+05:01.320 --> 05:06.760
+order por ejemplo y por dentro lo que voy
+a colocar es una variable que se llame
+
+05:06.760 --> 05:13.680
+message y que diga por ejemplo hello,
+este hello va a tener una coma y un espacio, ¿por qué?
+
+05:13.880 --> 05:15.880
+porque vamos a empezar a escribir un
+mensaje
+
+05:16.640 --> 05:24.320
+diferente, es decir con ambos tipos de
+contextos, con varios, en donde vamos a saludar a una persona y luego vamos a saludar a otra persona.
+
+05:24.720 --> 05:32.400
+¿Cómo lo haríamos con el tema de closures?
+Vamos a colocar otra función interna, voy a copiarme acá de esta parte
+
+05:32.760 --> 05:35.440
+y en vez de order voy a colocarle
+inner
+
+05:35.440 --> 05:37.440
+y acá voy a
+recibir
+
+05:38.440 --> 05:46.080
+justamente un argumento, un parámetro para
+poder saludar a diferentes tipos de personas, entonces por ejemplo acá le voy a colocar name para que él
+
+05:46.120 --> 05:54.160
+reciba el nombre de diferentes personas y
+por dentro voy a colocar un console.log de quién, de este mensaje,
+
+05:54.280 --> 06:00.320
+recordemos que aquí empieza el tema del
+closure porque puede acceder a variables externas y adicional voy a
+
+06:00.320 --> 06:08.200
+concatenarle, ¿quién? El nombre que le
+acabé de ingresar aquí y justamente en esta función vamos a retornar ¿quién?
+
+06:08.400 --> 06:11.840
+inner, aquí me le puse una una t pero ya
+la voy a borrar.
+
+06:12.360 --> 06:14.440
+Listo, ahora lo que hacemos
+es
+
+06:15.160 --> 06:17.800
+crearnos dos variables, una se va a
+llamar
+
+06:18.840 --> 06:20.840
+closure
+a...
+
+06:21.640 --> 06:23.640
+closure...
+
+06:24.360 --> 06:28.760
+de a y aquí vamos a ejecutar esta función,
+
+06:28.760 --> 06:35.200
+solamente tendría que ir ejecutada y aquí
+hacemos exactamente lo mismo pero con closure b.
+
+06:35.920 --> 06:41.880
+Ahora lo que hacemos es colocar un console.
+log para ambas variables que en este caso sería closure a,
+
+06:42.840 --> 06:48.080
+sin el console.log también lo podemos
+hacer closure a, la ejecutamos y por dentro le colocamos
+
+06:48.160 --> 06:52.760
+ahora sí el nombre que queremos que vaya,
+que en este caso puede ser por ejemplo Alicia
+
+06:52.760 --> 07:00.720
+y vamos a colocar otro nombre por ejemplo Bob,
+ahora sí guardamos, ejecutamos nuestro código, voy a subir un poco esta
+
+07:01.160 --> 07:09.080
+terminal y allí vamos a darnos cuenta que
+tenemos hello Alice y hello Bob, como podemos darnos cuenta tenemos
+
+07:09.640 --> 07:13.240
+una función, por dentro tenemos otra
+función que
+
+07:13.760 --> 07:19.000
+permite justamente el ingreso de un nombre
+y también el acceso a un mensaje
+
+07:19.000 --> 07:26.600
+externo y allí es donde vemos el contexto
+que en este caso es para Alicia y también otro
+
+07:26.600 --> 07:32.360
+contexto que sería para Bob, esas son
+cosas que también podemos utilizar con el tema de los clusures.
+
+07:32.840 --> 07:38.520
+Con los clusures entonces podemos darnos
+cuenta de que podemos trabajar con diferentes tipos de ámbitos,
+
+07:38.600 --> 07:43.360
+así como lo vimos en la definición inicial
+y también podemos crear funciones
+
+07:43.360 --> 07:49.920
+flexibles, que en este caso hay que tener
+en cuenta que esto lo debemos evitar para el tema del almacenamiento de memoria,
+
+07:50.000 --> 07:54.560
+pero que en este tipo de casos nos permite
+una flexibilidad de tener diferentes tipos de
+
+07:54.560 --> 08:14.000
+contextos y que nosotros podamos ya darle
+un manejo un poco más flexible a nuestro código.
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-clase-closures_ca9f5104-7c66-4fa3-9401-38f3ef032eef.js

@@ -0,0 +1,53 @@
+/*
+ CLOSURE: función que tiene acceso a variables de un ámbito externo,
+ incluso después de que esa función haya terminado de ejecutarse.
+
+ Ámbito léxico: cada vez que se declara una función,
+ crea su propio ámbito léxico, y puede acceder a las variables
+ dentro de ese ámbito y a las variables en ámbitos superiores.
+*/
+
+function outerFunction () {
+    let outerVariable = "I am from outer function"
+
+    function innterFunction () {
+        console.log(outerVariable)
+    }
+
+    return innterFunction
+}
+
+const closureExample = outerFunction()
+closureExample()
+
+function createCounter () {
+    let count = 0
+
+    return function() {
+        count++
+        console.log(count)
+    }
+}
+
+const counterA = createCounter()
+counterA()
+counterA()
+
+const counterB = createCounter()
+counterB()
+
+function outer () {
+    let message = "Hello, "
+
+    function inner (name) {
+        console.log(message + name)
+    }
+
+    return inner
+}
+
+const closureA = outer()
+const closureB = outer()
+
+closureA("Alice")
+closureA("Bob")

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7cf16f8b74ffcd67cdfeb78c1c28a3356383dbdf2ce9febd3a968e641710d54c
+size 62525306

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.vtt

@@ -0,0 +1,197 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+Diego, ¿cuál es tu entorno de desarrollo
+actual?
+
+00:02.000 --> 00:05.000
+Mi entorno de desarrollo actual es mi
+computadora,
+
+00:05.000 --> 00:08.000
+un VSCode abierto, una pantalla del navegador,
+
+00:08.000 --> 00:11.000
+en este caso Chrome, y la consola del
+navegador.
+
+00:11.000 --> 00:14.000
+Cuéntame por qué alguien debería aprender
+desarrollo web.
+
+00:14.000 --> 00:16.000
+Yo creo que debería aprender desarrollo
+web
+
+00:16.000 --> 00:18.000
+porque te da como
+superpoderes,
+
+00:18.000 --> 00:21.000
+de que puedas construir soluciones de
+forma muy económica,
+
+00:21.000 --> 00:23.000
+y que te da un poco más de experiencia.
+
+00:23.000 --> 00:25.000
+¿Y qué es lo que te da más
+experiencia?
+
+00:25.000 --> 00:28.000
+Pues, yo creo que la experiencia es muy
+importante.
+
+00:28.000 --> 00:31.000
+Es que puedes construir soluciones de
+forma muy económica,
+
+00:31.000 --> 00:34.000
+que puedan escalar y llegar a muchos
+usuarios
+
+00:34.000 --> 00:36.000
+de forma muy
+rápida.
+
+00:36.000 --> 00:39.000
+Explícame la diferencia entre backend y
+frontend.
+
+00:39.000 --> 00:41.000
+Backend y
+front.
+
+00:41.000 --> 00:43.000
+Frontend es él o la
+desarrolladora
+
+00:43.000 --> 00:45.000
+que trabaja cosas
+visuales
+
+00:45.000 --> 00:47.000
+con las cuales van a interactuar los usuarios,
+
+00:47.000 --> 00:49.000
+y el backend es él o la
+ingeniera
+
+00:49.000 --> 00:51.000
+que trabaja todo lo que no se
+ve,
+
+00:51.000 --> 00:53.000
+por ejemplo, bases de datos, servidores,
+
+00:53.000 --> 00:56.000
+un poco más en tema de la infraestructura.
+
+00:56.000 --> 00:58.000
+¿Cómo abordas actualmente el
+aprendizaje
+
+00:58.000 --> 01:00.000
+de un nuevo lenguaje de
+programación
+
+01:00.000 --> 01:02.000
+o una nueva
+tecnología?
+
+01:02.000 --> 01:05.000
+Actualmente lo estoy abordando con
+inteligencia artificial.
+
+01:05.000 --> 01:10.000
+La estoy utilizando más como una tipo coach,
+tutor,
+
+01:10.000 --> 01:12.000
+en el cual si quiero aprender
+algo,
+
+01:12.000 --> 01:15.000
+le pido temas que tengo que
+aprender
+
+01:15.000 --> 01:17.000
+para dominar esa
+cosa.
+
+01:17.000 --> 01:19.000
+Le pido referencias de esos
+temas,
+
+01:19.000 --> 01:22.000
+que pueden ser libros, pueden ser cursos,
+
+01:22.000 --> 01:24.000
+y cuando estoy haciendo
+código,
+
+01:24.000 --> 01:27.000
+utilizo Copilot Chat más a nivel
+contextual
+
+01:27.000 --> 01:29.000
+para que me explique lo que estoy haciendo
+bien
+
+01:29.000 --> 01:31.000
+o lo que estoy haciendo
+mal.
+
+01:31.000 --> 01:33.000
+¿Cuál es el error más común que ves en las
+personas
+
+01:33.000 --> 01:35.000
+que recién están aprendiendo
+JavaScript?
+
+01:35.000 --> 01:37.000
+El error más
+común...
+
+01:37.000 --> 01:39.000
+Uy, esta es una buena
+pregunta.
+
+01:39.000 --> 01:42.000
+Creo que sería el realmente no tomarte el
+tiempo
+
+01:42.000 --> 01:44.000
+de aprender bien JavaScript las
+bases
+
+01:44.000 --> 01:46.000
+y aventarte de
+lleno
+
+01:46.000 --> 01:48.000
+a utilizar ya frameworks y
+librerías
+
+01:48.000 --> 01:51.000
+sin entender bien el lenguaje que está por
+debajo,
+
+01:51.000 --> 01:53.000
+que en este caso sería
+JavaScript.
+
+01:53.000 --> 01:55.000
+Bueno, creo que ya estás terminando de grabar.
+
+01:55.000 --> 01:56.000
+Vamos para el
+estudio.
+
+01:56.000 --> 01:57.000
+¡Vamos!
+
+01:57.000 --> 02:23.000
+♪
+

subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/01-Arrays Propiedades Acceso y Creación en Programación.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4a5d15d9defe55b3538e0bda38be4f2b3b9dcd6d732a04479587407670fb5e6
+size 56448241

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/01-Arrays Propiedades Acceso y Creación en Programación.vtt

@@ -0,0 +1,629 @@
+WEBVTT
+
+00:00.000 --> 00:03.640
+En esta clase vamos a estar hablando sobre
+qué es un array,
+
+00:03.640 --> 00:07.040
+también sus propiedades, como por ejemplo
+length,
+
+00:07.040 --> 00:10.240
+y adicional vamos a estar hablando sobre
+conceptos fundamentales
+
+00:10.240 --> 00:13.240
+como lo son la mutabilidad e inmutabilidad,
+
+00:13.240 --> 00:15.840
+y también cómo comprobar
+efectivamente
+
+00:15.840 --> 00:18.640
+que lo que estamos haciendo o lo que
+tenemos en nuestro código
+
+00:18.640 --> 00:19.940
+es un
+array.
+
+00:19.940 --> 00:23.040
+Para ello, comencemos con la definición de
+array.
+
+00:23.040 --> 00:25.700
+Normalmente nosotros escribimos
+variables
+
+00:25.700 --> 00:28.440
+y a esas variables les asignamos un valor.
+
+00:28.440 --> 00:32.040
+Sin embargo, con los arrays tenemos algo
+adicional
+
+00:32.040 --> 00:36.240
+y es que podemos guardar muchos valores en
+una sola variable.
+
+00:36.240 --> 00:39.640
+Y también otra característica fundamental
+de esos arrays
+
+00:39.640 --> 00:41.540
+es que son
+objetos.
+
+00:41.540 --> 00:43.540
+Ahora sí, veamos en nuestro
+código
+
+00:43.540 --> 00:45.540
+cómo crear justamente un
+array
+
+00:45.540 --> 00:49.740
+y todas estas propiedades y
+características importantes de ellos.
+
+00:49.740 --> 00:52.340
+Vamos a comenzar creando
+arrays.
+
+00:52.340 --> 00:54.840
+Para ello, voy a escribir un
+comentario
+
+00:54.840 --> 00:58.440
+que diga how to create an
+array.
+
+00:58.440 --> 01:02.840
+En nuestro caso, tenemos dos formas de
+crearlos.
+
+01:02.840 --> 01:07.940
+La primera forma es justamente colocando
+la palabra clave new
+
+01:07.940 --> 01:10.040
+seguido de
+array.
+
+01:10.040 --> 01:14.240
+O también podemos escribir solamente la
+palabra array.
+
+01:14.240 --> 01:17.840
+Seguido, lo que vamos a hacer es empezar a
+crear una variable,
+
+01:17.840 --> 01:22.040
+en este caso voy a crear como un conjunto
+de frutas,
+
+01:22.040 --> 01:24.840
+y para ello lo que hago es
+precisamente
+
+01:24.840 --> 01:27.340
+colocar la palabra clave
+array
+
+01:27.340 --> 01:29.140
+y dentro de los
+paréntesis
+
+01:29.140 --> 01:31.840
+empiezo a colocar los diferentes valores.
+
+01:31.840 --> 01:35.140
+Por ejemplo, voy a empezar a escribirlos
+pero como strings.
+
+01:35.140 --> 01:37.140
+Entonces podemos colocar, por ejemplo,
+
+01:37.140 --> 01:40.040
+apple,
+banana,
+
+01:40.040 --> 01:42.840
+también
+orange,
+
+01:42.840 --> 01:46.540
+y si nosotros colocamos un
+console.log
+
+01:46.540 --> 01:48.840
+de lo que es
+fruits,
+
+01:48.840 --> 01:50.640
+vamos a colocarlo por
+acá,
+
+01:50.640 --> 01:52.840
+vamos a darle
+guardar,
+
+01:52.840 --> 01:55.740
+revisamos aquí nuestro
+node
+
+01:55.740 --> 01:58.340
+y nuestro código ya
+ejecutado,
+
+01:58.340 --> 02:00.040
+y nos sale un
+array
+
+02:00.040 --> 02:04.140
+que se escribe justamente con estas
+llavecitas cuadradas
+
+02:04.140 --> 02:07.840
+y nos sale por dentro un apple, banana y
+orange.
+
+02:07.840 --> 02:09.940
+Entonces aquí ya estamos empezando a
+ver
+
+02:09.940 --> 02:12.440
+que un array es un conjunto de
+elementos
+
+02:12.440 --> 02:15.440
+que se guardan justamente en una variable.
+
+02:15.440 --> 02:17.340
+Con esta forma de
+array
+
+02:17.340 --> 02:20.640
+no podríamos crear, por ejemplo, un solo
+número.
+
+02:20.640 --> 02:25.640
+Si nosotros decimos, por ejemplo, const
+just one number
+
+02:25.640 --> 02:28.440
+y le decimos igual a
+array
+
+02:28.440 --> 02:31.340
+y dentro le colocamos un
+número,
+
+02:31.340 --> 02:35.240
+no vamos a tener como ese resultado que
+nosotros queremos.
+
+02:35.240 --> 02:37.840
+Voy a colocar en este console.log así,
+
+02:37.840 --> 02:39.040
+corro el
+código
+
+02:39.040 --> 02:42.640
+y aquí ya vemos que nos sale el primer
+array que creamos
+
+02:42.640 --> 02:46.040
+y seguido de eso vamos a tener un
+array
+
+02:46.040 --> 02:49.640
+con 12 como posiciones, pero vacías.
+
+02:49.640 --> 02:53.540
+Entonces en este caso no nos funciona solo
+para eso,
+
+02:53.540 --> 02:56.940
+para eso vamos a ver la siguiente forma de
+crear arrays,
+
+02:56.940 --> 02:58.540
+pero en un
+ratito.
+
+02:58.540 --> 03:02.840
+Otra cosa que sí podemos hacer es crear
+esto mismo,
+
+03:02.840 --> 03:06.640
+pero para diferentes números, no solamente
+uno.
+
+03:06.640 --> 03:09.340
+Por ejemplo, si yo coloco solamente
+numbers
+
+03:09.340 --> 03:13.340
+y dentro de esto le escribo 2, 3, 4,
+5
+
+03:13.340 --> 03:16.840
+y coloco un console.log para revisar esta
+parte,
+
+03:16.840 --> 03:19.540
+por supuesto que sí nos sale un
+array
+
+03:19.540 --> 03:23.540
+con todos los números que acabamos de
+colocarle en este lado.
+
+03:26.540 --> 03:29.140
+También otra cosa que podemos
+hacer
+
+03:29.140 --> 03:33.640
+es crear arrays, por supuesto, con otra
+sintaxis.
+
+03:33.640 --> 03:36.740
+Esa sintaxis, vamos a escribir por acá 2,
+
+03:36.740 --> 03:38.940
+array literal
+syntax,
+
+03:38.940 --> 03:42.840
+es como la sintaxis literal de un array.
+
+03:42.840 --> 03:47.040
+Entonces, como lo escribimos, voy a subir
+un poco este código
+
+03:47.040 --> 03:52.440
+y aquí lo que hacemos es decir, por ejemplo,
+const oneNumber
+
+03:52.440 --> 03:56.640
+y acá le decimos, abrimos estas llaves de
+esta forma,
+
+03:56.640 --> 04:01.140
+estos corchetes, y aquí le decimos un número,
+4.
+
+04:01.140 --> 04:03.940
+Seguido de esto colocamos el console.
+log
+
+04:03.940 --> 04:05.840
+de lo que es
+oneNumber,
+
+04:05.840 --> 04:08.040
+vamos a correr nuevamente el
+código
+
+04:08.040 --> 04:10.240
+y aquí ya vemos que tenemos un
+array
+
+04:10.240 --> 04:14.040
+precisamente con una sola posición, con un
+solo valor,
+
+04:14.040 --> 04:18.040
+que es el que le acabamos de asignar aquí
+a oneNumber.
+
+04:20.840 --> 04:24.540
+Por otro lado, si quisiéramos un array vacío,
+
+04:24.540 --> 04:29.440
+colocamos, por ejemplo, empty, empty
+array
+
+04:29.440 --> 04:34.440
+y decimos solamente así, abrimos corchetes
+solos,
+
+04:34.440 --> 04:38.440
+colocamos el console.log, colocamos
+nuestra variable,
+
+04:38.440 --> 04:40.440
+luego corremos nuestro
+código
+
+04:40.440 --> 04:43.740
+y aquí ya vemos que el array está
+completamente vacío.
+
+04:43.740 --> 04:48.140
+Esto funciona cuando nosotros queremos
+inicializar
+
+04:48.140 --> 04:50.740
+algún programa o queremos que
+inicialmente
+
+04:50.740 --> 04:53.640
+una variable tenga un array vacío y luego
+irlo llenando,
+
+04:53.640 --> 04:56.040
+entonces, en estos casos también es
+importante
+
+04:56.040 --> 04:59.540
+crear esos arrays
+vacíos.
+
+04:59.540 --> 05:02.540
+Por otro lado, podríamos crear también,
+por ejemplo,
+
+05:02.540 --> 05:05.240
+un array de muchos datos
+string,
+
+05:05.240 --> 05:07.440
+como hicimos al principio con las frutas,
+
+05:07.440 --> 05:11.240
+sería, por ejemplo, sports,
+igual,
+
+05:11.240 --> 05:14.440
+y dentro de estos corchetes colocamos,
+por ejemplo,
+
+05:14.440 --> 05:19.240
+soccer, seguidos decimos, por ejemplo, tenis,
+
+05:19.240 --> 05:22.240
+seguido vamos a decir, por ejemplo, rugby.
+
+05:22.240 --> 05:26.240
+Y también de nuevo podemos colocar nuestro
+console.log,
+
+05:26.240 --> 05:29.740
+dentro colocamos los
+deportes
+
+05:29.740 --> 05:34.440
+y tenemos nuestro array precisamente con
+strings.
+
+05:34.440 --> 05:39.440
+Algo también importante es que podemos
+crear arrays mixtos.
+
+05:39.440 --> 05:41.440
+¿Cómo podemos
+hacerlo?
+
+05:41.440 --> 05:44.440
+Vamos a decir, por ejemplo,
+const,
+
+05:44.440 --> 05:49.440
+receipt,
+ingredients,
+
+05:49.440 --> 05:53.440
+y acá le decimos, abrimos nuestros
+corchetes
+
+05:53.440 --> 05:56.440
+y dentro podemos colocar, por ejemplo,
+strings,
+
+05:56.440 --> 06:01.440
+en este caso voy a colocar este string,
+
+06:01.440 --> 06:04.440
+luego podemos colocar, por ejemplo, un
+valor booleano,
+
+06:04.440 --> 06:08.440
+como este, seguido podemos colocar un
+número
+
+06:08.440 --> 06:12.440
+y después, por ejemplo, podemos colocar un
+objeto,
+
+06:12.440 --> 06:17.440
+este objeto puede ser, por ejemplo,
+ingredient,
+
+06:17.440 --> 06:20.440
+podemos colocar este, como en string,
+
+06:20.440 --> 06:26.440
+meal, la cantidad,
+quantity,
+
+06:26.440 --> 06:30.440
+a esto le podemos colocar, por ejemplo,
+one cup,
+
+06:30.440 --> 06:36.440
+y podemos de nuevo colocar, por ejemplo,
+un valor booleano.
+
+06:36.440 --> 06:41.440
+Entonces, si nosotros colocamos, por ejemplo,
+un console.log,
+
+06:41.440 --> 06:45.440
+¿de quién? De esta
+variable,
+
+06:45.440 --> 06:49.440
+ya nosotros vamos a ver que tenemos
+justamente un array mixto,
+
+06:49.440 --> 06:53.440
+en donde tenemos strings, booleanos, números,
+objetos,
+
+06:53.440 --> 06:57.440
+podemos tener un montón de valores también
+asignados
+
+06:57.440 --> 06:59.440
+a una sola
+variable.
+
+06:59.440 --> 07:01.440
+Ahora vamos a ver lo
+siguiente,
+
+07:01.440 --> 07:04.440
+¿cómo podemos nosotros acceder a un
+array?
+
+07:04.440 --> 07:07.440
+Ejemplo, si yo tengo esta variable de sports,
+
+07:07.440 --> 07:10.440
+¿cómo puedo acceder justamente a tenis,
+por ejemplo?
+
+07:10.440 --> 07:13.440
+Entonces, lo que vamos a ver por acá,
+
+07:13.440 --> 07:15.440
+voy a escribir un comentario que
+diga
+
+07:15.440 --> 07:19.440
+accessing justamente arrays, array elements,
+
+07:19.440 --> 07:22.440
+y lo que hacemos es decir, vamos a crear
+una variable,
+
+07:22.440 --> 07:27.440
+first, fruit, vamos a colocarle así,
+
+07:27.440 --> 07:31.440
+vamos a crear también
+fruit,
+
+07:31.440 --> 07:35.440
+y le decimos en la posición cero o en la
+posición uno,
+
+07:35.440 --> 07:39.440
+vamos a decir que si tenemos un array,
+en este caso,
+
+07:39.440 --> 07:43.440
+que es frutas, y queremos acceder a apple,
+
+07:43.440 --> 07:46.440
+en este caso, lo importante a tener en
+cuenta
+
+07:46.440 --> 07:50.440
+es que un array está designado también por
+índices.
+
+07:50.440 --> 07:53.440
+Entonces, este sería el índice cero,
+
+07:53.440 --> 07:56.440
+luego el uno, el dos, y así sucesivamente.
+
+07:56.440 --> 07:59.440
+Entonces, si nosotros quisiéramos acceder
+a apple,
+
+07:59.440 --> 08:02.440
+tendríamos que decir, mira, yo quiero
+acceder justamente
+
+08:02.440 --> 08:05.440
+a lo que nosotros tenemos en la
+posición
+
+08:05.440 --> 08:07.440
+o en el índice número
+cero.
+
+08:07.440 --> 08:11.440
+Entonces, si decimos, por ejemplo, console.
+log,
+
+08:11.440 --> 08:16.440
+él nos va a devolver justamente el primer
+valor de ese array,
+
+08:16.440 --> 08:20.440
+que en este caso sería quién, apple.
+
+08:20.440 --> 08:23.440
+Ahora, si nosotros quisiéramos saber,
+por ejemplo,
+
+08:23.440 --> 08:27.440
+el tamaño de un array como
+tal,
+
+08:27.440 --> 08:30.440
+entonces podríamos hacerlo con una
+propiedad
+
+08:30.440 --> 08:32.440
+que se llama length,
+justamente.
+
+08:32.440 --> 08:34.440
+Entonces, lo que hacemos es como, por ejemplo,
+
+08:34.440 --> 08:39.440
+crear una variable, vamos a decirle number
+of fruits,
+
+08:39.440 --> 08:44.440
+y aquí le decimos
+fruits.length,
+
+08:44.440 --> 08:48.440
+y seguido le colocamos un console.log para
+revisar
+
+08:48.440 --> 08:51.440
+qué es lo que nos va a dar esta propiedad.
+
+08:51.440 --> 08:53.440
+Entonces, vamos a correr el código y
+vemos
+
+08:53.440 --> 08:56.440
+que lo que nos provee es un
+número,
+
+08:56.440 --> 08:59.440
+y ese número equivale a la cantidad de
+elementos
+
+08:59.440 --> 09:01.440
+que hay en ese
+array.
+
+09:01.440 --> 09:05.440
+En este caso sería, por ejemplo, uno,
+dos y tres,
+
+09:05.440 --> 09:22.440
+y ese sería el valor que él nos empieza a
+proveer.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/01-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/01-clase-introduccion-arrays_e21fb09f-1ffe-42e2-8535-ee8181c2f83c.js

@@ -0,0 +1,71 @@
+// How to create an Array ?
+
+// 1. new Array() or Array()
+
+const fruits = Array('apple', 'banana', 'orange')
+console.log(fruits)
+
+const justOneNumber = Array(12)
+console.log(justOneNumber)
+
+const number = Array(1, 2, 3, 4, 5)
+console.log(number)
+
+// 2. Array literal syntax
+
+const oneNumber = [4]
+console.log(oneNumber)
+
+const emptyArray = []
+console.log(emptyArray)
+
+const sports = ['soccer', 'tennis', 'rugby']
+console.log(sports)
+
+const recipeIngredients = [
+  'Flour',
+  true,
+  2,
+  {
+    ingredient: 'Milk', quantity: '1 cup'
+  },
+  false
+]
+console.log(recipeIngredients)
+
+// Accessing array elements
+
+const firstFruit = fruits[0]
+console.log(firstFruit)
+
+// length property
+
+const numberOfFruits = fruits.length
+console.log(numberOfFruits)
+
+// Mutability
+
+fruits.push('watermelon')
+console.log(fruits)
+
+// Immutability
+
+const newFruits = fruits.concat(['grape', 'kiwi'])
+console.log(fruits)
+console.log(newFruits)
+
+// Checking arrays with Array.isArray()
+
+const isArray = Array.isArray(fruits)
+console.log(isArray)
+
+// Practical exercise: sum all elements of an array.
+
+const numbersArray = [1, 2, 3, 4, 5]
+let sum = 0
+
+for (let i = 0; i < numbersArray.length; i++) {
+  sum += numbersArray[i]
+}
+
+console.log(sum)

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos prácticos.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f0d3d123dd1e9bd77347520c3c7beb8a0bb297652321b4d6abec4db7567861b0
+size 41984670

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos prácticos.vtt

@@ -0,0 +1,594 @@
+WEBVTT
+
+00:00.000 --> 00:04.600
+Por otro lado, algo importantísimo que
+tenemos en los arrays
+
+00:04.600 --> 00:09.600
+son justamente el tema de la mutabilidad e
+inmutabilidad.
+
+00:09.600 --> 00:11.200
+¿Qué quiere decir
+eso?
+
+00:11.200 --> 00:13.100
+Si nosotros tenemos un
+array,
+
+00:13.100 --> 00:15.600
+y un array ya sabemos que es un objeto,
+
+00:15.600 --> 00:18.700
+ese objeto puede tener diferentes métodos.
+
+00:18.700 --> 00:21.400
+Estos métodos nos van a ayudar a
+hacer
+
+00:21.400 --> 00:25.000
+una gran cantidad de cosas dependiendo de
+cada uno de los métodos,
+
+00:25.000 --> 00:27.500
+pero también dependiendo de cada método,
+
+00:27.500 --> 00:30.400
+o podemos mutar el valor
+original,
+
+00:30.400 --> 00:34.500
+es decir, transformar el array que ya
+hemos construido,
+
+00:34.500 --> 00:37.500
+o por el contrario, crear un array nuevo.
+
+00:37.500 --> 00:39.500
+Es decir,
+inmutable,
+
+00:39.500 --> 00:43.000
+es decir, no vamos a mutar ese array que
+ya acabamos de crear.
+
+00:43.000 --> 00:46.500
+Veamos un ejemplo para que esto quede
+muchísimo más claro.
+
+00:46.500 --> 00:49.000
+Entonces vamos a escribir mutability.
+
+00:49.000 --> 00:52.500
+Vamos a ver uno de los métodos rápidamente,
+
+00:52.500 --> 00:56.300
+que es justamente cómo podemos agregar un
+elemento a ese array.
+
+00:56.300 --> 00:59.000
+Entonces, por ejemplo, tenemos frutas,
+
+00:59.000 --> 01:03.500
+y a estas frutas lo que le vamos a hacer
+es agregarle otro valor.
+
+01:03.500 --> 01:06.500
+Voy a colocarle
+watermelon,
+
+01:06.500 --> 01:10.500
+y si nosotros colocamos un console.log,
+
+01:10.500 --> 01:13.000
+¿de quién? De
+frutas.
+
+01:13.000 --> 01:15.000
+¿Qué vamos a ver? Voy a
+darle...
+
+01:15.000 --> 01:16.500
+Ah, voy a correr el
+programa,
+
+01:16.500 --> 01:18.500
+y aquí empezamos a ver lo siguiente.
+
+01:18.500 --> 01:21.800
+Ah, bueno, aquí toca corregir
+esto,
+
+01:21.800 --> 01:24.800
+voy a colocar fruits, de nuevo correr
+programa,
+
+01:24.800 --> 01:27.300
+y aquí vemos que ya tiene mi
+array,
+
+01:27.300 --> 01:29.300
+el que habíamos creado al principio,
+
+01:29.300 --> 01:32.300
+que dice apple, banana,
+orange,
+
+01:32.300 --> 01:37.300
+pero adicional, el array frutas se modificó,
+
+01:37.300 --> 01:39.300
+le agregó un nuevo
+valor.
+
+01:39.300 --> 01:44.300
+Entonces, por eso hablamos de que muchos
+de los métodos de arrays
+
+01:44.300 --> 01:49.300
+pueden mutar, pueden transformar el array
+original.
+
+01:49.300 --> 01:52.800
+Por otro lado, también tenemos lo contrario,
+
+01:52.800 --> 01:55.300
+que es la
+inmutabilidad.
+
+01:55.300 --> 01:57.300
+Entonces, ¿cómo sería en este
+caso?
+
+01:57.300 --> 02:00.300
+Si nosotros tenemos, por ejemplo, const new,
+
+02:00.300 --> 02:03.800
+en este caso voy a crear como un nuevo
+array de frutas,
+
+02:03.800 --> 02:08.300
+lo que hacemos es decir frutas.concat,
+
+02:08.300 --> 02:10.300
+por ejemplo, que lo que vamos a
+hacer
+
+02:10.300 --> 02:13.800
+es como juntar un array con otro array,
+
+02:13.800 --> 02:15.800
+entonces tenemos el array de frutas,
+
+02:15.800 --> 02:20.800
+y encima vamos a crear otro array donde
+hay otro tipo de frutas.
+
+02:20.800 --> 02:23.800
+Entonces, por ejemplo, vamos a colocarle
+grape
+
+02:23.800 --> 02:26.800
+y vamos a colocarle
+kiwi.
+
+02:26.800 --> 02:30.800
+En este caso, lo que vamos a hacer es un
+console.log
+
+02:30.800 --> 02:33.800
+tanto de fruits como de
+quién,
+
+02:33.800 --> 02:35.800
+de las nuevas frutas que
+creamos.
+
+02:35.800 --> 02:39.800
+Entonces, vamos a correr nuevamente el
+programa,
+
+02:39.800 --> 02:41.800
+y aquí vemos lo
+siguiente.
+
+02:41.800 --> 02:43.800
+Vamos a revisar las dos últimas líneas.
+
+02:43.800 --> 02:47.300
+Tenemos apple, banana, orange, watermelon,
+
+02:47.300 --> 02:49.800
+que fue la modificación que hicimos acá,
+
+02:49.800 --> 02:53.800
+seguido tenemos apple, banana, orange,
+watermelon,
+
+02:53.800 --> 02:55.800
+y encima grape y
+kiwi.
+
+02:55.800 --> 02:57.800
+Aquí podemos ver lo
+siguiente.
+
+02:57.800 --> 03:00.800
+Uno, tenemos nuestro array sin modificar,
+
+03:00.800 --> 03:03.800
+pues aparte de la modificación que le
+hicimos aquí,
+
+03:03.800 --> 03:07.800
+y adicional tenemos el nuevo array, ¿con
+quién?
+
+03:07.800 --> 03:10.800
+Con lo que era frutas al
+principio,
+
+03:10.800 --> 03:14.800
+más el nuevo array que le concatenamos o
+que le sumamos.
+
+03:14.800 --> 03:16.800
+Entonces, aquí ya estamos viendo
+también
+
+03:16.800 --> 03:19.800
+este concepto importante de inmutabilidad,
+
+03:19.800 --> 03:24.800
+ya que no todos los métodos nos modifican
+el array original.
+
+03:24.800 --> 03:27.800
+Y por último, lo que vamos a hacer es
+revisar
+
+03:27.800 --> 03:30.800
+si un array en efecto es un
+array.
+
+03:30.800 --> 03:32.800
+¿Cómo podemos comprobar
+esto?
+
+03:32.800 --> 03:34.800
+Voy a colocar acá, por
+ejemplo,
+
+03:34.800 --> 03:41.800
+checking arrays with array is array, tal cual.
+
+03:41.800 --> 03:43.800
+Entonces, ¿cómo lo
+escribimos?
+
+03:43.800 --> 03:45.800
+Vamos a colocar una
+variable,
+
+03:45.800 --> 03:48.800
+le decimos is
+array,
+
+03:48.800 --> 03:51.800
+ese sería el nombre de la variable como tal,
+
+03:51.800 --> 03:55.800
+y decimos
+array.isArray,
+
+03:55.800 --> 03:58.800
+y aquí le colocamos frutas, por ejemplo,
+
+03:58.800 --> 04:00.800
+que ya hemos venido con este ejemplo.
+
+04:00.800 --> 04:01.800
+¿Qué colocamos
+acá?
+
+04:01.800 --> 04:04.800
+Un console.log de nuevo, ¿de
+quién?
+
+04:04.800 --> 04:06.800
+De
+isArray.
+
+04:06.800 --> 04:09.800
+Entonces, vamos a guardar nuestro programa,
+lo corremos,
+
+04:09.800 --> 04:11.800
+y aquí nos dice, ah,
+mira,
+
+04:11.800 --> 04:15.800
+es que tú querías comprobar si en efecto
+era un array,
+
+04:15.800 --> 04:17.800
+y aquí yo te estoy diciendo que
+sí.
+
+04:17.800 --> 04:21.800
+Entonces, esto básicamente nos va a
+arrojar un booleano,
+
+04:21.800 --> 04:23.800
+sea true o
+false,
+
+04:23.800 --> 04:26.800
+para decirnos si ese array es o no es un
+array,
+
+04:26.800 --> 04:28.800
+o esa variable es un array o
+no.
+
+04:28.800 --> 04:31.800
+Vamos ahora a hacer un ejercicio
+práctico
+
+04:31.800 --> 04:34.800
+donde vamos a involucrar no solamente los
+arrays,
+
+04:34.800 --> 04:37.800
+sino también un for, por
+ejemplo.
+
+04:37.800 --> 04:39.800
+Entonces, ¿cómo sería
+eso?
+
+04:39.800 --> 04:43.800
+El ejercicio es básicamente sumar todos
+los elementos
+
+04:43.800 --> 04:45.800
+que tenemos en un
+array.
+
+04:45.800 --> 04:46.800
+¿Cómo lo vamos a
+hacer?
+
+04:46.800 --> 04:48.800
+Vamos a crear, por
+ejemplo,
+
+04:48.800 --> 04:51.800
+voy a escribir antes de todo un
+comentario
+
+04:51.800 --> 04:55.800
+que diga practical
+exercise,
+
+04:55.800 --> 05:00.800
+y vamos a decir que es la suma de todos
+los elementos
+
+05:00.800 --> 05:04.800
+de un array, of an
+array.
+
+05:04.800 --> 05:05.800
+Listo.
+
+05:05.800 --> 05:08.800
+Voy a correr mi código, y aquí voy a
+empezar a escribir.
+
+05:08.800 --> 05:14.800
+Numbers, array, voy a colocarlo así,
+
+05:14.800 --> 05:18.800
+y seguido voy a escribir un array de quién,
+
+05:18.800 --> 05:20.800
+de números, puede ser
+cualquiera,
+
+05:20.800 --> 05:23.800
+supongamos que tenemos del 1 al
+5.
+
+05:23.800 --> 05:27.800
+Seguido, vamos a decir que tenemos una
+variable,
+
+05:27.800 --> 05:32.800
+esa variable inicialmente va a tener un
+valor que es 0.
+
+05:32.800 --> 05:36.800
+Ahora, si el ejercicio es de sumar todos
+los números
+
+05:36.800 --> 05:40.800
+de un array, por supuesto, un array, un for,
+
+05:40.800 --> 05:41.800
+va a ser súper
+efectivo.
+
+05:41.800 --> 05:42.800
+¿Por
+qué?
+
+05:42.800 --> 05:45.800
+Porque nos va a ayudar a iterar en cada
+una
+
+05:45.800 --> 05:47.800
+de las posiciones de este
+array.
+
+05:47.800 --> 05:48.800
+¿Cómo lo vamos a
+hacer?
+
+05:48.800 --> 05:52.800
+Vamos a escribir for, dentro de este for
+vamos a colocar
+
+05:52.800 --> 05:55.800
+una variable que se va a llamar
+i,
+
+05:55.800 --> 05:58.800
+y que va a empezar justamente en
+0.
+
+05:58.800 --> 06:02.800
+Seguido, esta variable i va a tener un
+valor
+
+06:02.800 --> 06:06.800
+que no exceda la cantidad de
+elementos
+
+06:06.800 --> 06:08.800
+que hay justamente en un
+array.
+
+06:08.800 --> 06:10.800
+Entonces, aquí también hacemos
+alusión
+
+06:10.800 --> 06:13.800
+a nuestra propiedad length, donde le
+estamos diciendo,
+
+06:13.800 --> 06:17.800
+oye, mira, es que resulta que el tamaño
+como tal
+
+06:17.800 --> 06:20.800
+es de 1, 2, 3, 4, 5
+posiciones,
+
+06:20.800 --> 06:25.800
+pero yo no quiero que vaya hasta 5, sino
+hasta 4.
+
+06:25.800 --> 06:27.800
+Entonces le digo, ah, mira, es que yo
+quiero
+
+06:27.800 --> 06:29.800
+que sea de i hasta 4
+elementos.
+
+06:29.800 --> 06:33.800
+Y aquí lo que hacemos es colocarle i++,
+
+06:33.800 --> 06:36.800
+es decir, que vaya sumando progresivamente.
+
+06:36.800 --> 06:39.800
+Seguido de esto, lo que hacemos es
+decirle
+
+06:39.800 --> 06:42.800
+que la suma va a ser igual a
+quién?
+
+06:42.800 --> 06:47.800
+A el valor de numbers, que en este caso
+sería este de aquí,
+
+06:47.800 --> 06:50.800
+el valor de nuestro array, vamos a
+colocarlo por acá,
+
+06:50.800 --> 06:52.800
+más
+1.
+
+06:52.800 --> 06:55.800
+Por ejemplo, entonces, para colocar esto,
+
+06:55.800 --> 06:59.800
+lo que hacemos es decirle más aquí a este
+ladito, y ya.
+
+06:59.800 --> 07:02.800
+Entonces lo que hacemos es, la suma va a
+ser
+
+07:02.800 --> 07:07.800
+este numbers array en la posición de la
+variable i,
+
+07:07.800 --> 07:11.800
+en este caso sería 0, más lo que teníamos
+anteriormente.
+
+07:11.800 --> 07:13.800
+Entonces lo escribimos de esta forma.
+
+07:13.800 --> 07:17.800
+Seguido, lo que vamos a hacer es colocar
+un console.log
+
+07:17.800 --> 07:19.800
+¿de quién? De la
+suma.
+
+07:19.800 --> 07:21.800
+Esta suma la podemos colocar por acá,
+
+07:21.800 --> 07:23.800
+vamos a guardar, corremos el código,
+
+07:23.800 --> 07:26.800
+y aquí ya tenemos que la suma de todos
+nuestros valores
+
+07:26.800 --> 07:29.800
+de este array es efectivamente
+15.
+
+07:29.800 --> 07:33.800
+5 más 4 es 9, 9 más este 1 son
+10,
+
+07:33.800 --> 07:36.800
+más este 5, bueno, nos daría
+15.
+
+07:36.800 --> 07:38.800
+Entonces este programa nos está funcionando,
+
+07:38.800 --> 07:41.800
+y justamente estamos haciendo alusión a
+quién?
+
+07:41.800 --> 07:44.800
+A un array, y también a esa propiedad que
+también vimos,
+
+07:44.800 --> 07:47.800
+que es justamente el length, para saber el
+tamaño,
+
+07:47.800 --> 07:50.800
+y también la iteración justamente de un
+array
+
+07:50.800 --> 07:53.800
+para saber la suma de todos los
+elementos
+
+07:53.800 --> 08:20.800
+que tenemos allí
+adentro.
+