diff --git a/.gitattributes b/.gitattributes index 956ade8e32be80941307a4c139e50561819a0a53..3fde5fbbef64d4e4812d1bd4d0eb13b4bd7d2840 100644 --- a/.gitattributes +++ b/.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 diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..82073355089af73f9d8a058ec87e52c6a7905708 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Resumen.html" @@ -0,0 +1,136 @@ + + + + + + + Uso del ciclo while para iteración en programación + + + +
+
+

Resumen

¿Qué es el método while en programación?

+

El método while es una estructura de control de flujo utilizada en programación para repetir un bloque de código mientras una condición específica sea verdadera. Esta técnica permite realizar iteraciones eficientes, ejecutando una secuencia de instrucciones repetidamente hasta que la condición evaluada deje de cumplirse.

+

¿Cómo funciona la estructura de un ciclo while?

+

La estructura de un ciclo while en programación implica utilizar la palabra clave reservada while, seguida de una condición. Este ciclo continuará ejecutando el código contenido en su bloque interno hasta que dicha condición se torne falsa. La estructura básica es sencilla, pero su implementación debe manejarse con precaución para evitar conflictos como los 'loops' infinitos.

+

Estructura básica de un ciclo while:

+
while (condición) {
+    // Código a ejecutar mientras la condición sea verdadera
+}
+
+

¿Cómo podemos evitar los loops infinitos?

+

Los loops infinitos ocurren cuando la condición en un ciclo while nunca se vuelve falsa, permitiendo que el ciclo continúe indefinidamente. Esto puede llevar al consumo excesivo de recursos del sistema y, por ende, a inestabilidades en las aplicaciones. Para evitarlo:

+
    +
  • +

    Control y actualización de la condición: Asegúrate de modificar las variables involucradas en la condición dentro del bloque del ciclo. Esto garantiza que eventualmente el ciclo pueda salir.

    +
  • +
  • +

    Ejemplo con un contador:

    +
  • +
+
let contador = 0;
+
+while (contador < 10) {
+    console.log(contador);
+    contador++; // Incremento que evita el loop infinito
+}
+
+

¿Qué implica el procesamiento de un ciclo while en el navegador?

+

Implementar un ciclo while en las aplicaciones front-end, como las que corren en el navegador, requiere cuidado. Un loop infinito podría consumir toda la memoria RAM disponible, afectando severamente el rendimiento de las pestañas abiertas o incluso el navegador completo. Por ello, es esencial:

+
    +
  • Mantener condiciones claras y alcanzables.
  • +
  • Monitorear el rendimiento: Usa herramientas de desarrollo para observar el uso de memoria y CPU.
  • +
  • Vigilar comportamientos anómalos tras introducir un nuevo while.
  • +
+

¿Cómo puedo optimizar mis ciclos while?

+

Para escribir ciclos while eficientes:

+
    +
  1. Define claramente las condiciones de entrada y salida.
  2. +
  3. Realiza pruebas exhaustivas con diferentes escenarios de valores.
  4. +
  5. Utiliza incrementos o decrementos que acerquen tu variable a la cumplirse la condición.
  6. +
  7. Documenta y revisa el código con herramientas de análisis estático si es posible.
  8. +
+

Finalmente, recuerda que conocer el propósito de tus iteraciones y planificar el flujo de control adecuadamente será clave para aprovechar al máximo este método, garantizando el correcto funcionamiento de tus aplicaciones. ¡Sigue explorando y aprendiendo para perfeccionar tus habilidades de programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.mp4" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..08d41d9416473602a706641d603aa1f0d1737d2f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:639e7bce49fa97cb0f5e3d34ddcd0ebce1763a0aa5be4dd3739adc3af26dcc47 +size 22379041 diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.vtt" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..fd8a36da4fed907e43b07d4110e80e9b08335065 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-Uso del ciclo while para iteraci\303\263n en programaci\303\263n.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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-index_d7170355-2163-4a7d-9633-bc5247dbcfd1.js" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/09-index_d7170355-2163-4a7d-9633-bc5247dbcfd1.js" new file mode 100644 index 0000000000000000000000000000000000000000..155a452c45e39608ba4c8987d353611fd6f58220 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/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++; +} diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Ciclos doWhile Estructura y Diferencias con While.mp4" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Ciclos doWhile Estructura y Diferencias con While.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..54d8337a4d2298b6d8fb411925cce713f02d4a0f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/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 diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Ciclos doWhile Estructura y Diferencias con While.vtt" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Ciclos doWhile Estructura y Diferencias con While.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..560f13a6d87a516bb0a12a29cf446254fa69bfdd --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..58e768669a4ed86e0831abb87fb38a296dd20fa8 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-Resumen.html" @@ -0,0 +1,135 @@ + + + + + + + Ciclos doWhile: Estructura y Diferencias con While + + + +
+
+

Resumen

¿Cómo se implementa un ciclo doWhile en programación?

+

¿Alguna vez te has preguntado cómo lograr que un segmento de código se ejecute repetidamente hasta cumplir una determinada condición? El ciclo doWhile es una técnica eficaz para lograrlo. Este método asegura que ciertas tareas se repitan, garantizando así la ejecución de eventos hasta alcanzar el resultado esperado, siempre y cuando se cumpla una condición. A continuación, exploramos cómo funciona y cómo se diferencia de otros ciclos.

+

¿Cuál es la estructura de un ciclo doWhile?

+

La implementación de un ciclo doWhile en programación sigue una estructura específica. Aquí te presentamos los pasos básicos:

+
    +
  1. Se comienza con la palabra clave do.
  2. +
  3. Dentro de los corchetes {}, se escribe el código que deseamos ejecutar.
  4. +
  5. Posteriormente, se utiliza la palabra clave while, seguida de la condición que debe cumplirse para que el ciclo continúe ejecutándose.
  6. +
+

La principal distinción de doWhile es que siempre ejecuta el bloque de código primero, sin evaluar la condición, y luego verifica si debe repetirse.

+

Ejemplo práctico de doWhile

+

Para ilustrar el uso de doWhile, consideremos el siguiente ejemplo:

+
let contador = 0;
+
+do {
+    console.log(contador);
+    contador++;
+} while (contador < 10);
+
+

En este segmento de código:

+
    +
  • Se declara una variable contador inicializada en cero.
  • +
  • Dentro del do, se imprime el valor de contador y se incrementa en uno para evitar un ciclo infinito.
  • +
  • La condición while garantiza que el bloque se repita hasta que contador sea menor a 10.
  • +
+

Este código imprimirá los números del 0 al 9 en consola.

+

¿Cuál es la diferencia entre un ciclo while y un ciclo doWhile?

+

La interrogante que suele surgir es: ¿para qué usar un doWhile en lugar de un simple while? La diferencia fundamental es cómo estos ciclos abordan la ejecución del código y la verificación de condiciones:

+
    +
  • En un doWhile, el código siempre se ejecuta al menos una vez antes de evaluar la condición.
  • +
  • En un while, primero se verifica si la condición es verdadera antes de ejecutar el código.
  • +
+

Cuándo usar doWhile en lugar de while

+

Opta por doWhile cuando requieras que el código se ejecute al menos una vez, independientemente de si la condición es verdadera al inicio. Por otro lado, utiliza while si deseas asegurar que el código solo se ejecuta cuando la condición inicial se cumple.

+

Consejos prácticos para implementaciones efectivas

+
    +
  • Evita bucles infinitos: Asegúrate de modificar las variables involucradas en la condición para evitar que el ciclo corra indefinidamente.
  • +
  • Prueba tus condiciones: Verifica que la condición sea alcanzable para garantizar la finalización adecuada del ciclo.
  • +
  • Debugging y logs: Utiliza console.log para comprender el flujo de tu ciclo y depurar problemas potenciales.
  • +
+

Dominar los ciclos en programación te brindará herramientas poderosas para desarrollar algoritmos eficientes. Experimentar con doWhile y while te permitirá elegir el ciclo adecuado para cada situación y enriquecer tus proyectos de programación. ¡Sigue practicando y explorando el apasionante mundo del desarrollo!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-index_4e2b15d9-94de-49f9-bb60-c70238a85a25.js" "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/10-index_4e2b15d9-94de-49f9-bb60-c70238a85a25.js" new file mode 100644 index 0000000000000000000000000000000000000000..81bd8e61588e442585f31e178dbd58cda0e92bd6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/02-Estructuras de Control y L\303\263gica/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); diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Funciones en JavaScript C\303\263mo Calcular Precios con Descuentos.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Funciones en JavaScript C\303\263mo Calcular Precios con Descuentos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..9edec96f55bb3483f921f0708ffbfd498078fe65 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Funciones en JavaScript C\303\263mo Calcular Precios con Descuentos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:74dd2e0652e9710cfea7e8bcb16d6169c851ca4202f103dbb434307ce26adf79 +size 124849975 diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..f623e59cee55ee014667f1effb5b80876b6483ec --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-Resumen.html @@ -0,0 +1,168 @@ + + + + + + + Funciones en JavaScript: Cómo Calcular Precios con Descuentos + + + +
+
+

Resumen

¿Qué es una función en JavaScript?

+

Las funciones en JavaScript son bloques de código reutilizables que permiten realizar tareas específicas una y otra vez. Imagina que son como piezas de Lego: puedes utilizarlas para crear múltiples objetos con las mismas piezas. Son una herramienta poderosa que, una vez definida, puede utilizarse repetidamente con distintos conjuntos de datos, al igual que usarías un cálculo una y otra vez durante un evento de Black Friday para aplicar descuentos automáticamente a los precios de ropa. Gracias a las funciones, evitamos duplicar código, ahorramos tiempo y minimizamos errores.

+

¿Cómo se estructura una función?

+

Una función en JavaScript tiene una estructura clara, conocida como su "anatomía". Cada parte cumple un papel crucial en su funcionamiento:

+
    +
  1. +

    Definición de la función:

    +
      +
    • Comienza con la palabra clave function.
    • +
    • Sigue el nombre de la función, que debe estar en camelCase (la primera letra minúscula y las iniciales de palabras subsiguientes en mayúsculas).
    • +
    +
  2. +
  3. +

    Parámetros:

    +
      +
    • Los parámetros son variables que la función utiliza internamente para procesar datos. Son opcionales y permiten que la función sea más flexible.
    • +
    +
  4. +
  5. +

    Cuerpo de la función:

    +
      +
    • Se encierra entre llaves {}.
    • +
    • Es donde se escribe el código que la función ejecutará. Puede incluir un return para devolver un valor al finalizar la ejecución, aunque esto también es opcional.
    • +
    +
  6. +
  7. +

    Llamado de función:

    +
      +
    • Para ejecutar una función, se utiliza su nombre seguido de paréntesis que, opcionalmente, contienen argumentos; estos son los valores reales que reemplazan a los parámetros.
    • +
    +
  8. +
+

¿Cómo crear funciones para calcular descuentos?

+

Veamos la creación paso a paso de una función que calcule el precio después de aplicar un descuento, algo útil para eventos como el Black Friday.

+
function calculateDiscountedPrice(price, discountPercentage) {
+    const discount = (price * discountPercentage) / 100;
+    const priceWithDiscount = price - discount;
+    return priceWithDiscount;
+}
+
+

¿Cómo se usa esta función?

+
    +
  1. +

    Definir Variables:

    +
      +
    • Primero, define las variables para el precio original y el porcentaje de descuento.
    • +
    +
    const originalPrice = 100; // Precio de la prenda
    +const discountPercentage = 20; // Descuento del 20%
    +
    +
  2. +
  3. +

    Calcular el Precio Final:

    +
      +
    • Utiliza la función con estos valores para obtener el precio con descuento.
    • +
    +
    const finalPrice = calculateDiscountedPrice(originalPrice, discountPercentage);
    +
    +
  4. +
  5. +

    Salida de Resultados:

    +
      +
    • Puedes usar un console.log para mostrar los resultados en consola.
    • +
    +
    console.log("Precio Original: " + originalPrice);
    +console.log("Descuento: " + discountPercentage + "%");
    +console.log("Precio con Descuento: " + finalPrice);
    +
    +
  6. +
+

Al ejecutar este programa, verás en la consola cuánto deberías pagar en base al descuento especificado. Y lo mejor de todo: puedes cambiar los valores de entrada y calcular precios para diferentes prendas en cuestión de milisegundos.

+

¿Por qué es útil este enfoque?

+

Crear funciones como calculateDiscountedPrice permite tener un código claro, comprensible, y flexible, que se adapta a diferentes situaciones con facilidad. Esta técnica es especialmente valiosa en el desarrollo de software, donde la eficiencia y la reusabilidad del código son esenciales. Además, al generar un código más genérico, como el cálculo de precios con descuentos, puedes personalizar la misma función para múltiples necesidades con simples cambios de parámetros.

+

¡Así que sigue practicando y experimentando con funciones! Con el tiempo, crearás aplicaciones más sofisticadas y confiables. ¡El cielo es el límite!

+
+
+ + \ No newline at end of file diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-clase-anatomia-de-una-funcion_ebd815d1-e594-4489-b4f8-47db59cdccb7.js b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/01-clase-anatomia-de-una-funcion_ebd815d1-e594-4489-b4f8-47db59cdccb7.js new file mode 100644 index 0000000000000000000000000000000000000000..d20e4afd800e6ccc87a0d7b8e0e4a1e510c26fd9 --- /dev/null +++ b/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) diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..f26903e88300e927057a8c77024a8758751fc3e8 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:585c06a6ffcdcb03aa6d90dedf998f2b7d70c19a147a7e92b61adc27aace237f +size 62509318 diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..833444d42d75da3e6f4f0c32043694855886cc76 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Diferencias entre Funciones y M\303\251todos 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. + diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..3ae1f2ca1c862b0d1cd2e6afa5fd0ca72a4196b9 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-Resumen.html @@ -0,0 +1,188 @@ + + + + + + + Diferencias entre Funciones y Métodos en JavaScript + + + +
+
+

Resumen

¿Cuáles son las diferencias entre funciones y métodos en JavaScript?

+

JavaScript, un lenguaje de programación esencialmente basado en objetos, ofrece una versatilidad impresionante cuando se trata de trabajar tanto con funciones como con métodos. La diferencia principal entre una función y un método radica en su singularidad y uso dentro del código. En este contenido te explicaremos las diferencias y similitudes entre ambos, mostrando cómo aprovechar estas funcionalidades al máximo en tu programa.

+

¿Cómo funcionan las funciones en JavaScript?

+

Las funciones en JavaScript son bloques de código diseñados para realizar una tarea específica. Cuando escribimos una función, la creamos y llamamos, y el intérprete de JavaScript las identifica como elementos del tipo "function". Pero, ¿sabías que las funciones en realidad son objetos? Esto significa que tienen propiedades y métodos.

+
    +
  • +

    Pasar funciones como argumentos: Este es un concepto conocido como "callback". Una función se puede pasar como argumento a otra función, permitiendo modularizar y ejecutar código una vez que ocurre un evento particular.

    +
    function A() {
    +  console.log("Función A");
    +}
    +
    +function B(callback) {
    +  callback();
    +}
    +
    +B(A); // Llamada a la función B, pasando A como callback
    +
    +
  • +
  • +

    Retornar funciones: Es posible que una función devuelva otra función, lo que permite crear funciones dinámicas y reutilizables.

    +
    function A() {
    +  function B() {
    +    console.log("Función B");
    +  }
    +  return B;
    +}
    +
    +const nuevaFuncion = A();
    +nuevaFuncion(); // Ejecuta la función B
    +
    +
  • +
  • +

    Asignar funciones a variables: En JavaScript, las funciones pueden asignarse a variables, convirtiéndose en 'funciones anónimas' o 'expresiones de función'.

    +
    const A = function() {
    +  console.log("Función anónima");
    +};
    +
    +A();
    +
    +
  • +
+

¿Qué propiedades y métodos tienen las funciones?

+

Otra característica esencial de las funciones es que, igual que los objetos, pueden poseer propiedades y métodos. Por ejemplo:

+
    +
  • +

    Método call: Permite establecer explícitamente el contexto de this dentro de la función.

    +
    const obj = {
    +  nombre: "Objeto",
    +};
    +
    +function saludar() {
    +  console.log(`Hola, soy un ${this.nombre}`);
    +}
    +
    +saludar.call(obj); // Salida: Hola, soy un Objeto
    +
    +
  • +
+

¿Cómo se pueden anidar funciones?

+

Anidar funciones significa definir funciones dentro de otras funciones. Esta técnica permite agrupar lógicamente funciones relacionadas y gestionar las variables de manera estructurada.

+
    +
  • +

    Nested functions: En JavaScript, es posible acceder a variables externas a una función desde otra función más interna, manteniendo el acceso a sus variables, lo cual es uno de los conceptos claves detrás de los closures.

    +
    function A() {
    +  const mensaje = "Soy función A";
    +
    +  function B() {
    +    console.log(mensaje);
    +  }
    +
    +  B();
    +}
    +
    +A(); // Llamará a la función B, imprimiendo "Soy función A"
    +
    +
  • +
+

¿Es posible almacenar funciones en objetos?

+

Sí, es totalmente posible almacenar funciones en objetos. Cuando una función se almacena como una propiedad de un objeto, esta se conoce como método del objeto.

+
    +
  • +

    Métodos en objetos: Este es un ejemplo de cómo se puede definir una función como un método de un objeto.

    +
    const rocket = {
    +  nombre: "Falcon 9",
    +  launchMessage: function() {
    +    console.log("¡Despegue exitoso! 🚀");
    +  }
    +};
    +
    +rocket.launchMessage(); // Ejecutará el método y mostrará "¡Despegue exitoso! 🚀"
    +
    +
  • +
+

En resumen, tanto funciones como métodos son herramientas esencialmente poderosas en JavaScript. Con estas, puedes estructurar tu código de manera más eficiente, crear funciones reutilizables, modularizar el flujo de tu programa, y gestionar efectivamente los contextos de ejecución. Sigue explorando cómo las funciones y métodos pueden mejorar la calidad y funcionalidad de tus proyectos.

+
+
+ + \ No newline at end of file diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-clase-funciones-vs-metodos_ae2120c7-56da-4567-8adb-ad30c110a238.js b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/02-clase-funciones-vs-metodos_ae2120c7-56da-4567-8adb-ad30c110a238.js new file mode 100644 index 0000000000000000000000000000000000000000..6bcc01534472010a74a981190cbef6cc39e68ae8 --- /dev/null +++ b/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() \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n Conceptos y Ejemplos.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n Conceptos y Ejemplos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..10253077478bffa3c591a309026c257494184020 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n Conceptos y Ejemplos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bf959dc19882dcb79ccb4e3e62cf015a70f5bd7ee7ee195d3c06191d28346ea9 +size 62703758 diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n Conceptos y Ejemplos.vtt" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n Conceptos y Ejemplos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..c7ca98b100217bbcba284ddaaf337ed28cd30352 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Funciones Puras e Impuras en Programaci\303\263n 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. + diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..f48ec15ba6a3423e34cadf77eb5af669e197d387 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-Resumen.html @@ -0,0 +1,153 @@ + + + + + + + Funciones Puras e Impuras en Programación: Conceptos y Ejemplos + + + +
+
+

Resumen

¿Qué son las funciones puras?

+

En el vasto mundo de la programación, donde se busca la eficiencia y claridad del código, las funciones puras juegan un papel crucial. Se caracterizan por dos propiedades fundamentales que garantizan su comportamiento predecible y confiable:

+
    +
  • Determinismo: Dada una entrada particular, una función pura siempre produce la misma salida. Esto significa que no importa cuántas veces llames a la función con los mismos argumentos; el resultado será siempre el mismo.
  • +
  • Ausencia de efectos secundarios: Estas funciones no alteran estados fuera de su propio entorno. Esto significa que no modifican variables globales ni interaccionan con elementos externos al código, como bases de datos o APIs.
  • +
+

A medida que exploramos estas funciones, descubrimos que son una pieza esencial en el diseño de software funcional, promoviendo un código más limpio y fácil de probar.

+

¿Cuáles son los efectos secundarios?

+

En contraste con las funciones puras, muchos programas dependen de efectos secundarios para cumplir con sus propósitos. Estos efectos secundarios, aunque esenciales en ciertos contextos, pueden hacer que el código sea impredecible. Algunos ejemplos incluyen:

+
    +
  • Modificar variables globales: Acceder y alterar variables fuera del alcance local de una función puede resultar en funciones impuras.
  • +
  • Modificar parámetros: Cambiar los valores de los argumentos pasados a una función también genera efectos no deseados.
  • +
  • Solicitudes HTTP: Llamadas a servicios externos o APIs pueden producir cambios basados en respuestas externas.
  • +
  • Impresión de mensajes: Tanto console.log como alert son ejemplos de funciones que producen salidas visibles o auditables.
  • +
  • Manipulación del DOM: Interacciones con la estructura del documento en navegadores, alterando su contenido o apariencia.
  • +
  • Consultas de tiempo: Obtener la hora o fecha actual afecta al estado del programa de forma impredecible.
  • +
+

Aunque estos efectos pueden parecer negativos, es importante recordar que muchos son necesarios para las aplicaciones prácticas.

+

¿Cómo estructuramos una función pura?

+

Para entender mejor el concepto de función pura, es útil observar un ejemplo práctico. Imagina una función simple que sume dos números:

+
function sum(a, b) {
+  return a + b;
+}
+
+

Esta función es pura porque:

+
    +
  • Siempre devuelve el mismo resultado cuando se le proporcionan los mismos argumentos.
  • +
  • No produce efectos secundarios ya que no altera ningún estado global ni interactúa con el entorno externo.
  • +
+

Sin embargo, ¿qué ocurre cuando introducimos una línea de código que imprime un valor en la consola?

+
function sumYLog(a, b) {
+  console.log(a);
+  return a + b;
+}
+
+

Al agregar console.log, la función deja de ser pura, ya que ahora produce un efecto secundario.

+

¿Por qué son importantes las funciones puras?

+

Las funciones puras son esenciales en programación porque permiten:

+
    +
  1. Facilidad de prueba: Como no dependen del estado del programa ni lo modifican, son más fáciles de aislar y probar.
  2. +
  3. Previsibilidad y confiabilidad: Siempre ofrecen el mismo resultado para los mismos inputs, facilitando la comprensión del flujo del programa.
  4. +
  5. Optimización y paralelismo: Facilitan optimizaciones como la memoización (almacenamiento de resultados previos) y son ideales para programas concurrentes o paralelizados.
  6. +
+

Funciones como square o attain, que realizan operaciones matemáticas básicas con un único parámetro, son ejemplos clásicos de funciones puras con resultados predecibles.

+

¿Qué ocurre con la combinación de funciones puras?

+

La combinación de funciones puras también resulta en funciones puras. Por ejemplo, combinando las funciones square y attain, podemos crear un árbol robusto de funciones:

+
function square(x) {
+  return x * x;
+}
+
+function attain(y) {
+  return y + 10;
+}
+
+const number = 5;
+const finalResult = attain(square(number)); // finalResult será 35
+
+

Esta combinación sigue manteniendo la pureza y ofrece la garantía de resultados constantes sin efectos adicionales.

+

En resumen, el balance entre funciones puras e impuras es vital para escribir un código robusto y escalable. Al comprender y aplicar estos conceptos, los programadores pueden crear software más predecible, fácil de mantener y testar. ¡Sigue explorando y refinando tus habilidades en programación!

+
+
+ + \ No newline at end of file diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-clase-funciones-puras-e-impuras_e3c125f1-5bce-4b8b-a394-31d35f63fa55.js b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/03-clase-funciones-puras-e-impuras_e3c125f1-5bce-4b8b-a394-31d35f63fa55.js new file mode 100644 index 0000000000000000000000000000000000000000..bef35187784a840ac63dbb0eb27f82669a5d3519 --- /dev/null +++ b/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) \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..9af32fe554c1bd0bf24d0886d7230bd15d18c6e8 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f56fbce4d80dbac7e7dc9bd7a7b68face38bc81527813dfa261d75f14c9be40 +size 90119959 diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..a99917d1623ffa54e45cd5f21ee506107b74b475 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Arrow Functions y Enlace L\303\251xico 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. + diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..0f679167b56a68d35b2e4a901c6f7f4936e3ce88 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-Resumen.html @@ -0,0 +1,147 @@ + + + + + + + Arrow Functions y Enlace Léxico en JavaScript + + + +
+
+

Resumen

¿Qué son las Arrow Functions y cómo se diferencian de las funciones tradicionales?

+

Las Arrow Functions han revolucionado la manera en la que escribimos código JavaScript. Al reemplazar las funciones tradicionales, simplifican el código y evitan problemas de contexto. Pero, ¿por qué son tan importantes y en qué se diferencian exactamente de las funciones tradicionales? Exploramos este concepto esencial del desarrollo moderno.

+

¿Por qué usar Arrow Functions si ya tenemos funciones tradicionales?

+

Las funciones tradicionales en JavaScript, aunque efectivas, suelen ser extensas y difíciles de manejar, especialmente en el contexto del manejo del this. Aquí es donde las Arrow Functions entran en juego. Los principales beneficios son:

+
    +
  • Concisión: Al eliminar la palabra "function" y usar una flecha =>, el código se vuelve más compacto.
  • +
  • Vinculación léxica del this: Las Arrow Functions no tienen su propio contexto de this, lo cual es un alivio en situaciones donde se necesita mantener un contexto fijo.
  • +
+

¿Cómo transformar funciones tradicionales en Arrow Functions?

+

Transformemos una función tradicional a una Arrow Function para ilustrar esta evolución.

+
// Función tradicional
+const saludo = function(nombre) {
+  return `Hola ${nombre}`;
+};
+
+// Arrow Function
+const saludoNuevo = (nombre) => `Hola ${nombre}`;
+
+

Podemos observar que hemos simplificado la declaración, quitando la palabra function y usando una flecha.

+

¿Cuándo usar un retorno implícito?

+

La simplicidad de las Arrow Functions nos permite usar retornos implícitos, lo que significa que no necesitamos escribir explícitamente return ni las llaves {} cuando todo el cuerpo de la función es una expresión.

+
// Retorno implícito
+const saludoImplicit = nombre => `Hola ${nombre}`;
+
+

Esta ventaja es más evidente con funciones que realizan operaciones simples.

+

¿Cómo manejar múltiples parámetros?

+

Cuando trabajamos con múltiples parámetros, el uso impropio de paréntesis puede provocar errores. En las Arrow Functions, los paréntesis son necesarios solo cuando hay múltiples parámetros.

+
const saludoCompleto = (nombre, apellido) => `Hola, soy ${nombre} ${apellido}`;
+
+

Al mantener los paréntesis, gestionamos los parámetros sin problemas.

+

Vinculación Léxica: Un desafío resuelto

+

Las Arrow Functions facilitan lo que se conoce como enlace léxico o lexical binding, especialmente en el manejo de objetos y contextos de this. Vamos a ver un ejemplo práctico:

+
const personajeFicticio = {
+  nombre: "tío Ben",
+  mensajeConFuncionTradicional: function(mensaje) {
+    console.log(`${this.nombre} dice: ${mensaje}`);
+  },
+  mensajeConArrowFunction: (mensaje) => {
+    console.log(`${this.nombre} dice: ${mensaje}`);
+  }
+};
+
+personajeFicticio.mensajeConFuncionTradicional("Un gran poder conlleva una gran responsabilidad");
+personajeFicticio.mensajeConArrowFunction("Cuidado con el Dr. Octopus");
+
+

En este ejemplo, la función tradicional accede correctamente al this.nombre, mientras que la Arrow Function no lo hace, ya que las Arrow Functions no vinculan su propio this.

+

Recomendaciones para mejorar tu código con Arrow Functions

+
    +
  • Opta por Arrow Functions para expresiones cortas y sencillas.
  • +
  • Utiliza funciones tradicionales cuando requieras this en contextos de objeto.
  • +
  • Prueba tus cambios: Usa herramientas de corrección de código para evitar errores tipográficos, especialmente si programas en otros idiomas.
  • +
+

Las Arrow Functions no solo simplifican el código, sino que también resuelven problemas comunes asociados al this, permitiéndote concentrarte más en la lógica y menos en el manejo del contexto. Continúa explorando y experimentando para descubrir cómo pueden transformar tu estilo de programación.

+
+
+ + \ No newline at end of file diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-clase-arrow-functions_7e661920-826a-43c9-97cf-d5d67e3de5ea.js b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/04-clase-arrow-functions_7e661920-826a-43c9-97cf-d5d67e3de5ea.js new file mode 100644 index 0000000000000000000000000000000000000000..37d32cfb714520b8e88694b18976f398894db1f1 --- /dev/null +++ b/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.') diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..01977242ca1fc3cab27ef0b9c25d9bd7b8de0561 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Resumen.html @@ -0,0 +1,165 @@ + + + + + + + Scope y Contextos de Ejecución en JavaScript + + + +
+
+

Resumen

¿Qué son los contextos de ejecución y la cadena de alcances?

+

Los contextos de ejecución y la cadena de alcances son conceptos fundamentales en JavaScript, ya que determinan cómo y dónde se accede a las variables dentro del código. Al usar las palabras clave var, let, y const, es esencial comprender estas diferencias: el tipo de scope y el comportamiento de hoisting. Esto nos ayudará a tomar decisiones informadas sobre cuándo y cómo utilizar cada una.

+

¿Por qué es importante el scope en JavaScript?

+

El scope es crucial porque determina el alcance y la vida útil de una variable. Con var, las variables tienen un scope a nivel de función, mientras que let y const se limitan al bloque en el que se declaran. Esta distinción es vital para evitar errores y entender cómo se ejecuta el código.

+

Por ejemplo, consideremos el siguiente código:

+
const productName = "laptop";
+const price = 899;
+const brand = "techCode";
+
+function getProductInfo() {
+    const productName = "smartphone";
+    const price = 499;
+    return `${productName} costs ${price} and is of brand ${brand}`;
+}
+
+console.log(getProductInfo());
+
+

Aquí, el console.log imprime "smartphone costs 499 and is of brand techCode". Las variables productName y price dentro de la función sobrescriben las del contexto global, mientras que brand se toma desde el exterior debido a la cadena de alcances.

+

¿Cómo funciona el contexto de ejecución?

+

En JavaScript, el contexto de ejecución puede pensarse como muñecas rusas: el contexto global es la muñeca más grande y los contextos locales son las más pequeñas dentro de ella.

+
    +
  • Contexto global: Incluye todas las variables y código que está por fuera de funciones o bloques.
  • +
  • Contextos locales: Son los bloques definidos, por ejemplo, dentro de una función.
  • +
+

¿Cómo se determina el contexto en un código?

+

A través del uso de llaves { }, podemos identificar los bloques que delimitan los contextos locales. Todo lo que cae fuera de estos bloques pertenece al contexto global.

+
let userPoints = 80;
+
+function evaluatePoints() {
+    if (userPoints < 100) {
+        console.log("Below average");
+    } else {
+        console.log("Above average");
+    }
+}
+
+console.log(evaluatePoints());
+
+

En el código anterior:

+
    +
  • userPoints y console.log(evaluatePoints()) forman parte del contexto global.
  • +
  • evaluatePoints() es un contexto local que contiene su propio flujo de ejecución.
  • +
+

¿Qué es el scope chain o cadena de alcances?

+

La cadena de alcances define cómo JavaScript encuentra las variables. Un contexto local puede acceder a variables en contexto global, pero no al revés. La búsqueda de variables funciona de adentro hacia afuera, asegurándose de que no haya acceso entre contextos locales iguales.

+

¿Cuándo ocurre el error 'variable no definida'?

+

Esto ocurre cuando un contexto local busca una variable que no existe ni localmente ni en ningún contexto superior.

+
const globalVariable = "global1";
+
+function local1() {
+    console.log(globalVariable); // Accede correctamente a "global1"
+    console.log(localVariable); // Error: localVariable no está definida
+
+    function local2() {
+        const carrot = "🥕";
+        console.log(`local2: ${carrot}`);
+    }
+
+    function local3() {
+        console.log(local3Variable); // Error aquí también
+    }
+
+    local2();
+    local3();
+}
+console.log(local1());
+
+

En este ejemplo, intentar acceder a localVariable y local3Variable en contextos que no las definen o que no tienen acceso a ellas desencadena dichos errores.

+

Comprendiendo los errores de variable no definida

+

Es importante internalizar la restricción de que los contextos iguales no pueden comunicarse entre sí sin que compartan un contexto padre donde esté definida la variable de interés. Este entendimiento permitirá evitar múltiples errores en implementaciones más complejas, asegurando un manejo eficiente de cómo y dónde se posicionan y utilizan las variables.

+

Motívate a seguir profundizando en estos conceptos. La práctica y comprensión de cómo JavaScript maneja el scope y los contextos de ejecución te harán un desarrollador más hábil y capaz de escribir código más eficiente y sin errores.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..2452f90da4d0d91bc9222ed62f4930d17a03d235 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bebf8f7bd0328e8f753a89d812ed151c5afdeb19c739abb76b4de544d52ed7eb +size 58855670 diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..fe6aa343d6d8a9acc749cac55994a101ef149986 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/05-Scope y Contextos de Ejecuci\303\263n 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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..87f89427769254e6e756d126db5ca9cf32cbd81c --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1aea2675a35e350e23e984c94860af990a21f456007af5e6f69cb794f7367a5a +size 45913818 diff --git "a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..f14e48e917a4812e45ebc1c0da4588a1a64f03d7 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Closures y \303\201mbito L\303\251xico 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. + diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..39985996cec52bd978479ede6659bb8b4fe054e3 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-Resumen.html @@ -0,0 +1,150 @@ + + + + + + + Closures y Ámbito Léxico en JavaScript + + + +
+
+

Resumen

¿Qué son los closures?

+

Los closures son un concepto fundamental en la programación con JavaScript y otras lenguas similares. Básicamente, un closure es una función que tiene acceso a variables de un ámbito externo, incluso después de que esa función ha dejado de ejecutarse. Este comportamiento se debe al ámbito léxico, el cual se define en el momento en que se crea una función. Este ámbito permite que las funciones accedan a variables dentro de su ámbito y a cualquier variable de los ámbitos superiores.

+

¿Cómo se crean y funcionan los closures?

+

Para entender la creación de closures, consideremos un ejemplo práctico:

+
function otherFunction() {
+    const otherVariable = "I am from other function";
+    
+    function innerFunction() {
+        console.log(otherVariable);
+    }
+    
+    return innerFunction;
+}
+
+const closureExample = otherFunction();
+closureExample();
+
+

En este ejemplo, innerFunction es un closure porque tiene acceso a otherVariable, que está definida en su ámbito externo, otherFunction. Cuando ejecutamos closureExample(), el programa imprime "I am from other function", demostrando que innerFunction puede acceder a otherVariable a pesar de que otherFunction ya ha finalizado su ejecución.

+

¿Cuáles son las precauciones al usar closures?

+

A pesar de que los closures son herramientas poderosas, es esencial usarles con cuidado para evitar problemas de memoria. Al crear closures, cada función interna que retorna tendrá su propio ámbito léxico, lo que puede requerir más memoria si no se gestiona correctamente.

+

Observemos el siguiente ejemplo con un contador:

+
function createCounter() {
+    let count = 0;
+    
+    return function() {
+        count++;
+        console.log(count);
+    };
+}
+
+const counterA = createCounter();
+counterA(); // 1
+counterA(); // 2
+
+const counterB = createCounter();
+counterB(); // 1
+
+

Aquí, cada llamada a createCounter crea un nuevo closure con su propio ámbito count. Los valores de count son independientes entre counterA y counterB, mostrando que cada closure mantiene su propio estado.

+

¿Cómo manejar diferentes contextos con closures?

+

Los closures también permiten trabajar con diferentes contextos, ofreciendo flexibilidad en el manejo de funciones:

+
function order() {
+    const message = "Hello, ";
+    
+    function inner(name) {
+        console.log(message + name);
+    }
+    
+    return inner;
+}
+
+const closureA = order();
+closureA("Alicia"); // Hello, Alicia
+closureA("Bob");    // Hello, Bob
+
+

En este caso, la función inner retorna un saludo personalizado, usando el contexto compartido de order para formar el mensaje completo. Esto demuestra cómo los closures pueden usarse para crear funciones flexibles que acceden y manipulan datos en diferentes contextos.

+

En resumen, los closures ofrecen una poderosa capacidad para gestionar ámbitos y mantener estados privados en JavaScript, pero se debe ser cuidadoso para no incurrir en problemas de memoria. Con una comprensión adecuada, podemos utilizar esta característica para escribir código eficiente y flexible. ¡Sigue explorando y practicando para perfeccionar tus habilidades con closures y otros conceptos avanzados!

+
+
+ + \ No newline at end of file diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-clase-closures_ca9f5104-7c66-4fa3-9401-38f3ef032eef.js b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/06-clase-closures_ca9f5104-7c66-4fa3-9401-38f3ef032eef.js new file mode 100644 index 0000000000000000000000000000000000000000..e0923f9bc57668f77a8a2403b53b861099b31413 --- /dev/null +++ b/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") diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.mp4 b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..8a3970005b2fd1b1e84bfa4542b472ca4b66aaef --- /dev/null +++ b/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 diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.vtt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Fundamentos del Desarrollo Web Frontend y Backend.vtt new file mode 100644 index 0000000000000000000000000000000000000000..4c4ec7ff9d14e0ea7b26a11bdbb5c3fff387bf7e --- /dev/null +++ b/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 +♪ + diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Lecturas recomendadas.txt b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Lecturas recomendadas.txt new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Lecturas recomendadas.txt @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git a/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Resumen.html b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Resumen.html new file mode 100644 index 0000000000000000000000000000000000000000..01e5efdd98dec81e0b373eab03574316a3f52240 --- /dev/null +++ b/subir/Curso de Fundamentos de JavaScript/03-Funciones y This/07-Resumen.html @@ -0,0 +1,115 @@ + + + + + + + Fundamentos del Desarrollo Web: Frontend y Backend + + + +
+
+

Resumen

¿Por qué aprender desarrollo web es importante?

+

Aprender desarrollo web puede concederte "superpoderes" al permitir crear soluciones económicas y escalables que pueden llegar rápidamente a muchos usuarios. En un mundo cada vez más digital, comprender cómo crear y gestionar aplicaciones y sitios web es un conocimiento valioso que abre un abanico de oportunidades laborales y empresariales. Al dominar el desarrollo web, no solo adquieres habilidades técnicas, sino que también mejoras tu capacidad para resolver problemas y entender las necesidades de los usuarios.

+

¿Qué diferencia hay entre el backend y el frontend?

+

El desarrollo web se divide en dos áreas principales: frontend y backend. El frontend se centra en la creación de todo lo que los usuarios ven e interactúan en una aplicación o sitio web. Incluye el diseño, la estructura y la experiencia del usuario, utilizando tecnologías como HTML, CSS y JavaScript.

+

Por otro lado, el backend se ocupa de todo lo que sucede "detrás de escena". Esto incluye el manejo de bases de datos, servidores y la lógica de negocio de una aplicación. Lenguajes como Node.js, Python y Ruby se utilizan comúnmente en el desarrollo backend.

+

¿Cómo abordar el aprendizaje de nuevos lenguajes de programación?

+

Adoptar un enfoque sistemático y moderno, como el uso de inteligencia artificial, puede transformar tu proceso de aprendizaje:

+
    +
  • Uso de IA como coach: Emplear herramientas de inteligencia artificial para guiarte en el aprendizaje, como un tutor que sugiere temas clave para dominar una tecnología nueva.
  • +
  • Referencia a recursos variados: Pedir recomendaciones sobre libros y cursos enfocados en los temas que necesitas.
  • +
  • Práctica con Copilot Chat: Utilizar herramientas de asistencia de código, como Copilot, para recibir retroalimentación sobre tu código, entender errores y mejorar tu práctica diaria.
  • +
+

¿Cuál es el error más común al aprender JavaScript?

+

Un error frecuente al aprender JavaScript es no dedicar suficiente tiempo a comprender las bases antes de sumergirse en frameworks y librerías avanzadas. Muchos nuevos desarrolladores tienden a saltar de inmediato al uso de estas herramientas sin un conocimiento sólido del lenguaje en sí, lo cual puede limitar su capacidad para resolver problemas por sí mismos y entender cómo funcionan internamente dichas herramientas.

+

Consejos para evitar caer en este error:

+
    +
  • Enfócate en las bases: Asegúrate de tener un buen dominio de los aspectos fundamentales de JavaScript, como el manejo de variables, funciones y el modelo de objetos del documento (DOM).
  • +
  • Evita la prisa: Tomar el tiempo necesario para comprender cómo y por qué funcionan las cosas es clave para un aprendizaje efectivo y duradero.
  • +
  • Practica regularmente: La práctica constante es crucial. Trabajar en proyectos pequeños o desafíos de código te ayudará a asimilar mejor los conceptos.
  • +
+

Aprender a desarrollar web no solo es necesario para quienes buscan una carrera en tecnología, sino que es una inversión en habilidades perdurables que seguirán siendo relevantes en el futuro. ¡No dudes en explorar este emocionante camino!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..3f6753015120c80eb355b2d76ec833e24901551b --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b4a5d15d9defe55b3538e0bda38be4f2b3b9dcd6d732a04479587407670fb5e6 +size 56448241 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..49f5ad9c223fad07db8c703b384af5b97193f279 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Arrays Propiedades Acceso y Creaci\303\263n en Programaci\303\263n.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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..65e45c6c0b90e13f81eb352e4987ae1faf902d54 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-Resumen.html" @@ -0,0 +1,130 @@ + + + + + + + Arrays: Propiedades, Acceso y Creación en Programación + + + +
+
+

Resumen

¿Qué es un array en programación?

+

Los arrays son fundamentales en la programación, permitiendo a los desarrolladores almacenar múltiples valores dentro de una sola variable. A menudo, las variables adquieren un único valor, pero los arrays ofrecen la capacidad de mantener un conjunto de elementos, lo que los hace increíblemente útiles en diversas situaciones. Además, es esencial saber que los arrays son objetos en JavaScript.

+

¿Cómo se crea un array?

+

Existen varias formas de crear un array en JavaScript. Vamos a explorar dos métodos populares:

+
    +
  1. +

    Usando new Array(): +Este enfoque requiere el uso de la palabra clave new seguida de Array(). Aunque es menos común, verás este método en proyectos más antiguos.

    +
    const fruits = new Array('apple', 'banana', 'orange');
    +console.log(fruits);
    +
    +
  2. +
  3. +

    Sintaxis literal del array: +Este es el método más utilizado. Consiste en usar corchetes [] para definir los elementos del array.

    +
    const fruits = ['apple', 'banana', 'orange'];
    +console.log(fruits);
    +
    +
  4. +
+

¿Cómo se manejan arrays con diferentes tipos de datos?

+

Una de las características sobresalientes de los arrays es su capacidad para almacenar diversos tipos de datos. Puedes combinarlos para tener strings, números, booleanos, e incluso otros objetos dentro del mismo array.

+
const mixedArray = ['text', true, 42, { ingredient: 'sugar', quantity: 'one cup' }, false];
+console.log(mixedArray);
+
+

¿Cómo acceder a los elementos de un array?

+

Acceder a los elementos de un array se realiza mediante sus índices, comenzando desde cero. Por ejemplo, en el array fruits, fruits[0] devolvería 'apple'.

+
const firstFruit = fruits[0];
+console.log(firstFruit);  // Output: apple
+
+

¿Cómo se analiza el tamaño de un array?

+

Para conocer cuántos elementos contiene un array, se utiliza la propiedad .length. Esta devuelve un número representando la cantidad total de elementos.

+
const numberOfFruits = fruits.length;
+console.log(numberOfFruits);  // Output: 3
+
+

Los arrays son herramientas poderosas en el mundo de la programación, facilitando la organización y manipulación de datos de manera eficiente. Continuar explorando sus capacidades y combinaciones enriquecerá tus habilidades como desarrollador. ¡Sigue practicando y te convertirás en un maestro de los arrays!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-clase-introduccion-arrays_e21fb09f-1ffe-42e2-8535-ee8181c2f83c.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/01-clase-introduccion-arrays_e21fb09f-1ffe-42e2-8535-ee8181c2f83c.js" new file mode 100644 index 0000000000000000000000000000000000000000..7d86c945f96e6f46cef5cb8a2f0db4a7f90adc90 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n 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) diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..60aacb72eaa741a87d682f155b3fd80682482c50 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f0d3d123dd1e9bd77347520c3c7beb8a0bb297652321b4d6abec4db7567861b0 +size 41984670 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..bf980a9367ecb5dbd68e7c985612721709b31124 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Mutabilidad e inmutabilidad en arrays conceptos y ejemplos pr\303\241cticos.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. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-clase-introduccion-arrays_f4762994-3bf1-48d6-8fab-dbd910892f71.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-clase-introduccion-arrays_f4762994-3bf1-48d6-8fab-dbd910892f71.js" new file mode 100644 index 0000000000000000000000000000000000000000..7d86c945f96e6f46cef5cb8a2f0db4a7f90adc90 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-clase-introduccion-arrays_f4762994-3bf1-48d6-8fab-dbd910892f71.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)