diff --git a/.gitattributes b/.gitattributes index 3fde5fbbef64d4e4812d1bd4d0eb13b4bd7d2840..96c4c3e18f42f217a57a399c1c6fce4773a93f72 100644 --- a/.gitattributes +++ b/.gitattributes @@ -207,3 +207,13 @@ subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/03-Funciones[[:space:]]y[[:space:]]This/07-Fundamentos[[:space:]]del[[:space:]]Desarrollo[[:space:]]Web[[:space:]]Frontend[[:space:]]y[[:space:]]Backend.mp4 filter=lfs diff=lfs merge=lfs -text subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/04-Manipulación[[:space:]]de[[:space:]]Arrays/01-Arrays[[:space:]]Propiedades[[:space:]]Acceso[[:space:]]y[[:space:]]Creación[[:space:]]en[[:space:]]Programación.mp4 filter=lfs diff=lfs merge=lfs -text subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/04-Manipulación[[:space:]]de[[:space:]]Arrays/02-Mutabilidad[[:space:]]e[[:space:]]inmutabilidad[[:space:]]en[[:space:]]arrays[[:space:]]conceptos[[:space:]]y[[:space:]]ejemplos[[:space:]]prácticos.mp4 filter=lfs diff=lfs merge=lfs -text +subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/04-Manipulación[[:space:]]de[[:space:]]Arrays/03-Métodos[[:space:]]push[[:space:]]y[[:space:]]pop[[:space:]]para[[:space:]]modificar[[:space:]]arrays[[:space:]]en[[:space:]]JavaScript.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/04-Métodos[[:space:]]map[[:space:]]y[[:space:]]forEach[[:space:]]en[[:space:]]JavaScript[[:space:]]Uso[[:space:]]y[[:space:]]Ejemplos[[:space:]]Prácticos.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/05-Métodos[[:space:]]Filter[[:space:]]y[[:space:]]Reduce[[:space:]]en[[:space:]]JavaScript[[:space:]]Uso[[:space:]]y[[:space:]]Ejemplos[[:space:]]Prácticos.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/06-Métodos[[:space:]]find[[:space:]]y[[:space:]]findIndex[[:space:]]en[[:space:]]JavaScript[[:space:]]Uso[[:space:]]y[[:space:]]ejemplos[[:space:]]prácticos.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/07-Uso[[:space:]]del[[:space:]]método[[:space:]]slice[[:space:]]para[[:space:]]extraer[[:space:]]porciones[[:space:]]de[[:space:]]un[[:space:]]array[[:space:]]en[[:space:]]JavaScript.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/08-Uso[[:space:]]del[[:space:]]Spread[[:space:]]Operator[[:space:]]en[[:space:]]JavaScript[[:space:]]Copia[[:space:]]Combinación[[:space:]]y[[:space:]]Más.mp4 filter=lfs diff=lfs merge=lfs -text +subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/01-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos[[:space:]]en[[:space:]]JavaScript[[:space:]]Conceptos[[:space:]]y[[:space:]]Práctica.mp4 filter=lfs diff=lfs merge=lfs -text +subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/02-Creación[[:space:]]y[[:space:]]Manipulación[[:space:]]de[[:space:]]Objetos[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text +subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/03-Función[[:space:]]constructora[[:space:]]y[[:space:]]gestión[[:space:]]de[[:space:]]instancias[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text +subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/05-Programación[[:space:]]Orientada[[:space:]]a[[:space:]]Objetos/04-Clases[[:space:]]en[[:space:]]JavaScript[[:space:]]Creación[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Objetos[[:space:]]con[[:space:]]Sintaxis[[:space:]]Moderna.mp4 filter=lfs diff=lfs merge=lfs -text diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-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/02-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/02-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..2c57effdaea884dac445e0e80a316eca7fe69252 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/02-Resumen.html" @@ -0,0 +1,133 @@ + + + + + + + Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos + + + +
+
+

Resumen

¿Qué son los conceptos de mutabilidad e inmutabilidad en arrays?

+

A medida que nos adentramos en el fascinante universo de la programación, los conceptos de mutabilidad e inmutabilidad juegan un papel clave, especialmente al manipular arrays. En su esencia, mutabilidad se refiere a la capacidad de un array para cambiar su estado o contenido después de haber sido creado. Esto puede ser muy conveniente en ciertas situaciones, pero también puede introducir complejidad. Por otro lado, la inmutabilidad asegura que una vez creado, el array no sea alterado, lo cual puede ser útil para asegurar la consistencia de los datos a lo largo del tiempo.

+

¿Cómo agregar un elemento a un array?

+

Añadir un elemento a un array es una tarea simple pero poderosa que puede realizarse de diferentes maneras. Uno de los métodos más comunes es utilizar Array.push(), que es un método mutable. Para ilustrarlo, veamos un ejemplo utilizando un array de frutas:

+
let frutas = ['apple', 'banana', 'orange'];
+frutas.push('watermelon');
+console.log(frutas);
+
+

Al ejecutar el código, notarás que el array frutas ahora incluye watermelon. Este método ha modificado directamente el array original.

+

¿Qué es la inmutabilidad y cómo se aplica con arrays?

+

La inmutabilidad se logra creando un nuevo array en lugar de modificar el existente. Un gran ejemplo de inmutabilidad es el uso del método Array.concat(), que permite combinar arrays sin alterar el array original:

+
const frutas = ['apple', 'banana', 'orange'];
+const nuevasFrutas = frutas.concat(['grape', 'kiwi']);
+console.log(frutas);
+console.log(nuevasFrutas);
+
+

Observamos aquí que frutas permanece inalterado, mientras que nuevasFrutas es un nuevo array que incluye todos los elementos combinados. Esta técnica es invaluable para prevenir efectos secundarios no intencionados en nuestros programas.

+

¿Cómo comprobar si una variable es un array?

+

Verificar si una variable es un array es esencial para prevenir errores en tiempo de ejecución. JavaScript ofrece el método Array.isArray(), que nos devuelve un booleano indicando si el objeto es un array:

+
const frutas = ['apple', 'banana', 'orange'];
+const isArray = Array.isArray(frutas);
+console.log(isArray); // true
+
+

El resultado es true, lo que confirma que frutas es efectivamente un array.

+

¿Cómo sumar todos los elementos de un array?

+

Sumar elementos en un array es una operación común que puede realizarse de manera eficiente utilizando un ciclo for. Esta técnica no solo itera sobre cada elemento del array, sino que también acumula el total de los números, lo que puede ser un recurso poderoso en la manipulación de datos numéricos.

+

Ejemplo de ejercicio práctico

+

Vamos a realizar una práctica para sumar todos los elementos de un array:

+
const numbersArray = [1, 2, 3, 4, 5];
+let suma = 0;
+
+for (let i = 0; i < numbersArray.length; i++) {
+    suma += numbersArray[i];
+}
+
+console.log(`La suma de todos los elementos del array es: ${suma}`); // La suma es 15
+
+

Este script suma todos los números en numbersArray, mostrando un resultado de 15. Utilizamos la propiedad .length para asegurar que el ciclo recorra todos los elementos del array, y i++ para avanzar cada vez un índice. Esta estructura es fundamental para operaciones aritméticas dentro de arrays.

+

Estos ejemplos básicos pero efectivos ilustran el uso de arrays y cómo manipularlos. La comprensión de estos conceptos te permitirá abordar problemas más complejos en el futuro. ¡Sigue practicando y explorando!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-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/03-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/03-M\303\251todos push y pop para modificar arrays en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-M\303\251todos push y pop para modificar arrays en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..5684ec59ae3612661669b3ae9e3eea17fac3b4fb --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-M\303\251todos push y pop para modificar arrays en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:366fff0b24b01501e3b2bc846a28ba2630e20fad85937fe1324dd6fa10d9cca1 +size 21702850 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-M\303\251todos push y pop para modificar arrays en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-M\303\251todos push y pop para modificar arrays en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..87c1ca1b9800521fb4a805f511839ba60ce0e8ea --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-M\303\251todos push y pop para modificar arrays en JavaScript.vtt" @@ -0,0 +1,343 @@ +WEBVTT + +00:00.000 --> 00:02.900 +En esta clase vamos a hablar de dos +métodos + +00:02.900 --> 00:05.700 +que nos modifican el array original. + +00:05.700 --> 00:09.000 +Estos métodos son tanto push como pop. + +00:09.000 --> 00:13.000 +Lo que hace push es añadir uno o más +elementos + +00:13.000 --> 00:14.400 +al final de un +array, + +00:14.400 --> 00:17.900 +y adicional nos va a devolver esa longitud +del array. + +00:17.900 --> 00:20.100 +Ya lo vamos a ver en juego cómo sería. + +00:20.100 --> 00:23.400 +Sin embargo, en la gráfica tendríamos un +array + +00:23.400 --> 00:26.000 +que tiene, en este caso, cinco posiciones, + +00:26.000 --> 00:27.300 +es de +números, + +00:27.300 --> 00:31.100 +y lo que podemos hacer es agregarle a ese +mismo array + +00:31.100 --> 00:35.300 +otro valor, en este caso le estamos +agregando el número 27. + +00:35.300 --> 00:38.900 +Este array es el mismo, el primero, el +primero, + +00:38.900 --> 00:40.800 +no estamos creando uno +nuevo, + +00:40.800 --> 00:42.800 +sino que estamos haciendo una modificación. + +00:42.800 --> 00:45.200 +Eso es súper importante tenerlo en cuenta. + +00:45.200 --> 00:48.000 +Entonces, veamos cómo sería en código. + +00:48.000 --> 00:50.800 +Voy a colocar un título que nos +diga + +00:50.800 --> 00:57.600 +métodos que modifican el array original. + +00:57.600 --> 00:59.600 +Original +array. + +00:59.600 --> 01:04.600 +Y vamos a colocar que esto es básicamente +mutabilidad. + +01:04.600 --> 01:07.600 +Esto nos está mutando justamente nuestro +array original. + +01:07.600 --> 01:09.600 +Entonces, +mutability. + +01:09.600 --> 01:10.600 +Listo. + +01:10.600 --> 01:13.600 +El primero de ellos, por supuesto, es push. + +01:13.600 --> 01:16.300 +Y lo que vamos a hacer es crear una +variable + +01:16.300 --> 01:19.600 +que se llame, por ejemplo, países, en inglés, +countries. + +01:19.600 --> 01:22.600 +Y lo que hacemos es crear nuestro +array + +01:22.600 --> 01:24.600 +con una sintaxis +normal. + +01:24.600 --> 01:27.600 +Y lo que hacemos es decirle, por ejemplo, USA. + +01:27.600 --> 01:31.100 +Vamos a colocarle otro que sea, por ejemplo, +Canada. + +01:31.100 --> 01:34.600 +Y vamos a colocar otro que sea +UK. + +01:34.600 --> 01:38.600 +Estos countries, que aquí me faltó la E, + +01:38.600 --> 01:40.600 +vamos a agregarle +otro. + +01:40.600 --> 01:41.600 +¿Cómo lo +hacemos? + +01:41.600 --> 01:44.600 +Vamos a colocar const new countries. + +01:44.600 --> 01:46.100 +New +countries. + +01:46.100 --> 01:48.600 +Voy a colocarme esta variable +acá. + +01:48.600 --> 01:50.600 +Voy a cambiarle la +C. + +01:50.600 --> 01:54.600 +Y lo que hacemos es decir, countries.push. + +01:54.600 --> 01:57.600 +En este caso, le estamos diciendo a ese +que nosotros + +01:57.600 --> 02:00.600 +acabamos de crear, quiero que, por favor, + +02:00.600 --> 02:04.600 +le agregues un valor determinado o varios +valores. + +02:04.600 --> 02:07.600 +En este caso, voy a colocarle dos países +nuevos. + +02:07.600 --> 02:11.600 +Vamos a colocarle, por ejemplo, Alemania, +Germany. + +02:11.600 --> 02:14.600 +Y vamos a colocarle otro, por ejemplo, +Australia. + +02:14.600 --> 02:15.600 +Australia. + +02:15.600 --> 02:17.600 +Australia. + +02:17.600 --> 02:18.600 +Listo. + +02:18.600 --> 02:21.600 +El punto acá importante es revisar, uno, + +02:21.600 --> 02:25.600 +¿qué nos arrojaría o cómo se modificaría +nuestro array + +02:25.600 --> 02:27.600 +original, que sería +countries? + +02:27.600 --> 02:32.600 +Y también, ¿qué hace esta operación que +estamos haciendo? + +02:32.600 --> 02:35.600 +Entonces, sería console.log de +quién? + +02:35.600 --> 02:36.600 +De new +countries. + +02:36.600 --> 02:37.600 +Entonces, +veamos. + +02:37.600 --> 02:40.600 +Vamos a correr nuestro +código. + +02:40.600 --> 02:42.600 +Este caso sería +push. + +02:42.600 --> 02:43.600 +Listo. + +02:43.600 --> 02:45.600 +Entonces, tenemos nuestro array original, + +02:45.600 --> 02:48.600 +que sería USA, Canadá, Canadá, +UK. + +02:48.600 --> 02:52.600 +Y mira que nos estuvo modificando ese +valor original que le + +02:52.600 --> 02:54.600 +agregamos al +principio. + +02:54.600 --> 02:58.600 +Y seguido de esto, nos dice que new +countries es un valor. + +02:58.600 --> 03:01.600 +Es decir, que esta operación como tal, + +03:01.600 --> 03:05.600 +aparte de que nos modifica, nos está +devolviendo ese valor. + +03:05.600 --> 03:08.600 +Y ese valor es la nueva longitud del array. + +03:08.600 --> 03:12.600 +En este caso, por supuesto, tenemos 1, 2, 3, +4 y 5. + +03:12.600 --> 03:15.600 +Propiedades o valores en este array. + +03:15.600 --> 03:18.600 +Por otro lado, tenemos +pop. + +03:18.600 --> 03:21.600 +¿Qué pop nos +hace? + +03:21.600 --> 03:25.600 +Primero, nos elimina el último elemento +del array. + +03:25.600 --> 03:29.600 +Y adicional, también nos devuelve ese valor. + +03:29.600 --> 03:30.600 +¿Cómo +sería? + +03:30.600 --> 03:33.600 +Entonces, vamos a colocar por acá pop, + +03:33.600 --> 03:34.600 +que sería el otro +método. + +03:34.600 --> 03:38.600 +Y vamos a colocarle una variable que se +llama removed. + +03:38.600 --> 03:42.600 +Removed +country. + +03:42.600 --> 03:45.600 +Y aquí, lo que vamos a hacer es tomar +nuestro countries, + +03:45.600 --> 03:49.600 +el original, el array que creamos al +principio, + +03:49.600 --> 03:52.600 +y le vamos a decir +pop. + +03:52.600 --> 03:55.600 +Luego de este pop, vamos a hacer de nuevo +lo mismo. + +03:55.600 --> 03:57.600 +Vamos a colocar dos +console.log. + +03:57.600 --> 04:01.600 +El primero para revisar esta variable que +creamos. + +04:01.600 --> 04:06.600 +Y el otro para colocar también el array +que nosotros creamos. + +04:06.600 --> 04:08.600 +Vamos a ver si se modificó, qué pasó con él. + +04:08.600 --> 04:11.600 +Entonces, vamos a correr el +código. + +04:11.600 --> 04:15.600 +Y aquí vemos, efectivamente, que countries +fue modificado de nuevo. + +04:15.600 --> 04:18.600 +Le quitó el último +elemento. + +04:18.600 --> 04:25.600 +Y adicional, nos devuelve ese elemento que +fue removido. + +04:25.600 --> 04:30.600 +Aquí voy a colocarle +country. + +04:30.600 --> 04:36.600 +Y ya nos quedaría muy bien +escrito. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..5ba59e6408d8fb1c9d7804d430f16144ecf9d7f7 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-Resumen.html" @@ -0,0 +1,136 @@ + + + + + + + Métodos push y pop para modificar arrays en JavaScript + + + +
+
+

Resumen

¿Qué son los métodos push y pop en JavaScript?

+

En el fascinante mundo de la programación, es crucial dominar cómo manipular arrays de forma efectiva. Los métodos push y pop en JavaScript son herramientas esenciales para cualquier desarrollador al trabajar con arrays. A través de este contenido, profundizaremos en estos métodos mutables, que tienen la capacidad de alterar el array original y retornar información importante.

+

¿Cómo funciona el método push?

+

El método push es una poderosa función de JavaScript que permite agregar uno o más elementos al final de un array. Al hacer esto, no solo se modifica el array original, sino que también se devuelve la nueva longitud del mismo. Esto es posible debido a las capacidades de mutabilidad que JavaScript ofrece.

+

Veamos un ejemplo en código:

+
let countries = ['USA', 'Canada', 'UK'];
+const newCountries = countries.push('Germany', 'Australia');
+
+console.log(countries); // ['USA', 'Canada', 'UK', 'Germany', 'Australia']
+console.log(newCountries); // 5
+
+

En este fragmento de código, comenzamos con un array llamado countries que contiene tres países. Usando push, hemos añadido Alemania y Australia al final del array. Como resultado, countries ahora incluye estos dos nuevos elementos y newCountries almacena el valor de la nueva longitud del array: 5.

+

¿Qué hace el método pop?

+

Contrario al método push, pop remueve el último elemento de un array, devolviendo dicho elemento y modificando el array original en el proceso. Esto hace que pop sea ideal para situaciones donde necesitemos simplificar el array o verificar el último elemento añadido.

+

Observemos el siguiente ejemplo en código:

+
let countries = ['USA', 'Canada', 'UK', 'Germany', 'Australia'];
+const removedCountry = countries.pop();
+
+console.log(removedCountry); // 'Australia'
+console.log(countries); // ['USA', 'Canada', 'UK', 'Germany']
+
+

Aquí, el método pop elimina 'Australia' del final del array countries. Así, removedCountry almacena el valor 'Australia', mientras que el array countries se reduce nuevamente a cuatro elementos.

+

Consejos prácticos para el uso de push y pop

+

Cuando utilices estos métodos, ten en cuenta los siguientes consejos:

+
    +
  • +

    Push:

    +
      +
    • Útil para añadir elementos consecutivos a un array.
    • +
    • Utilizado frecuentemente en pilas donde los datos se añaden al final.
    • +
    +
  • +
  • +

    Pop:

    +
      +
    • Perfecto para eliminar elementos sin comprometer la estructura inicial del array.
    • +
    • Adecuado en funciones que requieran el último elemento de un array, como algoritmos de last in, first out (LIFO).
    • +
    +
  • +
+

Conclusión

+

Tanto push como pop son métodos vitales cuando trabajamos en la manipulación básica de arrays en JavaScript. Aprender a utilizarlos eficazmente aumentará tanto la eficiencia como la comprensión de cómo gestionar datos de manera dinámica. Continúa explorando estas funciones y recuerda que la práctica constante te acercará a dominar JavaScript con confianza. ¡Ánimo y feliz programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-clase-push-pop_8fa0e05d-0543-4a98-9958-677a086bccb5.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-clase-push-pop_8fa0e05d-0543-4a98-9958-677a086bccb5.js" new file mode 100644 index 0000000000000000000000000000000000000000..88efcbcc62b4bfa91c8b077839df73727fbfbad3 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/03-clase-push-pop_8fa0e05d-0543-4a98-9958-677a086bccb5.js" @@ -0,0 +1,55 @@ +// Methods that modify the original array (Mutability). + +// push() + +const countries = ['USA', 'Canada', 'UK'] +const newCountries = countries.push('Germany', 'Australia') + +console.log(countries) +console.log(newCountries) + +// pop() + +const removedCountry = countries.pop() + +console.log(countries) +console.log(removedCountry) + +// Exercise: Managing a Stack + +let bookCart = [] + +const ADD_TO_CART_ACTION = 'addToCart' +const REMOVE_FROM_CART_ACTION = 'removeFromCart' +const VIEW_CART_ACTION = 'viewCart' + +function viewCart () { + console.log('Current Cart of Books: ', bookCart) +} + +function performCartActions (action, newBook) { + switch (action) { + case ADD_TO_CART_ACTION: + bookCart.push(newBook) + break; + case REMOVE_FROM_CART_ACTION: + if (bookCart.length === 0) { + console.log('Cart is empty. No books to remove.') + } else { + const removedBook = bookCart.pop() + console.log(`Removed book from the cart: ${removedBook}`) + } + break; + case VIEW_CART_ACTION: + viewCart() + break; + default: + console.log('Invalid action. Please choose a vaid option.') + } +} + +performCartActions(ADD_TO_CART_ACTION, 'Think like a monk') +performCartActions(VIEW_CART_ACTION) +performCartActions(ADD_TO_CART_ACTION, 'Ego is the enemy.') +performCartActions(VIEW_CART_ACTION) +performCartActions(REMOVE_FROM_CART_ACTION) diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-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/04-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/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..c769be6246508050c0c067c1d7d92f619badfa09 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c3304ffb53c84efc083f4b6d3dd54fed261c7899d7ed64ca436ced2f32fcd2a6 +size 68869445 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..cc100fb02bafd2780e1e09ded2f4ea07b1fe400b --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-M\303\251todos map y forEach en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" @@ -0,0 +1,907 @@ +WEBVTT + +00:00.000 --> 00:03.600 +En esta clase vamos a ver dos métodos de +arrays + +00:03.600 --> 00:06.480 +que no modifican el array +original, + +00:06.480 --> 00:09.380 +pero que sí iteran sobre esos arrays. + +00:09.380 --> 00:12.540 +Entonces, vamos a revisar el primero, +que es map. + +00:12.540 --> 00:16.240 +Resulta que map es uno de los métodos más +utilizados + +00:16.240 --> 00:20.200 +en arrays, y justamente nos permite +aplicar una función + +00:20.200 --> 00:22.340 +a cada uno de los elementos del array, + +00:22.340 --> 00:25.240 +y también nos permite construir un nuevo +array + +00:25.240 --> 00:27.180 +con el +resultado. + +00:27.180 --> 00:28.540 +¿Cómo se vería +eso? + +00:28.540 --> 00:31.860 +Tendríamos, por ejemplo, un array a este lado, + +00:31.860 --> 00:33.280 +que tiene cinco +posiciones. + +00:33.280 --> 00:37.600 +En este caso, los números son 2, 4, 8, +10 y 12. + +00:37.600 --> 00:41.200 +Pero si le aplicamos una función a cada uno, + +00:41.200 --> 00:44.880 +esta función en este caso puede ser que se +multiplique por 2. + +00:44.880 --> 00:48.160 +Aquí estamos viendo que el resultado sería +un nuevo + +00:48.160 --> 00:52.440 +array, y ese array tendría que el +resultado de haber hecho + +00:52.440 --> 00:55.600 +justamente esta función por cada uno de +esos elementos. + +00:55.600 --> 00:59.640 +Entonces, si decimos 2 por 2, 4, y el +resultado se vería + +00:59.640 --> 01:00.960 +inmediatamente +acá. + +01:00.960 --> 01:03.800 +Vamos a realizar eso en el código para que +veamos mucho + +01:03.800 --> 01:06.280 +mejor cómo es que esto +funciona. + +01:06.280 --> 01:09.960 +Tendríamos, por ejemplo, acá nuestro +método map, + +01:09.960 --> 01:11.960 +y vamos a crear una +constante. + +01:11.960 --> 01:14.720 +En este caso, vamos a decir que es numbers, + +01:14.720 --> 01:17.500 +y vamos a colocarle unos +números. + +01:17.500 --> 01:23.000 +En este caso, le voy a poner del 1 al 5, 2, 3, +4 y 5. + +01:23.000 --> 01:28.360 +Y seguido, lo que vamos a hacer es colocar +una variable para + +01:28.360 --> 01:32.120 +poder tomar ese nuevo array que nos va a +entregar punto map. + +01:32.120 --> 01:33.740 +Entonces, ¿qué es lo que vamos a +hacer? + +01:33.740 --> 01:38.240 +Vamos a decir que vamos a elevar los +números al mismo + +01:38.240 --> 01:39.680 +número, es decir, al +cuadrado. + +01:39.680 --> 01:45.520 +Entonces, vamos a decir squared, squared +numbers, + +01:45.520 --> 01:51.440 +y vamos a decir numbers, que numbers punto +map. + +01:51.440 --> 01:53.560 +Aquí es donde viene la +función. + +01:53.560 --> 01:54.800 +Vamos a +aplicársela. + +01:54.800 --> 01:57.240 +Entonces, sería en este caso, +num. + +01:57.240 --> 02:01.960 +Vamos a decir que num es cada una de estas +posiciones. + +02:01.960 --> 02:04.440 +Y seguido, vamos a colocar un arrow function, + +02:04.440 --> 02:07.960 +que en este caso nos va a devolver algo +que nosotros + +02:07.960 --> 02:11.960 +queremos en este caso, que es justamente +la multiplicación de + +02:11.960 --> 02:13.560 +este número por el +mismo. + +02:13.560 --> 02:17.880 +Entonces, tenemos acá, recibimos cada uno +de los valores y + +02:17.880 --> 02:21.960 +vamos a retornar ese mismo valor +multiplicado por el mismo. + +02:21.960 --> 02:26.120 +Vamos a revisar cómo sería eso, console. +log, ¿de quién? + +02:26.120 --> 02:32.160 +De numbers y de estos números también +elevados al cuadrado. + +02:32.160 --> 02:37.360 +Voy a colocar en node, clase, justamente, map. + +02:37.360 --> 02:39.800 +Voy a correr este +código. + +02:39.800 --> 02:43.160 +Y aquí ya estamos viendo que tenemos +nuestro array original + +02:43.160 --> 02:45.600 +sin ningún tipo de +modificación. + +02:45.600 --> 02:50.360 +Y adicional, tenemos un array nuevo en +donde estamos haciendo + +02:50.360 --> 02:54.200 +la multiplicación del mismo número de cada +uno de ellos por + +02:54.200 --> 02:54.800 +el +mismo. + +02:54.800 --> 02:57.680 +Entonces, aquí estamos viendo el resultado +de hechos. + +02:57.680 --> 03:02.640 +Seguido, tenemos otro método, que es el +método forEach. + +03:02.640 --> 03:07.120 +Este método forEach lo que hace es iterar +sobre cada uno de los + +03:07.120 --> 03:10.760 +elementos, al igual que punto map, pero en +este caso, + +03:10.760 --> 03:14.280 +aparte de que también ejecuta una función +proporcionada para + +03:14.280 --> 03:18.720 +cada uno de estos elementos, no nos crea +un nuevo array. + +03:18.720 --> 03:21.280 +Nos va a devolver como el mismo número. + +03:21.280 --> 03:22.920 +Entonces, ¿qué es lo que vamos a +hacer? + +03:22.920 --> 03:26.080 +Dos, revisamos el array, la posición, + +03:26.080 --> 03:30.000 +efectuamos una función y él nos va a +devolver algo, + +03:30.000 --> 03:33.000 +pero ese algo no va a ser en forma de array. + +03:33.000 --> 03:35.680 +Revisemos cómo sería esto en código. + +03:35.680 --> 03:40.920 +Vamos a colocar forEach y por aquí vamos a +tener unas nuevas + +03:40.920 --> 03:41.840 +variables. + +03:41.840 --> 03:47.320 +Vamos a tener const, colors y aquí vamos a +colocar, + +03:47.320 --> 03:49.200 +por ejemplo, algunos +colores. + +03:49.200 --> 03:56.240 +Voy a colocar red, pink y blue, por decir +algo. + +03:56.240 --> 03:59.560 +A estos colores, lo que le vamos a hacer +es iterarlos y voy + +03:59.560 --> 04:02.200 +a retornar el valor de cada +uno. + +04:02.200 --> 04:03.560 +Eso es lo único que quiero +hacer. + +04:03.560 --> 04:09.440 +Entonces, voy a colocar const iterated colors. + +04:09.440 --> 04:11.640 +Vamos a iterar esos +colores. + +04:11.640 --> 04:14.920 +Y lo que hacemos es tomar nuestro array, +decirle, mira, + +04:14.920 --> 04:18.680 +yo quiero que recorras cada una de las +posiciones, + +04:18.680 --> 04:22.480 +voy a tener cada uno de los valores y a su +vez, + +04:22.480 --> 04:27.600 +quiero que por favor me digas cuál es el +valor de cada una de + +04:27.600 --> 04:28.640 +esas +posiciones. + +04:28.640 --> 04:31.480 +Entonces, tenemos acá +color. + +04:31.480 --> 04:35.400 +Y vamos a colocar nuevamente nuestro console. +log, + +04:35.400 --> 04:40.980 +tanto con colors como con este iterated +colors. + +04:40.980 --> 04:43.980 +Vamos a correr nuevamente nuestro programa +y nos dice que + +04:43.980 --> 04:48.640 +tenemos colors, que es nuestro array +original y aquí nos va + +04:48.640 --> 04:52.080 +a salir que iterated colors es indefinido. + +04:52.080 --> 04:56.680 +Pero algo interesante es lo que sucedió +previo a esto. + +04:56.680 --> 04:59.360 +Resulta que él sí hizo lo que nosotros +queríamos, + +04:59.360 --> 05:02.820 +que era precisamente que recorriera todo +el array y que + +05:02.820 --> 05:06.440 +cada vez que lo recorriera nos devolviera +el valor de cada uno + +05:06.440 --> 05:07.400 +de los +elementos. + +05:07.400 --> 05:10.600 +Entonces, aquí tenemos red, pink y blue. + +05:10.600 --> 05:15.520 +Sí hizo lo que queríamos, pero ya +recordemos acá que él no nos + +05:15.520 --> 05:18.560 +devuelve un array así como map, sino que +en este caso dice + +05:18.560 --> 05:21.640 +como, no, pues, no te voy a devolver nada, +es decir, + +05:21.640 --> 05:25.600 +te voy a devolver indefinido, pero sí voy +a hacer algo y ese + +05:25.600 --> 05:30.480 +algo es arrojarte cada uno de los valores +de nuestro array. + +05:30.480 --> 05:33.680 +Veamos ahora un ejemplo +aplicado. + +05:33.680 --> 05:37.760 +Vamos a revisar este documento y tenemos +la conversión de + +05:37.760 --> 05:41.480 +temperaturas de Fahrenheit a Celsius. + +05:41.480 --> 05:42.400 +¿Cómo sería +eso? + +05:42.400 --> 05:45.760 +Vamos a crear un programa que tome las +temperaturas que están + +05:45.760 --> 05:49.320 +en Fahrenheit como un input, es decir, +como entrada, + +05:49.320 --> 05:52.800 +y lo que vamos a hacer es convertirlas a +Celsius. + +05:52.800 --> 05:55.400 +En este caso nos dicen que debemos +utilizar la siguiente + +05:55.400 --> 05:56.560 +fórmula. + +05:56.560 --> 05:59.560 +Cuéntame en los comentarios, por favor, + +05:59.560 --> 06:01.800 +¿qué utilizarías en este +ejercicio? + +06:01.800 --> 06:04.080 +Map o +foreach. + +06:04.080 --> 06:07.760 +Vamos a revisar qué deberíamos utilizar en +este caso. + +06:07.760 --> 06:11.680 +Entonces vamos a colocar por acá, exercise. + +06:11.680 --> 06:15.120 +Y en este caso le vamos a colocar Fahrenheit. + +06:15.120 --> 06:18.640 +Fahrenheit. + +06:18.640 --> 06:20.760 +Vamos a ver si lo escribo +bien. + +06:20.760 --> 06:22.800 +2 +Celsius. + +06:22.800 --> 06:23.320 +Listo. + +06:23.320 --> 06:24.120 +Conversion. + +06:24.120 --> 06:26.120 +Conversion. + +06:26.120 --> 06:26.620 +Muy +bien. + +06:26.620 --> 06:30.800 +Vamos a tener una constante que nos va a +dar justamente las + +06:30.800 --> 06:32.560 +temperaturas en +Fahrenheit. + +06:32.560 --> 06:36.200 +Entonces voy a copiarme esto que acabé de +escribir y voy + +06:36.200 --> 06:40.120 +a colocarle al principio temperaturas. + +06:40.120 --> 06:43.000 +Temperaturas. + +06:43.000 --> 06:44.440 +Listo. + +06:44.440 --> 06:45.640 +En +Fahrenheit. + +06:45.640 --> 06:48.120 +Entonces ya tenemos nuestra variable. + +06:48.120 --> 06:51.360 +Esa variable va a ser un array y este +array va a tener + +06:51.360 --> 06:53.760 +justamente las temperaturas, que va a ser, +por ejemplo, + +06:53.760 --> 07:00.440 +32, 68, 95, eso puede ser cualquier valor +que queramos, + +07:00.440 --> 07:04.040 +y 212, por +ejemplo. + +07:04.040 --> 07:07.560 +Seguido de esto, lo que debemos hacer es +la conversión de + +07:07.560 --> 07:10.480 +esas temperaturas que están en Fahrenheit +a Celsius. + +07:10.480 --> 07:14.000 +Entonces vamos a crearnos otra constante, +const, + +07:14.000 --> 07:17.840 +temperaturas, voy a ahorrarme el hecho de +volver a colocar + +07:17.840 --> 07:21.120 +temperaturas, y ahora voy a colocar Celsius, + +07:21.120 --> 07:23.320 +que ya también lo escribí por +aquí. + +07:23.320 --> 07:26.040 +Ahora, ¿qué sería +esto? + +07:26.040 --> 07:28.320 +Por supuesto, nos tocaría tomar nuestro array, + +07:28.320 --> 07:31.160 +que es el de las temperaturas en Fahrenheit, + +07:31.160 --> 07:36.240 +seguido de el método, que en este caso +sería map, + +07:36.240 --> 07:41.480 +precisamente porque queremos recibir +justamente un array con + +07:41.480 --> 07:44.960 +las temperaturas, pero en este caso, +convertidas a Celsius. + +07:44.960 --> 07:46.840 +Por eso que necesitamos un punto más, + +07:46.840 --> 07:51.080 +porque necesitamos recibir un array que +sea las temperaturas + +07:51.080 --> 07:52.480 +convertidas. + +07:52.480 --> 07:54.440 +Entonces, ¿qué es lo que vamos a +colocar? + +07:54.440 --> 07:57.320 +Vamos a escribir Fahrenheit, voy a tomarme +eso, + +07:57.320 --> 08:01.640 +que sería como la temperatura o cada valor +en particular, + +08:01.640 --> 08:05.760 +y lo que hacemos es aplicar la fórmula que +nos dieron acá, + +08:05.760 --> 08:07.640 +por cada uno de los +elementos. + +08:07.640 --> 08:08.960 +¿Cómo sería esa +fórmula? + +08:08.960 --> 08:11.800 +Entonces vamos a colocar, entre paréntesis, + +08:11.800 --> 08:16.920 +5 dividido 9, que es el primer valor que +tenemos acá, + +08:16.920 --> 08:20.920 +seguido de una multiplicación, ¿de +quién? + +08:20.920 --> 08:24.600 +De la temperatura en Fahrenheit, menos 32. + +08:24.600 --> 08:28.280 +Entonces vamos a colocar por acá nuestra +temperatura en + +08:28.280 --> 08:32.280 +Fahrenheit, menos +32. + +08:32.280 --> 08:36.800 +Y aquí ya tendríamos nuestra fórmula por +cada uno de los + +08:36.800 --> 08:40.360 +elementos, y ya lo estamos agregando a una +variable, + +08:40.360 --> 08:43.880 +que es esta de las temperaturas en Celsius. + +08:43.880 --> 08:47.560 +Vamos a colocar un console.log, en donde +vamos a revisar, + +08:47.560 --> 08:48.240 +¿quién? + +08:48.240 --> 08:49.960 +Las temperaturas en +Fahrenheit. + +08:49.960 --> 08:53.680 +Entonces, temperatures, voy a colocar esto +así. + +08:53.680 --> 08:56.960 +Ups, no, no todo, solo el nombre de la +variable. + +08:56.960 --> 09:02.160 +Temperatures in Fahrenheit, vamos a +colocarlo así. + +09:02.160 --> 09:04.440 +Y colocamos acá nuestra +variable, + +09:04.440 --> 09:08.120 +para que no la arroje, seguido de un console. +log, + +09:08.120 --> 09:11.200 +en donde también vamos a revisar las +temperaturas en grados + +09:11.200 --> 09:11.880 +Celsius. + +09:11.880 --> 09:16.560 +Entonces colocamos por acá, temperaturas +en Celsius, + +09:16.560 --> 09:20.400 +dos puntos, y colocamos acá +esto. + +09:20.400 --> 09:23.960 +Vamos a guardar, corremos nuevamente +nuestro código, + +09:23.960 --> 09:27.720 +y aquí ya tenemos nuestras temperaturas en +Fahrenheit, + +09:27.720 --> 09:31.000 +que aquí ya vemos el tema de que no nos +está mutando nuestra + +09:31.000 --> 09:32.040 +array. + +09:32.040 --> 09:35.240 +Y segundo, estamos viendo ya la conversión. + +09:35.240 --> 09:39.640 +Corremos nuestro código, y aquí ya nos +salen las temperaturas + +09:39.640 --> 09:40.520 +en +Fahrenheit. + +09:40.520 --> 09:45.080 +Aquí algo interesante es que no nos +modificó el array original, + +09:45.080 --> 09:47.960 +y adicional, tenemos nuestras temperaturas +en Celsius. + +09:47.960 --> 09:50.760 +Entonces, aplicamos justamente esto que +vimos en nuestro + +09:50.760 --> 09:55.480 +documento, en donde tenemos que en map va +a suceder algo, + +09:55.480 --> 10:00.640 +una función cualquiera, y nos va a arrojar +en cada una de las + +10:00.640 --> 10:02.720 +posiciones un valor +diferente. + +10:02.720 --> 10:06.000 +Ahora, revisemos otro +ejercicio. + +10:06.000 --> 10:10.640 +Tenemos por acá, suma de los elementos en +un array. + +10:10.640 --> 10:14.680 +Crea un programa que tome los números de +un array, + +10:14.680 --> 10:18.920 +y justamente calcula la suma de todos los +elementos de un + +10:18.920 --> 10:19.640 +array. + +10:19.640 --> 10:22.120 +Por favor, cuéntame en los comentarios que +utilizarías, + +10:22.120 --> 10:24.400 +map o +foliage. + +10:24.400 --> 10:27.320 +Yo, mientras tú vas escribiendo eso, + +10:27.320 --> 10:29.360 +yo voy a ir colocando acá el título, + +10:29.360 --> 10:35.160 +exercise, sum of elements in an array. + +10:35.160 --> 10:36.160 +OK. + +10:36.160 --> 10:37.360 +Vamos a irlo a +revisar. + +10:37.360 --> 10:41.080 +Vamos a crear nuestro array, que en este +caso es const, + +10:41.080 --> 10:45.800 +numbers va a ser igual aquí a numbers en +plural, + +10:45.800 --> 10:51.560 +y aquí va a ser igual a, vamos a colocar 1, 2, +3, 4, y 5. + +10:51.560 --> 10:55.440 +Seguido, creo que por acá tenemos otro, +entonces, + +10:55.440 --> 10:57.920 +new +numbers. + +10:57.920 --> 11:01.640 +Ahora, lo que vamos a hacer es crearnos +una variable, + +11:01.640 --> 11:07.360 +en este caso sería let suma, y este vamos +a inicializarlo + +11:07.360 --> 11:09.320 +justamente en +0. + +11:09.320 --> 11:09.920 +¿Por +qué? + +11:09.920 --> 11:14.120 +Porque queremos almacenar acá el nuevo +valor que justamente + +11:14.120 --> 11:16.720 +necesitamos, que es el de la suma de todos +los números del + +11:16.720 --> 11:17.760 +array. + +11:17.760 --> 11:21.960 +Para ello, lo que vamos a hacer es tomar +new numbers y vamos + +11:21.960 --> 11:27.640 +a aplicar nuestro método, que en este caso +sería for each. + +11:27.640 --> 11:31.280 +Este for each, lo que nos va a permitir es +tomar cada uno de + +11:31.280 --> 11:33.760 +los elementos y empezarlos a +sumar. + +11:33.760 --> 11:37.880 +Entonces, vamos a tomar number, que sería +por cada uno, + +11:37.880 --> 11:40.120 +y retornemos +justamente. + +11:40.120 --> 11:41.640 +Vamos a tomar la +suma. + +11:41.640 --> 11:46.480 +Voy a crear acá unas llaves para colocarlo +en un salto de línea. + +11:46.480 --> 11:53.640 +Coloco suma, y esa suma sería la suma +anterior más el valor de + +11:53.640 --> 11:55.720 +el nuevo número que +tengamos. + +11:55.720 --> 12:00.520 +Esto en JavaScript también se puede +escribir como más igual + +12:00.520 --> 12:01.840 +number. + +12:01.840 --> 12:03.200 +Y ya tendríamos +eso. + +12:03.200 --> 12:06.880 +Y lo que vamos a hacer es console.log, +¿de quién? + +12:06.880 --> 12:10.400 +De new numbers, que serían los números que +tenemos en el array. + +12:10.400 --> 12:12.120 +Voy a colocar por acá también un mensajito, + +12:12.120 --> 12:14.440 +así como hicimos en el ejercicio pasado. + +12:14.440 --> 12:21.000 +Voy a colocar array of numbers y voy a +colocar console.log, + +12:21.000 --> 12:21.960 +¿de +quién? + +12:21.960 --> 12:24.600 +De la suma de todos los +números. + +12:24.600 --> 12:29.440 +Entonces, voy a colocar sum of numbers. + +12:29.440 --> 12:33.360 +Y aquí le coloco nuestra variable suma. + +12:33.360 --> 12:35.080 +Vamos a +guardar. + +12:35.080 --> 12:38.880 +Revisamos nuestro código y vemos nuestro +array y la suma de + +12:38.880 --> 12:39.560 +todos +ellos. + +12:39.560 --> 12:44.840 +Revisemos 5 más 4, 9 más este 1, 10, +y estos dos aquí. + +12:44.840 --> 12:48.160 +Nos quedó genial el código, así que por +favor cuéntame en los + +12:48.160 --> 12:51.040 +comentarios cómo te quedaron estos dos +ejercicios y si le + +12:51.040 --> 13:05.680 +pertinaste, por supuesto, al uso de map y +for each. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..08ee1cd154c3b7411f3e1a1407f35f39759e663c --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-Resumen.html" @@ -0,0 +1,137 @@ + + + + + + + Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos + + + +
+
+

Resumen

¿Qué son los métodos map y forEach en JavaScript?

+

En el mundo de la programación con JavaScript, los métodos map y forEach son esenciales para cualquier desarrollador que trabaje con arrays. Ambos métodos permiten iterar sobre arrays, pero cada uno tiene características y propósitos distintos. Ambos son fundamentales para manipular datos de manera efectiva y eficiente en tus aplicaciones.

+

¿Cómo funciona el método map?

+

El método map es uno de los métodos de arrays más poderosos y versátiles en JavaScript. Este método crea un nuevo array al aplicar una función proporcionada a cada elemento del array original. Lo más relevante de map es que no modifica el array original, sino que devuelve un nuevo array con los resultados de la función aplicada.

+

Ejemplo de uso de map

+

Supongamos que tenemos un array de números. Queremos elevar al cuadrado cada número en el array. Usando map, esto se vería de la siguiente manera:

+
const numbers = [1, 2, 3, 4, 5];
+const squaredNumbers = numbers.map(num => num * num);
+console.log(numbers); // [1, 2, 3, 4, 5]
+console.log(squaredNumbers); // [1, 4, 9, 16, 25]
+
+

En este ejemplo, numbers es el array original que permanece inalterado, mientras que squaredNumbers es el nuevo array con cada elemento elevado al cuadrado.

+

¿Cómo funciona el método forEach?

+

El método forEach también itera sobre cada elemento de un array y ejecuta una función para cada uno de ellos. Sin embargo, a diferencia de map, forEach no crea un nuevo array ni devuelve ningún resultado. Simplemente ejecuta una función proporcionada para cada elemento.

+

Ejemplo de uso de forEach

+

Veamos cómo iterar sobre un array de colores e imprimir cada color en la consola:

+
const colors = ['red', 'pink', 'blue'];
+colors.forEach(color => console.log(color));
+
+

Aquí, forEach imprime cada color en la consola, pero no devuelve un nuevo array.

+

Comparación práctica de map y forEach

+

Cuando decides utilizar uno de estos métodos, la elección depende de lo que necesitas hacer con el resultado:

+
    +
  • Usa map cuando quieras transformar cada elemento de un array en algo nuevo y obtener un nuevo array como resultado.
  • +
  • Usa forEach cuando necesites ejecutar una acción para cada elemento sin preocuparte por crear o devolver un nuevo array.
  • +
+

Ejemplo práctico: Conversión de temperaturas

+

Imagine que tiene temperaturas en Fahrenheit y necesita convertirlas a Celsius. Este es un ejemplo clásico donde map sería ideal porque queremos transformar y obtener un nuevo array con los valores convertidos.

+
const tempsInFahrenheit = [32, 68, 95, 212];
+const tempsInCelsius = tempsInFahrenheit.map(fahrenheit => (5/9) * (fahrenheit - 32));
+console.log(tempsInFahrenheit); // [32, 68, 95, 212]
+console.log(tempsInCelsius); // [0, 20, 35, 100]
+
+

Ejemplo práctico: Suma de elementos de un array

+

En este caso, queremos sumar todos los elementos de un array. Un enfoque típico sería usar forEach, ya que estamos realizando una operación acumulativa y no necesitamos un nuevo array.

+
const numbers = [1, 2, 3, 4, 5];
+let suma = 0;
+numbers.forEach(number => suma += number);
+console.log(suma); // 15
+
+

En este caso, forEach recorre el array y suma cada elemento a una variable acumuladora suma.

+

Conclusión

+

Conocer las diferencias entre map y forEach y saber cuándo utilizar cada uno es fundamental para escribir código JavaScript eficiente y limpio. Recuerda que map es ideal para transformar y obtener nuevos arrays, mientras que forEach es excelente para operaciones que no necesitan devolver un nuevo array. Con práctica y conocimientos sólidos, podrás manejar los arrays en JavaScript con seguridad y eficiencia. ¡Sigue explorando y experimentando para mejorar tus habilidades de programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-clase-map-foreach_d7b1a93f-0f56-4fd3-a419-c28c09dc2a16.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-clase-map-foreach_d7b1a93f-0f56-4fd3-a419-c28c09dc2a16.js" new file mode 100644 index 0000000000000000000000000000000000000000..85dcf39c553f1c8c3c61e5d01a445a75e46c1387 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/04-clase-map-foreach_d7b1a93f-0f56-4fd3-a419-c28c09dc2a16.js" @@ -0,0 +1,40 @@ +// Methods that iterate over an array. +// Methods that DO NOT modify the original array (Immutability). + +// map() + +const numbers = [1, 2, 3, 4, 5] +const squaredNumbers = numbers.map(num => num * num) + +console.log(numbers) +console.log(squaredNumbers) + +// forEach() + +const colors = ['red', 'pink', 'blue'] +const iteratedColors = colors.forEach(color => console.log(color)) + +console.log(colors) +console.log(iteratedColors) + +// Exercise: Fahrenheit to Celsius conversion + +const temperaturesInFahrenheit = [32, 68, 95, 104, 212] + +const temperaturesInCelsius = temperaturesInFahrenheit.map(fahrenheit => (5/9) * (fahrenheit - 32)) + +console.log('Temperatures In Fahrenheit: ', temperaturesInFahrenheit) +console.log('Temperatures In Celsius: ', temperaturesInCelsius) + +// Exercise: Sum of Elements in an Array + +const newNumbers = [1, 2, 3, 4, 5] + +let sum = 0 + +newNumbers.forEach(number => { + sum += number +}) + +console.log('Array of Numbers: ', newNumbers) +console.log('Sum of Numbers: ', sum) diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-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/05-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/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..e371f22f2494315d421dc975f393c8cbb81d8cce --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:293e4b713a401fa2895e8e60e4683c090862ffc6ad0ab04c5e973f569b56cac5 +size 61041444 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..ccbb9e4df897c69023db18d6d3a6704feb25b1d0 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-M\303\251todos Filter y Reduce en JavaScript Uso y Ejemplos Pr\303\241cticos.vtt" @@ -0,0 +1,1198 @@ +WEBVTT + +00:00.000 --> 00:03.540 +En esta clase vamos a estar hablando sobre +dos métodos de Arrays + +00:03.540 --> 00:06.080 +que no modifican el Array +original. + +00:06.080 --> 00:08.740 +Ellos son Filter y +Reduce. + +00:08.740 --> 00:11.040 +Filter, en este +caso, + +00:11.040 --> 00:13.680 +nos va a mostrar que tenemos un Array, + +00:13.680 --> 00:17.040 +en este caso es 2, 4, 8, 10 y +12, + +00:17.040 --> 00:21.180 +y resulta que cada uno de ellos va a pasar +por una función, + +00:21.180 --> 00:24.540 +pero esta función debe ser a su vez una +condición, + +00:24.540 --> 00:28.340 +es decir, si este número, en este caso, + +00:28.340 --> 00:30.340 +pasa esa +condición, + +00:30.340 --> 00:33.340 +se crea un nuevo Array con esos +elementos + +00:33.340 --> 00:35.340 +que pasaron la +condición. + +00:35.340 --> 00:39.140 +Por ejemplo, aquí estamos viendo que los +números mayores a 5, + +00:39.140 --> 00:42.940 +por ejemplo, están pasando aquí a este +nuevo Array + +00:42.940 --> 00:45.340 +y se está creando el Array con los +números + +00:45.340 --> 00:47.540 +que sean mayores a +5. + +00:47.540 --> 00:49.540 +En este caso vamos a revisarlo en el +código + +00:49.540 --> 00:52.240 +para ver precisamente cómo es que funciona. + +00:52.240 --> 00:54.940 +Entonces vamos a colocar por acá un +comentario + +00:54.940 --> 00:56.340 +que se llame +Filter, + +00:56.340 --> 00:59.840 +y vamos a crear una variable que se llame +Numbers, + +00:59.840 --> 01:03.140 +y dentro de Numbers vamos a crear un Array +de números, + +01:03.140 --> 01:07.440 +puede ser, por ejemplo, 2, 3, 4, +5, + +01:07.440 --> 01:11.140 +llévamolo hasta 10, 8, 9 y +10. + +01:11.140 --> 01:13.240 +Teniendo en cuenta este +Array, + +01:13.240 --> 01:15.940 +lo que vamos a hacer es crear otra +variable + +01:15.940 --> 01:20.240 +en donde vamos a crear solamente los +números que son pares. + +01:20.240 --> 01:21.240 +¿Cómo lo vamos a +crear? + +01:21.240 --> 01:23.840 +Vamos a decir +evenNumbers, + +01:23.840 --> 01:28.240 +y va a ser el Array que teníamos inicialmente, + +01:28.240 --> 01:30.140 +punto +Filter, + +01:30.140 --> 01:33.940 +y dentro de Filter es que vamos a crear +esa función + +01:33.940 --> 01:37.440 +que nos va a retornar los elementos que sí +queremos, + +01:37.440 --> 01:39.840 +que en este caso son los números pares. + +01:39.840 --> 01:40.840 +¿Cómo lo +hacemos? + +01:40.840 --> 01:42.940 +Creamos aquí un +parámetro + +01:42.940 --> 01:44.840 +que va a ser cada uno de los elementos, + +01:44.840 --> 01:46.740 +por eso lo ponemos en +singular, + +01:46.740 --> 01:49.040 +seguido vamos a colocar un ArrowFunction, + +01:49.040 --> 01:52.440 +y aquí en este lado vamos a colocar +justamente + +01:52.440 --> 01:54.040 +lo que nos va a +retornar, + +01:54.040 --> 01:56.640 +o la condición que queremos +obtener + +01:56.640 --> 01:59.040 +justamente para este +filtrado. + +01:59.040 --> 01:59.840 +¿Cómo +sería? + +01:59.840 --> 02:01.740 +Vamos a colocar +Number, + +02:01.740 --> 02:05.340 +aquí vamos a colocar módulo +2, + +02:05.340 --> 02:08.740 +que en este caso nos va a arrojar un número. + +02:08.740 --> 02:12.740 +Si el módulo de este número es igual a cero, + +02:12.740 --> 02:15.340 +ya sabemos que es un número +par. + +02:15.340 --> 02:18.140 +Para esto vamos a revisar qué es un módulo. + +02:18.140 --> 02:21.440 +Básicamente, si tenemos una división, + +02:21.440 --> 02:24.540 +en este caso tomemos el número 4, por ejemplo, + +02:24.540 --> 02:27.240 +y estamos haciendo la división con 2, + +02:27.240 --> 02:29.440 +supongamos que esto es lo que normalmente +hacemos + +02:29.440 --> 02:31.940 +cuando creamos una +división, + +02:31.940 --> 02:33.240 +voy a colocarlo +así, + +02:33.240 --> 02:35.040 +tenemos 4 dividido +2, + +02:35.040 --> 02:38.140 +y aquí lo que hacemos es crear un valor, + +02:38.140 --> 02:39.940 +aquí decimos cuántas veces +está, + +02:39.940 --> 02:41.540 +entonces sería +2, + +02:41.540 --> 02:43.440 +2 por 2, +4, + +02:43.440 --> 02:44.940 +y aquí sería +cero. + +02:44.940 --> 02:49.040 +Si ese módulo, este valor del módulo es cero, + +02:49.040 --> 02:52.140 +pues precisamente ya sabemos que es un +número par. + +02:52.140 --> 02:54.040 +De lo contrario, si el número no es cero, + +02:54.040 --> 02:56.940 +pues ya sabemos que no es un número par. + +02:56.940 --> 03:00.040 +Ahora vamos a revisar un console.log, + +03:00.040 --> 03:03.940 +donde revisemos tanto los números +iniciales que creamos, + +03:03.940 --> 03:05.040 +¿como +quién? + +03:05.040 --> 03:07.940 +Como los números pares que acabamos de +filtrar. + +03:07.940 --> 03:10.540 +Vamos a correr nuestro +código, + +03:10.540 --> 03:12.440 +le decimos +node, + +03:12.440 --> 03:13.640 +clase, + +03:13.640 --> 03:15.240 +filter, + +03:15.240 --> 03:18.140 +y aquí vemos que tenemos nuestros +números + +03:18.140 --> 03:19.540 +de 1 a +10, + +03:19.540 --> 03:21.540 +y seguido tenemos nuestro +array + +03:21.540 --> 03:24.740 +solamente con números que son pares. + +03:24.740 --> 03:27.240 +Ahora vamos con el otro +método, + +03:27.240 --> 03:29.140 +que es +reduce. + +03:29.140 --> 03:31.540 +¿Qué nos hace este +método? + +03:31.540 --> 03:33.140 +Como su nombre lo +indica, + +03:33.140 --> 03:36.340 +es básicamente reducir un +array + +03:36.340 --> 03:38.040 +a un solo +valor. + +03:38.040 --> 03:39.240 +En este +caso, + +03:39.240 --> 03:42.140 +tenemos el número 1, 2, 3 y +4, + +03:42.140 --> 03:43.940 +y lo que se está haciendo +es + +03:43.940 --> 03:45.940 +sumando todos los +valores, + +03:45.940 --> 03:48.140 +obteniendo justamente +1. + +03:48.140 --> 03:49.740 +Esa sería la +reducción. + +03:49.740 --> 03:51.840 +En este caso, 4 más 3 es +7, + +03:51.840 --> 03:53.040 +7 más 2, +9, + +03:53.040 --> 03:54.640 +y más 1, +10. + +03:54.640 --> 03:56.940 +Vamos a ver cómo sería esto en el código. + +03:56.940 --> 03:58.840 +Coloquemos acá +reduce, + +03:58.840 --> 04:02.240 +y vamos a empezar a crear nuestras variables. + +04:02.240 --> 04:04.040 +Voy a colocar +acá + +04:04.040 --> 04:06.040 +una constante que se +llame + +04:06.040 --> 04:08.040 +numbersReduce, + +04:08.040 --> 04:10.040 +para que hagamos una +diferenciación + +04:10.040 --> 04:13.540 +con esta otra variable que creamos aquí +arriba, + +04:13.540 --> 04:15.840 +y vamos a empezar a crear nuestro +array + +04:15.840 --> 04:17.840 +en este caso puede ser, por ejemplo, + +04:17.840 --> 04:19.640 +de números del 1 al +5. + +04:19.640 --> 04:22.940 +Entonces, 1, 2, 3, 4 y +5. + +04:22.940 --> 04:24.440 +¿Qué vamos a hacer +ahora? + +04:24.440 --> 04:26.040 +Vamos a +sumarlos. + +04:26.040 --> 04:27.940 +Entonces, vamos a crear una +variable + +04:27.940 --> 04:29.440 +que se llame +suma, + +04:29.440 --> 04:30.640 +y dentro de +suma, + +04:30.640 --> 04:32.240 +vamos a colocar lo +siguiente, + +04:32.240 --> 04:33.840 +numbersReduce, + +04:33.840 --> 04:34.940 +y en este +caso, + +04:34.940 --> 04:36.540 +vamos a colocar, por +supuesto, + +04:36.540 --> 04:37.740 +nuestro +método. + +04:37.740 --> 04:40.340 +Este método no funciona así +solito. + +04:40.340 --> 04:43.640 +Nos toca agregarle ciertos +valores + +04:43.640 --> 04:45.740 +a nuestras funciones que va por dentro, + +04:45.740 --> 04:47.640 +para que precisamente +pueda + +04:47.640 --> 04:49.340 +funcionar el valor de la +soma. + +04:49.340 --> 04:51.140 +No va a funcionar así +solito. + +04:51.140 --> 04:52.640 +¿Qué le vamos a +poner? + +04:52.640 --> 04:54.240 +Él tiene +normalmente + +04:54.240 --> 04:56.440 +una función que recibe dos parámetros. + +04:56.440 --> 04:59.040 +El primer parámetro es un acumulador, + +04:59.040 --> 05:00.340 +entonces voy a +colocar + +05:00.340 --> 05:03.040 +accumulator, + +05:03.040 --> 05:04.140 +y +seguido, + +05:04.140 --> 05:06.440 +tenemos el +currentValue. + +05:06.440 --> 05:09.240 +Entonces, +currentValue. + +05:09.240 --> 05:10.240 +Entonces, +él, + +05:10.240 --> 05:12.240 +justamente como su nombre lo indica, + +05:12.240 --> 05:14.440 +va a ser como si tuviéramos una variable, + +05:14.440 --> 05:16.640 +supongamos que tuviéramos +led, + +05:16.640 --> 05:18.940 +acumulador, + +05:18.940 --> 05:21.540 +y este estuviera inicializado en +0. + +05:21.540 --> 05:22.740 +Entonces, es como si +tuviéramos + +05:22.740 --> 05:25.040 +una variable +externa, + +05:25.040 --> 05:26.540 +en donde estamos +justamente + +05:26.540 --> 05:28.340 +guardando o +almacenando + +05:28.340 --> 05:29.640 +el valor de la +suma + +05:29.640 --> 05:31.940 +de cada uno de los +datos. + +05:31.940 --> 05:33.640 +Y el currentValue, por +supuesto, + +05:33.640 --> 05:36.240 +sería cada uno de los valores del array. + +05:36.240 --> 05:38.440 +Entonces, así +funciona. + +05:38.440 --> 05:40.340 +Y lo único que nos haría +falta + +05:40.340 --> 05:42.640 +es retornar +justamente + +05:42.640 --> 05:45.540 +el acumulador +más + +05:45.540 --> 05:47.440 +el +currentValue. + +05:47.440 --> 05:50.340 +Y adicional, debemos colocarle otro valor, + +05:50.340 --> 05:52.840 +que en este caso es el initialValue, + +05:52.840 --> 05:54.040 +para nosotros va a ser +0, + +05:54.040 --> 05:57.040 +no necesitamos que empiece en otro tipo de +valor, + +05:57.040 --> 05:59.740 +sino que le vamos a poner netamente 0. + +05:59.740 --> 06:01.040 +Y ahora, lo que +hacemos + +06:01.040 --> 06:03.340 +es colocar un +console.log, + +06:03.340 --> 06:05.340 +tanto de +numbersReduce, + +06:05.340 --> 06:06.340 +como de +quién? + +06:06.340 --> 06:07.140 +De la +suma. + +06:07.140 --> 06:08.440 +Entonces, +console... + +06:08.440 --> 06:10.240 +Ups, se fue otra +cosa. + +06:10.240 --> 06:12.340 +Console.log + +06:12.340 --> 06:13.140 +¿de +quién? + +06:13.140 --> 06:14.140 +De +suma. + +06:14.140 --> 06:15.640 +Entonces, vamos a +guardar, + +06:15.640 --> 06:18.340 +corremos nuestro +código, + +06:18.340 --> 06:20.640 +y aquí ya revisamos que +tenemos + +06:20.640 --> 06:23.140 +uno, nuestro +array, + +06:23.140 --> 06:24.640 +que en este caso +sería + +06:24.640 --> 06:27.240 +1, 2, 3, 4, 5, es este de +aquí, + +06:27.240 --> 06:29.340 +y suma, que es +justamente + +06:29.340 --> 06:30.640 +un solo +valor, + +06:30.640 --> 06:32.340 +el valor +reducido, + +06:32.340 --> 06:35.640 +que en este caso sería +15. + +06:35.640 --> 06:36.840 +Por otro +lado, + +06:36.840 --> 06:38.540 +listo, nos sirve +para + +06:38.540 --> 06:40.440 +sumar elementos de un +array, + +06:40.440 --> 06:42.040 +eso está muy +bien, + +06:42.040 --> 06:45.140 +pero también nos sirve para otras cosas +reduce, + +06:45.140 --> 06:46.240 +como por +ejemplo, + +06:46.240 --> 06:48.540 +encontrar qué tanto se +repite + +06:48.540 --> 06:50.440 +una palabra en un +array. + +06:50.440 --> 06:52.440 +Entonces, acá por ejemplo, en reduce, + +06:52.440 --> 06:54.240 +lo que voy a colocarle +es + +06:54.240 --> 06:56.840 +caso, colocarlo en +minúscula, + +06:56.840 --> 06:58.140 +caso1, + +06:58.140 --> 07:00.340 +y voy a crear por acá otro que +diga + +07:00.340 --> 07:02.240 +caso2. + +07:02.240 --> 07:04.340 +Aquí voy a hacer +scroll, + +07:04.340 --> 07:05.540 +y lo que vamos a +hacer + +07:05.540 --> 07:06.840 +es revisar lo +siguiente. + +07:06.840 --> 07:09.040 +Vamos a crear ahora un +array, + +07:09.040 --> 07:10.740 +pero este array ya no va a ser de números, + +07:10.740 --> 07:12.640 +sino que va a ser de +palabras. + +07:12.640 --> 07:15.440 +Entonces voy a colocarle +words, + +07:15.440 --> 07:17.140 +y dentro de este +array, + +07:17.140 --> 07:18.640 +lo que voy a hacer es +colocar + +07:18.640 --> 07:19.640 +diferentes +palabras. + +07:19.640 --> 07:21.740 +Entonces, por +ejemplo, + +07:21.740 --> 07:23.040 +apple, + +07:23.040 --> 07:25.140 +banana, + +07:25.140 --> 07:26.840 +puede ser por +ejemplo, + +07:26.840 --> 07:28.440 +hello, + +07:28.440 --> 07:30.340 +u otra cosa puede +ser, + +07:30.340 --> 07:31.240 +bye, + +07:31.240 --> 07:33.540 +son palabras +aleatorias. + +07:33.540 --> 07:34.940 +Después de +esto, + +07:34.940 --> 07:37.140 +lo que tengo que garantizar en esta +creación + +07:37.140 --> 07:39.840 +es que por supuesto no se repita alguna de +ellas. + +07:39.840 --> 07:41.940 +Entonces, por ejemplo, voy a +decir + +07:41.940 --> 07:44.640 +banana, la voy a +duplicar, + +07:44.640 --> 07:46.740 +y voy a colocar bye +también + +07:46.740 --> 07:49.540 +otras dos veces, supongamos que está así. + +07:49.540 --> 07:50.340 +Listo. + +07:50.340 --> 07:51.940 +¿Qué vamos a hacer +ahora? + +07:51.940 --> 07:54.240 +Vamos a crear otra +variable + +07:54.240 --> 07:56.240 +en donde precisamente vamos a +revisar + +07:56.240 --> 07:58.140 +cómo funciona +reduce, + +07:58.140 --> 07:59.940 +¿para qué? Para que podamos +encontrar + +07:59.940 --> 08:02.840 +cuántas veces se +repite + +08:02.840 --> 08:04.440 +alguna de estas +palabras. + +08:04.440 --> 08:05.440 +¿Cómo lo +hacemos? + +08:05.440 --> 08:07.540 +Vamos a crear una variable por +acá + +08:07.540 --> 08:10.140 +que se llame, voy a crear un espacio, + +08:10.140 --> 08:13.640 +const word +frequency. + +08:13.640 --> 08:15.040 +Frequency. + +08:15.040 --> 08:16.540 +Vamos a hacer un +igual, + +08:16.540 --> 08:19.140 +y lo que hacemos es tomar nuestro array, + +08:19.140 --> 08:20.840 +decirle +reduce, + +08:20.840 --> 08:22.840 +y aquí es donde +empieza + +08:22.840 --> 08:25.240 +todo el tema de la función que va por dentro. + +08:25.240 --> 08:26.340 +¿Cómo lo vamos a +escribir? + +08:26.340 --> 08:28.240 +Entonces colocamos +nuevamente + +08:28.240 --> 08:31.240 +estos dos parámetros, que es tanto el +acumulador + +08:31.240 --> 08:33.740 +como el valor +actual, + +08:33.740 --> 08:36.840 +y seguido de esto vamos a colocar un arrow +function + +08:36.840 --> 08:38.840 +y unas llaves para empezar a +escribir + +08:38.840 --> 08:42.040 +el cuerpo de esta función +aquí. + +08:42.040 --> 08:44.040 +Ahora lo que hacemos es +decir, + +08:44.040 --> 08:47.140 +ok, si el current +value, + +08:47.140 --> 08:50.140 +en este caso, si el current +value + +08:50.140 --> 08:51.740 +se +repite, + +08:51.740 --> 08:54.140 +lo que vamos a hacer es +acumularlo + +08:54.140 --> 08:55.140 +o +guardarlo. + +08:55.140 --> 08:56.940 +Entonces eso es lo que vamos a hacer. + +08:56.940 --> 08:59.040 +Mira que la primera +palabra + +08:59.040 --> 09:01.440 +o lo que empezamos a hacer fue +cuestionarnos + +09:01.440 --> 09:03.740 +si esta palabra +existe. + +09:03.740 --> 09:05.740 +Y ahí es donde llega la +magia, + +09:05.740 --> 09:07.940 +por supuesto, de los +condicionales. + +09:07.940 --> 09:09.940 +Entonces, ¿qué vamos a hacer +acá? + +09:09.940 --> 09:13.440 +Sí, vamos a colocar +accumulator. + +09:13.440 --> 09:15.040 +¿En qué +posición? + +09:15.040 --> 09:17.540 +En la posición del current +value. + +09:17.540 --> 09:19.740 +En este caso, +¿existe? + +09:19.740 --> 09:21.340 +Que es como que, ah, +bueno, + +09:21.340 --> 09:23.340 +si viene por acá Apple, ¿ya +existe? + +09:23.340 --> 09:25.740 +En este caso no, sería como la primera +vez + +09:25.740 --> 09:26.740 +que llega +él, + +09:26.740 --> 09:30.240 +entonces entraría a la otra parte del +condicional. + +09:30.240 --> 09:32.240 +Si no existe, que es +justamente + +09:32.240 --> 09:34.240 +cuando llegamos, por ejemplo, a Apple, + +09:34.240 --> 09:35.940 +lo que hacemos es +decirle + +09:35.940 --> 09:37.740 +que este +acumulador + +09:37.740 --> 09:39.740 +en esta +posición + +09:39.740 --> 09:41.740 +va a ser igual a quién? A +1. + +09:41.740 --> 09:44.740 +Es decir que inmediatamente empecemos +a + +09:44.740 --> 09:47.240 +leer las palabras del +array, + +09:47.240 --> 09:50.540 +él va a empezar a decir si existe o no existe, + +09:50.540 --> 09:53.540 +y si existe, va a ser algo, ya vamos a ver +qué, + +09:53.540 --> 09:57.040 +y si no, va a empezar a guardar un valor +inicial, + +09:57.040 --> 09:59.740 +que en este caso el valor inicial sería 1. + +09:59.740 --> 10:02.740 +Entonces, ¿Apple existe? +No. + +10:02.740 --> 10:05.240 +Como no existe, entonces vamos a +guardar + +10:05.240 --> 10:07.740 +su valor inicial, que sería +1. + +10:07.740 --> 10:09.740 +En caso de que sí +exista, + +10:09.740 --> 10:11.740 +ejemplo, vamos a +banana, + +10:11.740 --> 10:13.740 +banana entraría primero de que no existe, + +10:13.740 --> 10:16.240 +entonces le guardamos un valor +1, + +10:16.240 --> 10:18.240 +pero después vamos +iterando, + +10:18.240 --> 10:20.240 +y después con el tiempo nos +encontramos + +10:20.240 --> 10:21.740 +otra vez con +banana, + +10:21.740 --> 10:23.740 +y preguntamos, +¿existe? + +10:23.740 --> 10:25.740 +Y aquí él va a decir, ah, sí, que él ya +existe + +10:25.740 --> 10:27.740 +porque ya me guardaron un valor por allá, + +10:27.740 --> 10:28.740 +que es +1. + +10:28.740 --> 10:30.740 +Si existe, en este +caso, + +10:30.740 --> 10:33.240 +lo que vamos a hacer es sumarle un 1, + +10:33.240 --> 10:35.740 +o un valor, entonces en este caso +sería + +10:35.740 --> 10:38.740 +volver a tomar el valor que ya tenemos, + +10:38.740 --> 10:41.240 +y creo que se me fueron +más, + +10:41.240 --> 10:43.240 +más cositas ahí, +sería, + +10:43.240 --> 10:45.240 +si ya existe, ¿qué vamos a +hacer? + +10:45.240 --> 10:48.240 +Vamos a sumarle un valor +más. + +10:48.240 --> 10:50.740 +Entonces aquí le estamos diciendo, ah, + +10:50.740 --> 10:53.740 +está el valor, agrégale otro valor, y fin. + +10:53.740 --> 10:57.240 +Entonces aquí se va a empezar a acumular +precisamente. + +10:57.240 --> 10:59.240 +Seguido de esto, lo que vamos a +hacer + +10:59.240 --> 11:01.240 +es retornar, +¿quién? + +11:01.240 --> 11:02.740 +El +acumulador. + +11:02.740 --> 11:05.240 +Entonces voy a subir esto un poquito, + +11:05.240 --> 11:07.740 +y lo que vamos a hacer acá es +decirle + +11:07.740 --> 11:09.740 +que el valor inicial va a +ser + +11:09.740 --> 11:11.740 +un objeto vacío en este +caso. + +11:11.740 --> 11:13.740 +Y ahora lo que hacemos es +colocar + +11:13.740 --> 11:15.740 +un console.log, ¿de +quién? + +11:15.740 --> 11:17.740 +De la frecuencia de la +palabra. + +11:17.740 --> 11:20.740 +Vamos a guardar, corremos nuestro código, + +11:20.740 --> 11:22.740 +y aquí ya vemos que +tenemos + +11:22.740 --> 11:24.740 +apple siendo +1, + +11:24.740 --> 11:26.740 +banana siendo +2, + +11:26.740 --> 11:28.740 +hello, 1, y bye, +3. + +11:28.740 --> 11:30.740 +Entonces él ya nos hizo el +conteo + +11:30.740 --> 11:32.740 +para saber cuál es la +frecuencia + +11:32.740 --> 11:58.740 +de cada una de estas +palabras. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..b3670df1fb10a099f72e4812064e42c70c35809e --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-Resumen.html" @@ -0,0 +1,128 @@ + + + + + + + Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos + + + +
+
+

Resumen

¿Cuáles son los métodos Filter y Reduce y cómo funcionan?

+

¡Bienvenidos apasionados de la programación! Hoy exploraremos dos métodos fundamentales de los arrays en JavaScript: Filter y Reduce. Ambos son herramientas poderosas que no alteran el array original, permitiendo filtrar y reducir datos de manera eficiente. Él enriquece el manejo de listas al proporcionar flexibilidad para tratar con datos complejos, haciéndolos indispensables en el arsenal de cualquier desarrollador.

+

¿Cómo utilizar el método Filter?

+

El método Filter crea un nuevo array con todos los elementos que pasan la condición implementada en la función de prueba proporcionada. Imagínate tener un array de números y desear únicamente aquellos que cumplan una cierta condición, como ser mayores a un número específico.

+

Ejemplo básico de Filter

+

Veamos un ejemplo práctico y sencillo:

+
let numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10];
+let evenNumbers = numbers.filter(number => number % 2 === 0);
+console.log(evenNumbers); // Output: [2, 4, 6, 8, 10]
+
+

En este bloque de código, filter recibe una función flecha que evalúa si cada número del array es par (i.e., el módulo de 2 es cero), retornando un nuevo array con estos números pares.

+

¿En qué consiste el método Reduce?

+

A diferencia de Filter, el método Reduce toma una array y lo reduce a un único valor aplicando una función que se ejecuta en cada valor del array, de izquierda a derecha. Un uso clásico de reduce es la suma de todos los elementos de un array.

+

Ejemplo básico de Reduce

+

Observemos cómo funciona reduce al sumar números:

+
const numbersReduce = [1, 2, 3, 4, 5];
+const sum = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+console.log(sum); // Output: 15
+
+

Aquí, reduce acumula cada valor del array en el accumulator comenzando desde cero (initialValue) hasta que se logra la suma total del array.

+

¿Qué otras aplicaciones tiene Reduce?

+

Reduce es versátil y puede utilizarse para casos más complejos, como contar la frecuencia de apariciones de palabras en un array. Esto transforma un problema potencialmente complejo en una solución elegante y concisa.

+

Contando elementos con Reduce

+

Veamos cómo contar cuántas veces se repite cada palabra en un array:

+
const words = ['apple', 'banana', 'hello', 'bye', 'banana', 'bye', 'bye'];
+const wordFrequency = words.reduce((accumulator, currentValue) => {
+    accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
+    return accumulator;
+}, {});
+
+console.log(wordFrequency); // Output: { apple: 1, banana: 2, hello: 1, bye: 3 }
+
+

En este ejemplo, usamos un objeto como acumulador donde cada vez que encontramos una palabra, incrementamos su conteo en el objeto, obteniendo así la frecuencia de cada palabra.

+

Adentrarse en el mundo de Filter y Reduce te dará habilidades valiosas para manipular arrays eficientemente, haciendo de tus líneas de código procesos más estilizados y poderosos. ¡Anímate a seguir explorando y experimentando con estos métodos!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-clase-filter-reduce_e813ab75-e07c-4b5d-aad3-8bfc93813d7a.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-clase-filter-reduce_e813ab75-e07c-4b5d-aad3-8bfc93813d7a.js" new file mode 100644 index 0000000000000000000000000000000000000000..122ea86b839dd6a0813973dc9bbf53c004d8652e --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/05-clase-filter-reduce_e813ab75-e07c-4b5d-aad3-8bfc93813d7a.js" @@ -0,0 +1,45 @@ +// Methods that iterate over an array. +// Methods that DO NOT modify the original array (Immutability). + +// filter() + +const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +const evenNumbers = numbers.filter(number => number % 2 === 0) + +console.log(numbers) +console.log(evenNumbers) + +// reduce() · case 1 + +const numbersReduce = [1, 2, 3, 4, 5] +const sum = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0) + +console.log(numbersReduce) +console.log(sum) + +// reduce() · case 2 + +const words = ['apple', 'banana', 'hello', 'bye', 'banana', 'bye', 'bye'] + +const wordFrecuency = words.reduce((accumulator, currentValue) => { + if (accumulator[currentValue]) { + accumulator[currentValue]++ + } else { + accumulator[currentValue] = 1 + } + return accumulator +}, {}) + +console.log(wordFrecuency) + +// Exercise: Passing Grade Average + +const grades = [85, 92, 60, 78, 95, 66, 88, 50, 94] + +const passingGrades = grades.filter(grade => grade >= 70) + +const averagePassingGrade = passingGrades.reduce((sum, grade) => sum + grade, 0) / passingGrades.length + +console.log('Original Grades: ', grades) +console.log('Passing Grades: ', passingGrades) +console.log('Average Passing Grade: ', averagePassingGrade) \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-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/06-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/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..1e013b13d6ccefef977ef105d01dc14e0e67557f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2940840265012b55a25215a3f6cb63e52f76e7d08608bfe87c3080024e2b5049 +size 19643282 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..f4f09fcb971c722e001c8ae74dacae64e620456f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-M\303\251todos find y findIndex en JavaScript Uso y ejemplos pr\303\241cticos.vtt" @@ -0,0 +1,311 @@ +WEBVTT + +00:00.000 --> 00:03.400 +En esta clase vamos a estar hablando de +dos métodos + +00:03.400 --> 00:05.300 +que no modifican nuestro +array, + +00:05.300 --> 00:07.400 +pero nos ayuda a encontrar +elementos + +00:07.400 --> 00:09.400 +y también índices en un +array. + +00:09.400 --> 00:12.200 +Ellos son find y +findIndex. + +00:12.200 --> 00:15.100 +El primero de ellos justamente es +find + +00:15.100 --> 00:17.800 +y nos devuelve el primer +elemento + +00:17.800 --> 00:19.900 +que cumpla con una +condición + +00:19.900 --> 00:22.400 +que le mandemos justamente en una función. + +00:22.400 --> 00:23.900 +Entonces, en este +caso, + +00:23.900 --> 00:27.000 +si tenemos un array que dice 5, 10, 15 y 20, + +00:27.000 --> 00:30.000 +y queremos el primer elemento que sea +mayor a 10, + +00:30.000 --> 00:32.300 +por ejemplo, nos va a devolver +15. + +00:32.300 --> 00:35.500 +Vamos a revisar cómo sería esto en el código. + +00:35.500 --> 00:37.500 +En este caso, sería lo +siguiente. + +00:37.500 --> 00:39.500 +Vamos a colocar que vamos a +encontrar + +00:39.500 --> 00:44.500 +el primer, first, number, +number, + +00:44.500 --> 00:46.000 +que sea mayor a +10. + +00:46.000 --> 00:50.500 +Entonces, greater than +10. + +00:50.500 --> 00:54.000 +Y este valor necesita, por supuesto, + +00:54.000 --> 00:56.500 +un array que vamos a crear por +acá. + +00:56.500 --> 01:00.000 +Y este array va a llamarse los múltiplos, + +01:00.000 --> 01:04.000 +múltiples of +5. + +01:04.000 --> 01:06.000 +Múltiplos de +5. + +01:06.000 --> 01:11.000 +Y acá vamos a colocar 5, 10, 15 y 20. + +01:11.000 --> 01:13.000 +En este caso, +acá, + +01:13.000 --> 01:16.500 +para encontrar el primer valor que sea +mayor a 10, + +01:16.500 --> 01:18.500 +vamos a tomar nuestro +array, + +01:18.500 --> 01:20.500 +le vamos a decir +find, + +01:20.500 --> 01:24.000 +y dentro de find iría la función con la +condición. + +01:24.000 --> 01:26.000 +En este caso, ¿qué +necesitamos? + +01:26.000 --> 01:30.000 +Que este número, number, sea +qué? + +01:30.000 --> 01:32.500 +Sea mayor a +10. + +01:32.500 --> 01:35.000 +Entonces, vamos a colocar por acá esto, + +01:35.000 --> 01:37.500 +y escribimos un +console.log, + +01:37.500 --> 01:41.000 +tanto de esta variable de +acá, + +01:41.000 --> 01:43.000 +vamos a copiarla, la +pegamos, + +01:43.000 --> 01:46.000 +y también tomo esta variable y la pego. + +01:46.000 --> 01:48.500 +Voy a correr nuestro +programa, + +01:48.500 --> 01:51.000 +voy a colocar +node, + +01:51.000 --> 01:53.500 +luego colocamos +clase, + +01:53.500 --> 01:56.500 +find, +findIndex, + +01:56.500 --> 01:58.000 +y aquí nos +sale. + +01:58.000 --> 01:59.500 +Primero, nuestro +array, + +01:59.500 --> 02:02.500 +es decir, que no ha sido mutado, no ha +sido modificado, + +02:02.500 --> 02:04.500 +y segundo, tenemos, por +supuesto, + +02:04.500 --> 02:07.000 +el resultado de nuestro +find. + +02:07.000 --> 02:11.500 +Seguido, vamos a ver nuestro otro método, + +02:11.500 --> 02:13.500 +que en este caso sería +findIndex. + +02:13.500 --> 02:15.500 +¿Qué va a hacer +findIndex? + +02:15.500 --> 02:17.500 +Va a tomar justamente el +array + +02:17.500 --> 02:22.000 +y nos va a devolver el índice del primer +elemento del array, + +02:22.000 --> 02:24.500 +que también satisfaga esa condición. + +02:24.500 --> 02:27.500 +Entonces, vamos a hacer eso aquí en +nuestro código. + +02:27.500 --> 02:30.000 +Entonces, vamos a colocar findIndex, + +02:30.000 --> 02:32.500 +y vamos a crear otro +array. + +02:32.500 --> 02:34.500 +En este caso es +const, + +02:34.500 --> 02:39.500 +random, voy a colocar un array de números +aleatorios, + +02:39.500 --> 02:42.000 +entonces, +randomNumbers, + +02:42.000 --> 02:44.000 +y aquí voy a crear mi +array, + +02:44.000 --> 02:46.000 +que en este caso sería, por ejemplo, + +02:46.000 --> 02:52.000 +6, 14, 27, 56 y +40, + +02:52.000 --> 02:54.500 +que es lo mismo que tenemos aquí en +nuestro slide. + +02:54.500 --> 02:57.500 +Y ahora, lo que hacemos es colocar const, + +02:57.500 --> 03:00.000 +el índex, ¿de +quién? + +03:00.000 --> 03:02.500 +De ese número que +queremos, + +03:02.500 --> 03:05.500 +y number, esto va a ser igual a +quién? + +03:05.500 --> 03:08.500 +A randomNumber, +punto, + +03:08.500 --> 03:12.000 +findIndex, +findIndex. + +03:12.000 --> 03:14.500 +¿De quién? De algún +número. + +03:14.500 --> 03:18.000 +Vamos a colocar, por ejemplo, number, +que sea mayor, + +03:18.000 --> 03:23.000 +en este caso, number mayor a 50, por ejemplo. + +03:23.000 --> 03:27.000 +Entonces, vamos a colocar de nuevo los dos +console.log, + +03:27.000 --> 03:29.500 +voy a copiarme esos que tenemos por acá, + +03:29.500 --> 03:33.500 +randomNumber y el +indexNumber. + +03:33.500 --> 03:36.500 +Vamos a correr de nuevo nuestro programa, + +03:36.500 --> 03:39.500 +y aquí tenemos nuestro array original, + +03:39.500 --> 03:42.500 +y adicional, tenemos el índex del primer +elemento + +03:42.500 --> 03:44.500 +que cumple con esta +condición, + +03:44.500 --> 03:46.500 +el primer elemento que es, por supuesto, + +03:46.500 --> 03:48.500 +mayor a 50 de +56, + +03:48.500 --> 04:12.500 +y vemos que su índex es 0, 1, 2 y 3. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..2245699ca50eb7c067d46c53f090b4ee31bc40f4 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-Resumen.html" @@ -0,0 +1,123 @@ + + + + + + + Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos + + + +
+
+

Resumen

¿Qué son los métodos find y findIndex en JavaScript?

+

En el fascinante mundo de la programación en JavaScript, existen herramientas que nos permiten trabajar de manera eficiente con los arrays: los métodos find y findIndex. Estos métodos no modifican el array original, sino que nos ayudan a encontrar elementos específicos y sus índices, basándonos en una condición determinada. ¿Te gustaría descubrir cómo funcionan y cómo pueden mejorar tu código? ¡Acompáñanos!

+

¿Cómo funciona el método find?

+

El método find de JavaScript nos devuelve el primer elemento de un array que cumple con una condición especificada en una función de prueba. Vamos a ver un ejemplo práctico para entenderlo mejor. Supongamos que tenemos un array de números y queremos encontrar el primer número mayor a 10:

+
const multiplosDeCinco = [5, 10, 15, 20];
+const primerNumeroMayorADiez = multiplosDeCinco.find(number => number > 10);
+
+console.log(multiplosDeCinco); // Imprime: [5, 10, 15, 20]
+console.log(primerNumeroMayorADiez); // Imprime: 15
+
+

En este ejemplo, find evalúa cada elemento del array multiplosDeCinco y devuelve el primer número que sea mayor a 10, que es 15. El array original no sufre ninguna modificación.

+

¿Cuál es la diferencia entre find y findIndex?

+

Mientras que find nos proporciona el elemento que satisface la condición, findIndex nos devuelve el índice (la posición dentro del array) del primer elemento que cumple con la condición especificada. Exploremos un ejemplo para clarificar esta diferencia:

+
const numerosAleatorios = [6, 14, 27, 56, 40];
+const indiceNumeroMayorACincuenta = numerosAleatorios.findIndex(number => number > 50);
+
+console.log(numerosAleatorios); // Imprime: [6, 14, 27, 56, 40]
+console.log(indiceNumeroMayorACincuenta); // Imprime: 3
+
+

En este caso, findIndex busca el primer número mayor a 50 en el array numerosAleatorios y devuelve su índice, que en este caso es 3, correspondiente al número 56. Al igual que con find, el array original se mantiene inalterado.

+

Recomendaciones para utilizar find y findIndex

+

Cuando trabajes con grandes volúmenes de datos y necesites realizar búsquedas específicas, estos métodos se convierten en herramientas valiosas. Te recomendamos:

+
    +
  • Utilizar find cuando necesites el elemento en sí.
  • +
  • Optar por findIndex cuando solo necesites la posición del elemento.
  • +
  • Asegúrate de que entiendes completamente la lógica detrás de tu función de prueba para evitar resultados inesperados.
  • +
+

Conclusiones

+

Ya sea que estés desarrollando aplicaciones personales o profesionales, dominar estos métodos te permitirá hacer que tu código sea más claro y funcional. ¡Anímate a experimentar con find y findIndex en tus propios proyectos y descubre la diferencia que pueden hacer en tus desarrollos!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-clase-find-findindex_ec26c6f8-de53-4d67-8a48-801ff513a78b.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-clase-find-findindex_ec26c6f8-de53-4d67-8a48-801ff513a78b.js" new file mode 100644 index 0000000000000000000000000000000000000000..79de00dc48b5d1591b1662e8ce6149c53622432d --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/06-clase-find-findindex_ec26c6f8-de53-4d67-8a48-801ff513a78b.js" @@ -0,0 +1,51 @@ +// Methods that iterate over an array. +// Methods that DO NOT modify the original array (Immutability). + +// find() + +const multipleOf5 = [5, 10, 15, 20] +const firstNumberGreaterThan10 = multipleOf5.find(number => number > 10) + +console.log(multipleOf5) +console.log(firstNumberGreaterThan10) + +// findIndex() + +const randomNumber = [6, 14, 27, 56, 40] +const indexNumber = randomNumber.findIndex(number => number > 50) + +console.log(randomNumber) +console.log(indexNumber) + +// Exercise: Raffle Winner Verification Program + +const winningParticipants = [ + { id: 1, name: 'Jennifer', ticketNumber: 001 }, + { id: 8, name: 'Michael', ticketNumber: 008 }, + { id: 15, name: 'Emily', ticketNumber: 015 }, + { id: 47, name: 'Charlie', ticketNumber: 047 } +] + +function findWinnerByName (name) { + const winner = winningParticipants.find(participants => participants.name === name) + return winner || 'No winner found with that name.' +} + +function findIndexWinnerByTicket (ticketNumber) { + const index = winningParticipants.findIndex(participants => participants.ticketNumber === ticketNumber) + return index !== -1 ? index : 'No winner found with that ticket number.' +} + +function displayWinnerInformation (winner) { + if (winner !== undefined && winner != null && winner !== 'No winner found with that name.') { + console.log('Winner information: ', winner) + } else { + console.log('No winner found.') + } +} + +const winnerByName = findWinnerByName('Emily') +const indexWinnerByTicket = findIndexWinnerByTicket(008) + +displayWinnerInformation(winnerByName) +console.log('Index of Winner by Ticket Number: ', indexWinnerByTicket) \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-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/07-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/07-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..76ad037c6b67bcef6a70f6c12d75179416f5c219 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Resumen.html" @@ -0,0 +1,132 @@ + + + + + + + Uso del método slice para extraer porciones de un array en JavaScript + + + +
+
+

Resumen

¿Cómo funciona el método slice en arreglos?

+

El método slice en JavaScript es una herramienta poderosa al trabajar con arreglos. Permite extraer una porción de un arreglo sin modificar el arreglo original, lo cual es esencial cuando necesitas manipular o analizar subgrupos de datos sin perder la información completa. En este artículo, exploraremos cómo utilizar slice con ejemplos prácticos que te ayudarán a comprender su utilidad y versatilidad.

+

¿Cómo se utiliza slice con un solo parámetro?

+

Slice puede recibir uno o dos parámetros, y cada uno tiene un propósito específico. Cuando utilizas un solo parámetro, este indica el índice desde donde deseas comenzar a extraer los elementos del arreglo.

+

Ejemplo práctico

+

Imagínate que tienes un arreglo de diferentes animales:

+
let animales = ["hormiga", "bisonte", "camello", "pato", "elefante"];
+
+

Si deseas extraer los elementos desde el índice 2 (es decir, desde "camello" en adelante), usarías slice de la siguiente manera:

+
let resultado = animales.slice(2);
+console.log(resultado); // ["camello", "pato", "elefante"]
+
+

Esto devuelve un nuevo arreglo que comienza desde el índice indicado y continúa hasta el final del arreglo.

+

¿Cómo se utiliza slice con dos parámetros?

+

Cuando slice se utiliza con dos parámetros, el primer parámetro indica el inicio y el segundo el final de la porción que deseas extraer. Es importante tener en cuenta que el índice final no se incluye en el resultado.

+

Ejemplo ilustrativo

+

Siguiendo con el mismo arreglo de animales:

+
let resultado = animales.slice(1, 4);
+console.log(resultado); // ["bisonte", "camello", "pato"]
+
+

En este caso, estás seleccionando desde el índice 1 hasta antes del índice 4, lo que incluye "bisonte", "camello" y "pato".

+

¿Cómo utilizar índices negativos en slice?

+

Una de las características más interesantes de slice es la posibilidad de utilizar índices negativos. Estos cuentan desde el final del arreglo, permitiéndote seleccionar fácilmente los últimos elementos.

+

Ejemplo de índices negativos

+

Si deseas seleccionar los últimos dos elementos del arreglo:

+
let resultado = animales.slice(-2);
+console.log(resultado); // ["pato", "elefante"]
+
+

Aquí, -2 comienza el conteo desde el penúltimo elemento hacia el final del arreglo.

+

¿Qué se devuelve al usar slice sin parámetros?

+

Al llamar a slice sin parámetros, obtienes una copia del arreglo original. Esto puede ser útil si necesitas trabajar con una réplica del arreglo para asegurar que el original permanezca sin cambios.

+
let copia = animales.slice();
+console.log(copia); // ["hormiga", "bisonte", "camello", "pato", "elefante"]
+
+

Es buena práctica usar slice para crear una copia cuando quieras realizar operaciones que modifiquen el arreglo sin alterar el original.

+

¿Cuál es la importancia de la inmutabilidad con slice?

+

Slice se destaca por su inmutabilidad: no modifica el arreglo original al crear subarreglos. Esta característica es crucial en programación funcional y puede prevenir errores, ya que te permite trabajar con datos en escenarios de prueba y error sin preocuparte por cambios inadvertidos en tus datos originales.

+

El método slice es esencial en el desarrollo de software donde los datos necesitan ser manejados con precisión y cuidado. A medida que avanzas en tu aprendizaje, integrar slice en tu conjunto de herramientas te permitirá manipular arreglos de manera más efectiva y robusta. ¡Continúa explorando y aprendiendo!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..6d10949971ccd281d7ae85af741955db8b082ba5 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d886bbe5c404351984dbb168c48f0bf0b800a84dcbf87b8a8b415edf292cb12e +size 29554197 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..4544bbad0ba6a7401ffd451921c4bcf18235b632 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-Uso del m\303\251todo slice para extraer porciones de un array en JavaScript.vtt" @@ -0,0 +1,362 @@ +WEBVTT + +00:00.000 --> 00:04.280 +¿Qué pasaría si nosotros quisiéramos tomar +solo la porción + +00:04.280 --> 00:07.040 +o una pequeña parte de un +array? + +00:07.040 --> 00:10.800 +Pues bien, para ello podemos utilizar el +método slice, + +00:10.800 --> 00:13.920 +que nos va a permitir justamente tomar una +porción, + +00:13.920 --> 00:17.360 +así como estamos viendo en este ejemplo de +acá, de un array. + +00:17.360 --> 00:19.920 +Entonces tenemos un array que en este +caso + +00:19.920 --> 00:22.080 +tiene como diferentes tipos de juegos, + +00:22.080 --> 00:25.440 +y si nosotros solamente quisiéramos, +por ejemplo, + +00:25.440 --> 00:28.360 +desde acá hasta +acá, + +00:28.360 --> 00:31.800 +pues lo podemos hacer justamente con slice. + +00:31.800 --> 00:34.360 +¿Cómo lo vamos a utilizar en el +código? + +00:34.360 --> 00:37.040 +Vamos a colocar, por ejemplo, slice, + +00:37.040 --> 00:39.880 +y seguido lo que vamos a colocar es un array, + +00:39.880 --> 00:43.080 +vamos a colocar un array, por ejemplo, +de animales, + +00:43.080 --> 00:45.440 +y este va a contener, por +ejemplo, + +00:45.440 --> 00:49.960 +vamos a colocar hormiga, vamos a colocar +pison, + +00:49.960 --> 00:53.840 +vamos a colocar diferentes tipos de animales, +camel, + +00:53.840 --> 01:00.080 +vamos a colocar un pato y coloquemos un +elefante. + +01:00.080 --> 01:01.360 +Elefante. + +01:01.360 --> 01:02.400 +Listo. + +01:02.400 --> 01:05.920 +Teniendo esos animales, ¿qué pasaría si +empezamos nosotros + +01:05.920 --> 01:09.880 +a querer solamente fracciones de esos +animales, no todos? + +01:09.880 --> 01:13.600 +Para ello, entonces, utilizamos nuestro +console.log, + +01:13.600 --> 01:18.160 +vamos a empezar a revisar cómo funciona +este método de slice. + +01:18.160 --> 01:23.360 +Entonces colocamos.slice y debemos pasarle 1, + +01:23.360 --> 01:25.720 +0, 1 o 2 +parámetros. + +01:25.720 --> 01:28.760 +Revisemos cómo sería con un solo parámetro. + +01:28.760 --> 01:32.600 +En este caso, si le pasamos el número 2, + +01:32.600 --> 01:36.880 +él va a tomarlo como si fuera el índice de +el array + +01:36.880 --> 01:40.360 +desde el valor que nosotros queremos tomar. + +01:40.360 --> 01:43.600 +Por ejemplo, si decimos 2, en este caso lo +que estamos + +01:43.600 --> 01:48.000 +diciendo es que queremos solamente desde +la posición 2, + +01:48.000 --> 01:51.280 +es decir, desde el camello hasta el elefante. + +01:51.280 --> 01:52.200 +Vamos a +revisarlo. + +01:52.200 --> 01:54.480 +Corramos nuestro código, +note. + +01:57.920 --> 02:02.040 +Y aquí vemos justamente esa porción o ese +fragmento del + +02:02.040 --> 02:05.840 +array desde la posición número +2. + +02:05.840 --> 02:09.640 +Ahora, ¿qué pasaría si quisiéramos decirle +que desde + +02:09.640 --> 02:14.560 +la posición 2 hasta el pato que tenemos +acá? + +02:14.560 --> 02:19.720 +Le decimos 0, 1, 2, 3, pero en este caso +debemos agregarle una + +02:19.720 --> 02:23.200 +posición más, es decir, la posición número 4. + +02:23.200 --> 02:24.120 +¿Por +qué? + +02:24.120 --> 02:28.720 +Porque él no tiene el valor final incluido. + +02:28.720 --> 02:31.440 +Entonces, él lo que hace es decir, ah, mira, + +02:31.440 --> 02:34.520 +¿quieres una porción desde la 2 hasta la +4? + +02:34.520 --> 02:39.120 +Bueno, yo te la voy a dar, pero en mi caso +va a ser 0, 1, + +02:39.120 --> 02:45.080 +2 desde camello hasta el 3, es decir, +hasta 4 menos 1. + +02:45.080 --> 02:48.480 +Vamos a correr nuestro código para revisarlo. + +02:48.480 --> 02:51.360 +Acá tenemos, en efecto, nuestra porción, + +02:51.360 --> 02:55.040 +pero esa porción solamente es de la +posición 2 y de la posición + +02:55.040 --> 02:56.360 +número +3. + +02:56.360 --> 02:59.640 +Revisémoslo con otro valor que tengamos. + +02:59.640 --> 03:02.680 +Supongamos que ahora sí queremos incluir +el elefante. + +03:02.680 --> 03:06.240 +Entonces, en este caso, lo que hacemos es +decir, por ejemplo, + +03:06.240 --> 03:10.240 +cambiamos este índice por el 1, que +empieza desde Bison. + +03:10.240 --> 03:13.000 +Y aquí le colocamos la posición número 5, + +03:13.000 --> 03:17.080 +que en este caso sería 1, 2, 3, 4, 5. + +03:17.080 --> 03:19.800 +Y hoy podemos poner, por ejemplo, 6. + +03:19.800 --> 03:21.160 +Vamos a +guardar. + +03:21.160 --> 03:22.720 +Corremos nuestro +código. + +03:22.720 --> 03:26.360 +Y en este caso nos sale Bison, Camel, +Duck y Elefante. + +03:26.360 --> 03:30.960 +Entonces, ahí sí ya nos incluye justamente +este elefante. + +03:30.960 --> 03:34.240 +¿Qué pasa si nosotros quisiéramos ahora, + +03:34.240 --> 03:36.520 +como empezar a contar de atrás para +adelante? + +03:36.520 --> 03:39.800 +Supongamos que tenemos un montón de +valores y solamente + +03:39.800 --> 03:41.400 +queremos los dos +últimos. + +03:41.400 --> 03:44.400 +¿Cómo nos vamos a poner a contar un montón +de posiciones? + +03:44.400 --> 03:49.240 +Bueno, para ese caso, lo que hace Slice es +permitirnos también + +03:49.240 --> 03:51.280 +utilizar los números +negativos. + +03:51.280 --> 03:54.840 +Entonces, podemos utilizar, por ejemplo, +el menos 2. + +03:54.840 --> 03:58.640 +Y él lo que hace es contar Elefante como +si fuera menos 1. + +03:58.640 --> 04:01.080 +Es decir, se está empezando a devolver. + +04:01.080 --> 04:05.440 +Y toma el Pato como si fuera la posición +número menos 2. + +04:05.440 --> 04:10.400 +Y nos da esta última fracción de este array. + +04:10.400 --> 04:12.560 +Si nosotros quisiéramos, por ejemplo, + +04:12.560 --> 04:17.000 +empezar por un valor y terminar por algún +número del final, + +04:17.000 --> 04:18.200 +también se +puede. + +04:18.200 --> 04:21.840 +Es decir, podemos decirle que empiece desde 0, +1, 2, + +04:21.840 --> 04:24.240 +pero que termine en la posición menos 1. + +04:24.240 --> 04:28.040 +Entonces, él también nos hace caso en este +sentido y nos da + +04:28.040 --> 04:32.600 +este fragmento del array que es Camel y es +Duck, que es este. + +04:32.600 --> 04:36.080 +Y este recordemos que el final no lo cuenta. + +04:36.080 --> 04:42.120 +Y ya por último, también podemos colocar +un console.log de + +04:42.120 --> 04:44.600 +lo que haría Slice +solito. + +04:44.600 --> 04:48.080 +Es decir, sin ningún tipo de parámetro. + +04:48.080 --> 04:50.280 +Entonces, vamos a correr nuestro código. + +04:50.280 --> 04:53.360 +Y aquí vemos que él no haría absolutamente +nada. + +04:53.360 --> 04:57.320 +Nos está devolviendo nuestro array original. + +04:57.320 --> 05:01.640 +Y en este caso, también vemos que este +método como tal no nos + +05:01.640 --> 05:03.920 +modifica este array +original. + +05:03.920 --> 05:07.040 +Y por eso, pudimos también colocar varios +console.log + +05:07.040 --> 05:10.040 +utilizando este método, precisamente por +la + +05:10.040 --> 05:11.040 +inmutabilidad. + +05:11.040 --> 05:13.920 +Entonces, recordemos que podemos utilizar 0, + +05:13.920 --> 05:16.880 +que en este caso es para que nos devuelva +todo el array. + +05:16.880 --> 05:21.160 +Y también podemos utilizar un solo +parámetro y dos + +05:21.160 --> 05:25.120 +parámetros, que también pueden ser desde +comenzar el array, + +05:25.120 --> 05:42.160 +como también desde el final de nuestro array. + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-clase-slice_534b3124-8beb-4455-8f09-12c56b9174b6.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-clase-slice_534b3124-8beb-4455-8f09-12c56b9174b6.js" new file mode 100644 index 0000000000000000000000000000000000000000..113bfec1dbeb817bc9c39e235d501f99890082a5 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/07-clase-slice_534b3124-8beb-4455-8f09-12c56b9174b6.js" @@ -0,0 +1,10 @@ +// slice() + +const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'] + +console.log(animals.slice(2)) +console.log(animals.slice(2, 4)) +console.log(animals.slice(1, 6)) +console.log(animals.slice(-2)) +console.log(animals.slice(2, -1)) +console.log(animals.slice()) \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-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/08-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/08-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..caddc0a8d58ca37428b683fb45cae1e610723cef --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Resumen.html" @@ -0,0 +1,142 @@ + + + + + + + Uso del Spread Operator en JavaScript: Copia, Combinación y Más + + + +
+
+

Resumen

¿Qué es el Spread Operator y cómo se utiliza?

+

El Spread Operator es una herramienta poderosa en JavaScript que te permite manipular arreglos y objetos de manera flexible y eficiente. Su representación se hace mediante tres puntos (...), y es utilizado en diversas acciones, como copiar arreglos, combinarlos, añadir elementos, o incluso, pasar parámetros a funciones. Su versatilidad lo ha convertido en un componente esencial en la programación moderna.

+

¿Cómo copiar un arreglo sin modificar el original?

+

Copiar un arreglo es una de las aplicaciones más básicas del Spread Operator. Supongamos que tienes un arreglo original del cual deseas crear una copia para no afectar el original al realizar modificaciones. El código para efectuar esta operación es sencillo:

+
const originalArray = [1, 2, 3, 4, 5];
+const copiedArray = [...originalArray];
+
+console.log('Original:', originalArray);
+console.log('Copiado:', copiedArray);
+
+

Este método es útil para preservar datos originales que podrían resultar afectados por cambios involuntarios en tu código.

+

¿Cómo combinar arreglos con Spread Operator?

+

El proceso de combinar arreglos es otro uso común del Spread Operator. Es posible fusionar múltiples arreglos en uno solo fácilmente:

+
const array1 = [1, 2, 3];
+const array2 = [4, 5, 6];
+const combinedArray = [...array1, ...array2];
+
+console.log('Array combinado:', combinedArray);
+
+

Al utilizar el Spread Operator, es sencillo extender el contenido de varios arreglos para crear estructuras de datos compuestas, evitando operaciones más complejas y menos eficientes.

+

¿Cómo crear un nuevo arreglo con elementos adicionales?

+

El Spread Operator también es práctico para crear nuevos arreglos que incluyan elementos adicionales sin modificar los originales. Este enfoque es útil cuando necesitas construir un nuevo conjunto de datos con una base preestablecida:

+
const baseArray = [1, 2, 3];
+const extendedArray = [...baseArray, 4, 5, 6];
+
+console.log('Array extendido:', extendedArray);
+
+

Esta técnica permite agregar elementos de manera directa y sencilla, evitando alterar los datos originales.

+

¿Cómo pasar elementos de un arreglo a una función?

+

Al trabajar con funciones que requieren múltiples argumentos, el Spread Operator facilita el paso de los elementos de un arreglo como parámetros:

+
function sum(a, b, c) {
+  return a + b + c;
+}
+
+const numbers = [1, 2, 3];
+const result = sum(...numbers);
+
+console.log('Resultado de la suma:', result);
+
+

Este método reduce la complejidad al manejar funciones con varios parámetros, permitiendo pasar directamente arreglos que contienen todos los valores necesarios.

+

El Spread Operator es además compatible con objetos y puede ser empleado para realizar operaciones similares a las mencionadas con arreglos. Este operador es invaluable para cualquier desarrollador web que busque escribir código limpio y eficiente.

+

Recomendaciones para dominar el Spread Operator

+
    +
  • Practica con ejemplos reales: Mientras más practiques, mejor comprenderás su flexibilidad y aplicaciones.
  • +
  • Explora combinaciones: Experimenta combinando arreglos y objetos para entender cómo se despliega su contenido.
  • +
  • Consulta la documentación: Mantente actualizado con la documentación oficial de JavaScript para descubrir nuevas funcionalidades y características.
  • +
+

Continuar explorando y aprendiendo nuevas técnicas con el Spread Operator y otras herramientas en JavaScript enriquecerá tu desarrollo profesional y te permitirá crear soluciones más robustas e innovadoras. ¡No dejes de practicar y mejorar tus habilidades en programación!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.mp4" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..c2959cca72e67eed4b3c7da0f31dbd4f21360f07 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:485fe2b55cd4965cf823a150bab6e333fe956f51fd62017376970d851e8beb65 +size 40113955 diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.vtt" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..42031294e729acfed103a73bc6e88ca1338b95dd --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinaci\303\263n y M\303\241s.vtt" @@ -0,0 +1,462 @@ +WEBVTT + +00:00.000 --> 00:03.680 +En esta clase vamos a estar hablando sobre +Spread Operator + +00:03.680 --> 00:07.760 +y también todas las funcionalidades que +podemos hacer con este operador. + +00:07.760 --> 00:11.840 +El primero de ellos justamente es la copia +de un array, + +00:11.840 --> 00:14.120 +así como estamos viendo aquí en el documento. + +00:14.120 --> 00:16.560 +Podemos tener, por ejemplo, un +array + +00:16.560 --> 00:21.120 +y seguido, si nosotros queremos obtener +una copia de este array, + +00:21.120 --> 00:23.960 +lo podemos hacer con Spread Operator. + +00:23.960 --> 00:26.440 +Entonces, escribamos acá, por ejemplo, + +00:26.440 --> 00:29.320 +copying an +array. + +00:29.320 --> 00:32.840 +Aquí lo que hacemos es decir, vamos a +tener un array, + +00:32.840 --> 00:36.360 +en este caso vamos a decir que es el array +original, + +00:36.360 --> 00:38.880 +original +array, + +00:38.880 --> 00:42.040 +y aquí vamos a colocarle una serie de números, + +00:42.040 --> 00:45.400 +puede ser, por ejemplo, 1, 2, 3, 4 y 5. + +00:45.400 --> 00:49.920 +Y seguido, lo que vamos a hacer es crear +una copia de ese array. + +00:49.920 --> 00:54.000 +Entonces, vamos a decir, el array que fue +copiado, + +00:54.000 --> 00:57.240 +la copia, podemos colocarlo en presente, + +00:57.240 --> 01:01.160 +copying of an +array. + +01:01.160 --> 01:01.660 +Listo. + +01:01.660 --> 01:05.560 +Y aquí nos quedaría como, podríamos +colocar un array, + +01:05.560 --> 01:08.800 +en este caso, que es donde nosotros +queremos almacenar los + +01:08.800 --> 01:12.640 +diferentes valores, y utilizamos tres puntos, + +01:12.640 --> 01:16.600 +que este es nuestro Spread Operator, + +01:16.600 --> 01:20.480 +y seguido le colocamos el valor del array +anterior que + +01:20.480 --> 01:21.800 +colocamos. + +01:21.800 --> 01:25.760 +Vamos a escribir un console.log para +revisar ambos. + +01:25.760 --> 01:30.360 +Vamos a revisar cuál es el original y cuál +es la copia. + +01:30.360 --> 01:32.800 +Vamos a guardar nuestro código y a correrlo. + +01:36.240 --> 01:38.360 +Y aquí ya estamos viendo que tenemos, + +01:38.360 --> 01:43.560 +uno, el array original, 1, 2, 3, 4, 5, +y seguido, la copia. + +01:43.560 --> 01:47.880 +Estas copias normalmente es para no mutar +ciertos valores, + +01:47.880 --> 01:51.080 +y por eso normalmente a veces utilizamos +lo que es la copia, + +01:51.080 --> 01:55.240 +y en estos casos también puede ser muy +útil para poder hacer + +01:55.240 --> 01:58.120 +esas copias sin modificar justamente los +valores + +01:58.120 --> 02:01.240 +originales que tenemos en cierto código. + +02:01.240 --> 02:06.440 +Por otro lado, podemos utilizar el Spread +para combinar arrays. + +02:06.440 --> 02:13.600 +Entonces, voy a colocar por acá, número 2, +combining arrays, + +02:13.600 --> 02:15.680 +y vamos a crear dos +arrays. + +02:15.680 --> 02:19.280 +El primero va a ser, por ejemplo, unos +números. + +02:19.280 --> 02:22.160 +Nuevamente vamos a colocar 1, 2, +3, + +02:22.160 --> 02:25.440 +y vamos a colocar otro array, que en este +caso sea, + +02:25.440 --> 02:29.480 +por ejemplo, 4, 5, y +6. + +02:29.480 --> 02:33.040 +En esto lo que vamos a hacer es crear otra +variable que diga + +02:33.040 --> 02:37.400 +combined array, y le vamos a decir lo +siguiente. + +02:37.400 --> 02:40.960 +Creamos nuestro array, seguido utilizamos +nuestro Spread + +02:40.960 --> 02:46.480 +Operator, que sería 1, 2, 3, y copiamos +nuestro array número + +02:46.480 --> 02:46.960 +1. + +02:46.960 --> 02:50.360 +Lo que estamos haciendo es como tomar todo +esto y, pum, + +02:50.360 --> 02:52.320 +desplegarlo +acá. + +02:52.320 --> 02:56.960 +Seguido colocamos una coma, 1, 2, 3, array 2, + +02:56.960 --> 03:01.400 +y después lo que hacemos es colocar console. +log para + +03:01.400 --> 03:04.040 +revisar todas estas cosas que acabamos de +hacer. + +03:04.040 --> 03:07.680 +Entonces, array número 1, array número 2, + +03:07.680 --> 03:10.240 +y la combinación de este +array. + +03:10.240 --> 03:14.440 +Vamos a correr nuevamente nuestro código. + +03:14.440 --> 03:18.200 +Y aquí revisamos que tenemos 1, 2, 3 como +el primer array, + +03:18.200 --> 03:22.200 +el segundo 4, 5, 6, y después tenemos la +combinación de + +03:22.200 --> 03:25.280 +ambos utilizando Spread +Operator. + +03:25.280 --> 03:30.720 +Por otro lado, podríamos crear arrays +teniendo como base otro + +03:30.720 --> 03:33.680 +array y adicionándole diferentes elementos. + +03:33.680 --> 03:36.720 +Por ejemplo, tenemos aquí, crea un array, + +03:36.720 --> 03:39.400 +que en este caso tendríamos unos libros +que son el rojo, + +03:39.400 --> 03:43.520 +el verde, el azul y el naranja, pero +podríamos tomar ese que ya + +03:43.520 --> 03:48.640 +tenemos y adicionarle 1, que en este caso +sería el amarillo. + +03:48.640 --> 03:51.200 +En código esto se vería de la siguiente +manera. + +03:51.200 --> 03:59.680 +Vamos a colocar acá, 3, creating arrays +with additional + +03:59.680 --> 04:01.120 +elements. + +04:01.120 --> 04:02.080 +Listo. + +04:02.080 --> 04:05.080 +Vamos a crear un array, que en este caso +vamos a colocar que + +04:05.080 --> 04:07.080 +es como el array +base. + +04:07.080 --> 04:10.960 +Y este array base va a tener elementos, +por ejemplo, + +04:10.960 --> 04:12.200 +1, 2 y +3. + +04:12.200 --> 04:19.840 +Seguido, vamos a colocar array with +additional elements. + +04:19.840 --> 04:24.000 +Y vamos a decirle, entonces, vamos a abrir +un array, + +04:24.000 --> 04:25.960 +en este caso, las +llaves. + +04:25.960 --> 04:29.560 +Seguido, vamos a colocar el Spread Operator, +1, 2, 3. + +04:29.560 --> 04:35.000 +Le decimos que nos copie este array que +tenemos como base y + +04:35.000 --> 04:38.560 +que adicional nos agregue otros elementos, +por ejemplo, + +04:38.560 --> 04:41.040 +el 4, el 5 y el +6. + +04:41.040 --> 04:47.120 +Vamos a colocar console.log de estas +variables que acabamos + +04:47.120 --> 04:48.000 +de +crear. + +04:48.000 --> 04:51.200 +Vamos a colocar base array y este array +with additional + +04:51.200 --> 04:54.720 +elements y corremos nuestro +código. + +04:54.720 --> 04:59.440 +Acá ya revisamos nuestros dos últimos arrays, +que sería 1, + +04:59.440 --> 05:02.080 +2, 3, como el array +base. + +05:02.080 --> 05:06.720 +Y luego tenemos 1, 2, 3 y otros elementos +que le agregamos + +05:06.720 --> 05:09.440 +justamente a ese array que es +base. + +05:09.440 --> 05:12.480 +Y, por supuesto, nos estamos modificando +nuestro array + +05:12.480 --> 05:13.600 +original. + +05:13.600 --> 05:17.040 +Por otro lado, otra cosa muy interesante +que podemos hacer + +05:17.040 --> 05:22.360 +con Spread Operators es pasarle parámetros +a una función. + +05:22.360 --> 05:27.640 +Por ejemplo, vamos a colocar pass elements +to functions. + +05:27.640 --> 05:32.920 +Si tuviéramos una función que sea de suma +y esta función lo + +05:32.920 --> 05:38.120 +que hace es sumar en return, sumar tres +valores. + +05:38.120 --> 05:42.720 +Vamos a colocarle, por ejemplo, acá a, b y c. + +05:42.720 --> 05:45.160 +Y este return, esta suma como +tal, + +05:45.160 --> 05:49.040 +va a ser la suma de a más b más +c. + +05:49.040 --> 05:51.800 +Pues, lo que podemos hacer es decir, + +05:51.800 --> 05:54.640 +ah, bueno, yo quiero ejecutar esa función, + +05:54.640 --> 05:57.800 +pero no le quiero pasar los valores si +nosotros quisiéramos + +05:57.800 --> 06:00.360 +pasarle los valores normalmente antes de todo. + +06:00.360 --> 06:02.440 +Sería, por ejemplo, 1, 2, +3. + +06:02.440 --> 06:05.160 +Si nosotros quisiéramos cambiar esa forma +de ejecución + +06:05.160 --> 06:08.600 +pasándole un array con toda la cantidad de +elementos que + +06:08.600 --> 06:12.440 +queremos que se sumen acá, pues, lo +podemos hacer diciendo + +06:12.440 --> 06:17.840 +const num, o numbers, va a ser igual a +quién? + +06:17.840 --> 06:20.360 +A 1, 2 y +3. + +06:20.360 --> 06:24.320 +¿Cómo se lo pasamos a esta suma utilizando +Spread Operators? + +06:24.320 --> 06:27.400 +Bueno, vamos a colocarle acá, vamos a +borrar los parámetros, + +06:27.400 --> 06:31.720 +le colocamos los tres puntos y seguido +colocamos nuestro array + +06:31.720 --> 06:35.000 +con los tres valores que ya tenemos en el +array. + +06:35.000 --> 06:40.880 +Aquí vamos a colocar const result y vamos +a colocar un + +06:40.880 --> 06:42.840 +console.log de +quién? + +06:42.840 --> 06:46.120 +De este resultado, para ver qué sucedió acá. + +06:46.120 --> 06:50.280 +Entonces, corremos nuevamente nuestro +código y aquí ya + +06:50.280 --> 06:53.800 +tenemos como resultado el 6, que es la +suma de 1, 2 y 3. + +06:53.800 --> 06:57.080 +Y aquí ya vemos que podemos utilizar +también esta Spread + +06:57.080 --> 06:58.560 +Operator, ¿para +qué? + +06:58.560 --> 07:02.760 +Para pasar valores que tengamos en un +array justamente como + +07:02.760 --> 07:05.800 +parámetros de una función, como en este caso. + +07:05.800 --> 07:09.280 +Cuéntame, ¿cuál fue tu forma favorita de +utilizar los Spread + +07:09.280 --> 07:34.240 +Operators en los +comentarios? + diff --git "a/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-clase-spread-operator_13d4bad1-6c65-47e2-bd80-89478793784f.js" "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-clase-spread-operator_13d4bad1-6c65-47e2-bd80-89478793784f.js" new file mode 100644 index 0000000000000000000000000000000000000000..bd1205aa6740d5ea7989a9d081e2c94c0da31b9f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/04-Manipulaci\303\263n de Arrays/08-clase-spread-operator_13d4bad1-6c65-47e2-bd80-89478793784f.js" @@ -0,0 +1,36 @@ +// 1. Copying an Array + +const originalArray = [1, 2, 3, 4, 5] +const copyOfAnArray = [...originalArray] + +console.log(originalArray) +console.log(copyOfAnArray) + +// 2. Combining Arrrays + +const array1 = [1, 2, 3] +const array2 = [4, 5, 6] +const combinedArray = [...array1, ...array2] + +console.log(array1) +console.log(array2) +console.log(combinedArray) + +// 3. Creating Arrays with Additional Elements + +const baseArray = [1, 2, 3] +const arrayWithAdditionalElements = [...baseArray, 4, 5, 6] + +console.log(baseArray) +console.log(arrayWithAdditionalElements) + +// 4. Pass elements to functions + +function sum (a, b, c) { + return a + b + c +} + +const numbers = [1, 2, 3] +const result = sum(...numbers) + +console.log(result) \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..2e5815ae74d9cad897514ec48bfa108e228e8ce3 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a6401628e109ea2e6434ddf6319f270d91ee6b8cf71491fd638b05d0abf9a86a +size 30413424 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..ede84cbf7193d4440ca85dc3e95098ee8a934e12 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Programaci\303\263n Orientada a Objetos en JavaScript Conceptos y Pr\303\241ctica.vtt" @@ -0,0 +1,529 @@ +WEBVTT + +00:00.000 --> 00:02.400 +Comencemos hablando de +objetos. + +00:02.400 --> 00:06.000 +Y este es un término que posiblemente has +escuchado muchísimo. + +00:06.000 --> 00:09.400 +Has escuchado de JSON, has escuchado de +objetos, + +00:09.400 --> 00:12.100 +has escuchado de programación orientada a +objetos. + +00:12.100 --> 00:15.200 +Y eso es la base de lo que va a hacer esta +clase. + +00:16.200 --> 00:17.600 +¿Qué son los +objetos? + +00:17.600 --> 00:20.600 +¿Cómo podemos traducirlos? ¿Cómo los vamos +a utilizar? + +00:20.600 --> 00:24.200 +¿Cómo puedo empezar a generar cosas con +objetos? + +00:24.200 --> 00:26.000 +Vamos prácticamente a nuestro código. + +00:26.000 --> 00:30.200 +Aquí voy a abrir algunos +comentarios + +00:31.600 --> 00:33.000 +para empezar a +escribir. + +00:33.000 --> 00:38.800 +Pero los objetos prácticamente podemos +traducirlos como una estructura, + +00:40.400 --> 00:42.000 +como una estructura de +datos. + +00:42.000 --> 00:43.200 +Prácticamente es +esto. + +00:43.200 --> 00:47.200 +Un objeto a grandes rasgos es simplemente +una estructura de datos + +00:47.200 --> 00:50.400 +que me ayuda a guardar valores de una +forma particular, + +00:50.400 --> 00:53.800 +que se le llama Key +Value. + +00:53.800 --> 00:58.600 +Esto quiere decir que va a haber algo que +se le llama propiedad + +00:58.600 --> 01:01.200 +y el valor de la +propiedad. + +01:01.200 --> 01:03.600 +Y esto es la forma que, o más +bien, + +01:03.600 --> 01:06.200 +es lo que nos va a ayudar a generar la +estructura + +01:06.200 --> 01:09.600 +de lo que conocemos como un +objeto. + +01:09.600 --> 01:12.400 +¿Cuál es esa estructura ya mucho más +generalizada? + +01:12.400 --> 01:14.200 +Si tenemos aquí nuestro +objeto, + +01:14.200 --> 01:16.800 +tienen que llevar un nombre al objeto, + +01:16.800 --> 01:18.400 +abrimos +corchetes, + +01:18.400 --> 01:21.200 +y adentro de los corchetes vamos a +poner + +01:21.200 --> 01:26.200 +lo que se llaman las propiedades y el +valor de las propiedades. + +01:26.200 --> 01:29.800 +Cada propiedad tiene que llevar un valor. + +01:29.800 --> 01:33.600 +Después, si queremos agregar otro tipo de +propiedad, + +01:33.600 --> 01:37.400 +agregamos otra propiedad igual a otro tipo +de valor, + +01:37.400 --> 01:41.000 +que en este caso, el igual, si vemos ya la +estructura real, + +01:41.000 --> 01:44.400 +es la propiedad, dos puntos y el valor. + +01:44.400 --> 01:48.400 +La propiedad, dos puntos y el valor. + +01:48.400 --> 01:51.600 +Si voy a agregar otra propiedad, agrego la +coma + +01:51.600 --> 01:54.200 +y vuelvo a repetir lo +mismo. + +01:54.200 --> 01:57.400 +Propiedad, dos puntos y el +valor. + +01:57.400 --> 02:00.800 +Algo importante a destacar de la parte de +los objetos + +02:00.800 --> 02:02.400 +es que, como te acabo de +decir, + +02:02.400 --> 02:04.000 +esto es una estructura de +datos + +02:04.000 --> 02:06.400 +que me ayuda a guardar +información. + +02:06.400 --> 02:08.400 +Posiblemente, a tu edad no te queda claro de, + +02:08.400 --> 02:11.600 +ok, no entiendo cómo querría yo guardar +propiedad y valor. + +02:11.600 --> 02:13.000 +Aquí tengo una +pregunta. + +02:13.000 --> 02:14.800 +Si yo te pido que, por +favor, + +02:14.800 --> 02:19.800 +me generes una persona o me generes un +carro en JavaScript, + +02:19.800 --> 02:22.800 +¿cuál sería tu forma de construir una +persona + +02:22.800 --> 02:25.400 +o construir un carro en +JavaScript? + +02:25.400 --> 02:29.800 +Y ahí es donde empezamos a hablar de +abstraer las cosas, + +02:29.800 --> 02:32.400 +abstraer la realidad y llevarlas a +programación. + +02:32.400 --> 02:35.600 +Y ahí viene programación orientada a objetos. + +02:35.600 --> 02:38.800 +Los objetos son la base de lo que nos va a +ayudar + +02:38.800 --> 02:41.200 +a generar un paradigma de +programación + +02:41.200 --> 02:44.200 +que es abstraer con los +objetos. + +02:44.200 --> 02:47.200 +Abstraer cosas u objetos de la +realidad + +02:47.200 --> 02:49.200 +para poderlas llevar a programación. + +02:49.200 --> 02:51.800 +Entonces, vamos con esto a un +ejemplo + +02:51.800 --> 02:55.200 +para que puedas ver entonces cómo podremos +construir + +02:55.200 --> 03:00.000 +o podemos llevar a una persona a la +programación con un objeto. + +03:00.000 --> 03:03.000 +Lo primero es voy a construir una +constante + +03:03.000 --> 03:05.200 +que se va a llamar +persona. + +03:07.200 --> 03:09.400 +Este va a ser nuestro primer objeto. + +03:09.400 --> 03:13.200 +Después, te comenté que tenemos que tener +propiedades y valores. + +03:13.200 --> 03:15.200 +Entonces, ¿qué forma a una +persona? + +03:15.200 --> 03:18.200 +Si tuviéramos que escribir cuáles son las +propiedades de una persona, + +03:18.200 --> 03:20.800 +¿qué es lo que me dirías? Puedes colocarlo +en comentarios. + +03:20.800 --> 03:24.200 +Pero de inicio te puedo decir una persona +lleva un nombre. + +03:24.200 --> 03:25.200 +Perfecto. + +03:25.200 --> 03:28.200 +Y en este caso, este nombre se va a llamar +John. + +03:29.200 --> 03:31.200 +¿Qué tipo de propiedad +lleva? + +03:31.200 --> 03:33.200 +Tiene, por ejemplo, +edad. + +03:33.200 --> 03:34.200 +OK. + +03:34.200 --> 03:37.200 +Y esta edad es 30, por +ejemplo. + +03:37.200 --> 03:40.200 +Aquí te das cuenta, estamos respetando lo +que es el tipo de valor. + +03:40.200 --> 03:44.200 +Edad es un número, así que simplemente lo +colocamos como un número. + +03:44.200 --> 03:47.200 +John es un string, así que lo colocamos en +comillas + +03:47.200 --> 03:50.200 +para que se pueda poner como un string. + +03:50.200 --> 03:52.200 +¿Qué otro tipo de valor +llevaría? + +03:52.200 --> 03:54.200 +Por ejemplo, ¿qué tipo de +propiedad? + +03:54.200 --> 03:57.200 +Una persona puede tener, a lo mejor, +alguna dirección. + +03:57.200 --> 03:59.200 +Y podemos +agregarlo. + +03:59.200 --> 04:04.200 +Y esta dirección está compuesta por otro +tipo de propiedades y valores. + +04:04.200 --> 04:08.200 +Así que aquí vamos a generar otro pequeño +objeto + +04:08.200 --> 04:10.200 +que lleve otro tipo de +propiedades. + +04:10.200 --> 04:12.200 +Que sería, por ejemplo, +calle. + +04:12.200 --> 04:13.200 +OK. + +04:13.200 --> 04:23.200 +Y la calle podemos decir que es Avenida +Insurgentes número 187. + +04:23.200 --> 04:26.200 +Y que es de +ciudad. + +04:26.200 --> 04:29.200 +Y es ciudad de +México. + +04:30.200 --> 04:31.200 +Perfecto. + +04:31.200 --> 04:35.200 +Ahora, dentro de la estructura de los objetos, + +04:35.200 --> 04:38.200 +los objetos llevan propiedad y valor, + +04:38.200 --> 04:42.200 +pero también hay algo que se le llama métodos. + +04:44.200 --> 04:46.200 +¿Y qué serían los +métodos? + +04:46.200 --> 04:50.200 +Los métodos son funciones que están +adentro de objetos + +04:50.200 --> 04:52.200 +que nos ayudan a generar la interacción. + +04:52.200 --> 04:54.200 +Las propiedades nos dan +valor, + +04:54.200 --> 04:58.200 +los objetos nos ayudan a generar interacción. + +04:58.200 --> 05:01.200 +Entonces, vamos a ver cómo construiríamos +un método + +05:01.200 --> 05:02.200 +adentro de un +objeto. + +05:02.200 --> 05:05.200 +Por ejemplo, una persona puede saludar. + +05:05.200 --> 05:09.200 +Y el saludar de una persona es como una +interacción + +05:09.200 --> 05:11.200 +que no es prácticamente información, + +05:11.200 --> 05:13.200 +pero simplemente genera una interacción. + +05:13.200 --> 05:17.200 +Y esto es algo, es una acción que puede +llevar una persona. + +05:17.200 --> 05:19.200 +Así que para poder construir un método, + +05:19.200 --> 05:22.200 +nosotros generamos, por ejemplo, saludar. + +05:22.200 --> 05:24.200 +Vamos a construir esta +función. + +05:24.200 --> 05:27.200 +Y ya dentro de la función vamos a hacer la +acción. + +05:27.200 --> 05:33.200 +En este caso, el saludar va a +ser, + +05:33.200 --> 05:37.200 +vamos a utilizar partes del +objeto. + +05:37.200 --> 05:42.200 +En este caso va a ser hola, mi nombre es, + +05:42.200 --> 05:47.200 +y aquí vamos a colocar el nombre de +nuestro objeto persona. + +05:47.200 --> 05:51.200 +Persona.nombre. + +05:51.200 --> 05:55.200 +Estamos colocando el nombre del objeto de +nuestra persona. + +05:55.200 --> 05:58.200 +Entonces es el nombre que le pertenece al +objeto + +05:58.200 --> 06:01.200 +de este objeto +prácticamente. + +06:01.200 --> 06:02.200 +Perfecto. + +06:02.200 --> 06:04.200 +Entonces ya con esto tenemos una +estructura base + +06:04.200 --> 06:05.200 +de qué es un +objeto. + +06:05.200 --> 06:08.200 +Si yo te preguntara cómo llevarías a una +persona a programación, + +06:08.200 --> 06:10.200 +sé que suena bastante +abstracto, + +06:10.200 --> 06:13.200 +pero esto es parte del paradigma de +programación orientado a objeto. + +06:13.200 --> 06:16.200 +Esta sería la respuesta de cómo +llevaríamos + +06:16.200 --> 06:18.200 +a una persona a +programación. + +06:18.200 --> 06:21.200 +Generamos un objeto que tiene ciertas +propiedades, + +06:21.200 --> 06:24.200 +que tiene ciertos métodos que +forman + +06:24.200 --> 06:25.200 +una +persona. + +06:25.200 --> 06:26.200 +¿Por +qué? + +06:26.200 --> 06:28.200 +Porque tenemos el nombre, tenemos la edad, + +06:28.200 --> 06:29.200 +podemos tener el +género, + +06:29.200 --> 06:32.200 +podemos tener otro tipo de propiedades que +nos ayuden + +06:32.200 --> 06:34.200 +a entender qué es una +persona. + +06:34.200 --> 06:36.200 +En este caso aquí estamos agregando, +por ejemplo, + +06:36.200 --> 06:39.200 +un pequeño objeto interno que tiene otro +tipo de propiedades + +06:39.200 --> 06:41.200 +que es la dirección de la +persona. + +06:41.200 --> 06:43.200 +Y estamos generando un método que es una +acción + +06:43.200 --> 06:45.200 +que esta persona puede hacer, que es saludar. + +06:45.200 --> 06:55.200 +Y al momento de saludar nos va a decir su +nombre. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..1c83c5e7ac76858587affe9834ecfa26e82642cc --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-Resumen.html" @@ -0,0 +1,141 @@ + + + + + + + Programación Orientada a Objetos en JavaScript: Conceptos y Práctica + + + +
+
+

Resumen

¿Qué son los objetos en programación?

+

Los objetos son un concepto fundamental en programación, especialmente en la programación orientada a objetos. Se pueden considerar como estructuras de datos que permiten agrupar información en un formato de "propiedad-valor". Este concepto es crucial para representar entidades del mundo real en el ámbito digital, permitiendo abstraer y estructurar información de forma organizada.

+

¿Cómo se estructura un objeto?

+

Un objeto se compone de propiedades y valores. Cada propiedad representa un atributo del objeto y está asociada a un valor. La síntaxis típica para representar un objeto es a través de llaves {} y dentro se definen pares de propiedad: valor.

+

Ejemplo de objeto en JavaScript:

+
const persona = {
+  nombre: "John",
+  edad: 30,
+  direccion: {
+    calle: "Avenida Insurgentes número 187",
+    ciudad: "Ciudad de México"
+  }
+};
+
+

En este ejemplo, el objeto persona tiene varias propiedades: nombre, edad, y direccion. Además, direccion es un objeto anidado con sus propias propiedades.

+

¿Cómo se pueden generar acciones en objetos?

+

Los objetos no solo almacenan datos, también pueden ejecutar acciones a través de métodos. Un método es básicamente una función asociada a un objeto. Estas funciones permiten a los objetos realizar acciones, como interacciones o cálculos.

+

Ejemplo de método dentro de un objeto:

+
const persona = {
+  nombre: "John",
+  edad: 30,
+  saludar: function() {
+    return `Hola, mi nombre es ${this.nombre}`;
+  }
+};
+
+console.log(persona.saludar()); // Imprime "Hola, mi nombre es John"
+
+

En este caso, saludar es un método del objeto persona que devuelve un saludo utilizando la propiedad nombre del mismo objeto.

+

¿Por qué son importantes los objetos en programación?

+

Los objetos permiten representar de forma efectiva y eficiente entidades del mundo real dentro de un programa. Mediante la abstracción, se pueden crear modelos complejos que imitan comportamientos, propiedades y características reales. Este enfoque es base de la programación orientada a objetos, un paradigma que facilita el manejo de la complejidad en el desarrollo de software.

+

Aplicaciones prácticas de los objetos

+
    +
  1. +

    Modelado de entidades: Permiten modelar cualquier cosa del mundo real, como usuarios, productos o vehículos.

    +
  2. +
  3. +

    Reutilización de código: Los objetos pueden contener métodos reutilizables, facilitando la creación de código modular.

    +
  4. +
  5. +

    Mantenimiento y escalabilidad: Fomentan un diseño de código organizado y escalable, manejable a medida que los proyectos crecen.

    +
  6. +
  7. +

    Interacción y dinámica: Agregan dinamismo a las aplicaciones al permitir la ejecución de funciones específicas del objeto.

    +
  8. +
+

Los objetos son una herramienta poderosa en el arsenal de cualquier desarrollador. Comprender cómo crearlos y utilizarlos es crucial para desarrollar aplicaciones eficientes y escalables. Al estudiar objetos, te sumerges en el apasionante mundo de la programación orientada a objetos, expandiendo tus habilidades y permitiéndote crear soluciones más funcionales y versátiles.

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-index_2f0c6cdf-1728-43de-b87c-10c86349e8e1.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-index_2f0c6cdf-1728-43de-b87c-10c86349e8e1.js" new file mode 100644 index 0000000000000000000000000000000000000000..916e09ad479ec87b935b56fb87c13d662527c419 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/01-index_2f0c6cdf-1728-43de-b87c-10c86349e8e1.js" @@ -0,0 +1,79 @@ +/* + +estructura de datos + +key / value + +objeto { + propiedad: valor, + propiedad: valor, + propiedad: valor + Metodos() +} + +*/ + +const persona = { + nombre: "John", + edad: 30, + direccion: { + calle: "Av Insurgentre 187", + ciudad: "CDMX", + }, + saludar() { + console.log(`hola, mi nombre es ${persona.nombre}`); + }, +}; + +// Imprimamos el objeto + +console.log(persona); + +// Imprimamos la propiedad nombre + +console.log(persona.nombre); + +// Imprimamos el metodo saludar + +persona.saludar(); + +// +// +// +// +// +// Agrergamos una propiedad al objeto en este caso telefono + +persona.telefono = "555-555-5555"; + +console.log(persona.telefono); + +// Agregamos un metodo al objeto + +persona.despedir = () => { + console.log("Adios"); +}; + +persona.despedir(); + +// Acceder a una propiedad de un objeto anidado / Metodo + +console.log(persona.direccion.calle); + +// +// +// +// +// +// +// Eliminar una propiedad de un objeto + +delete persona.telefono; + +console.log(persona.telefono); + +// Eliminar un metodo de un objeto + +delete persona.despedir; + +console.log(persona.despedir()); diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..6b7acc08a288b3d8f7b5cdbeef4e4a10335642f6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7a5a7230b4e46ade5a1bade1048ac0029268dd9ddea1e7af0a641592f2c7ed43 +size 77973677 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..a3b444f664e6bf2f47852ead034df938e27de09f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Creaci\303\263n y Manipulaci\303\263n de Objetos en JavaScript.vtt" @@ -0,0 +1,640 @@ +WEBVTT + +00:00.000 --> 00:03.600 +Cuando hablamos de objetos, podemos ver +los objetos como una + +00:03.600 --> 00:04.720 +estructura de +datos. + +00:08.960 --> 00:11.480 +Esto nos va a ayudar a guardar información +y la vamos a guardar + +00:11.480 --> 00:12.720 +de una forma +particular. + +00:12.720 --> 00:19.320 +Vamos a tomar en cuenta dos cosas, el key +y un value. + +00:19.320 --> 00:22.720 +Este key value va a ser, va a usar una +propiedad y esa + +00:22.720 --> 00:24.560 +propiedad va a tener un +valor. + +00:24.560 --> 00:26.880 +Y así es como vamos a guardar la información. + +00:26.880 --> 00:30.840 +Podemos ver el objeto, más o menos la +estructura sería + +00:30.840 --> 00:33.600 +objeto. + +00:33.600 --> 00:35.360 +Vamos a abrir nuestros +crochetes. + +00:35.360 --> 00:39.240 +Y entonces aquí ponemos propiedad y esta +propiedad va + +00:39.240 --> 00:41.640 +a tener el +valor. + +00:41.640 --> 00:43.400 +Si queremos guardar más información, + +00:43.400 --> 00:49.920 +ponemos una coma y bajamos propiedad y de +igual forma + +00:49.920 --> 00:50.960 +valor. + +00:50.960 --> 00:55.400 +Y así podemos continuar nosotros guardando +más propiedades que + +00:55.400 --> 00:57.800 +a su vez tengan +valores. + +00:57.800 --> 01:01.440 +Y si queremos ya no tener la propiedad y +valor, por ejemplo, + +01:01.440 --> 01:05.440 +los objetos también tienen algo que se le +conoce como métodos. + +01:05.440 --> 01:09.640 +Que los métodos son acciones que van a +hacer los objetos con + +01:09.640 --> 01:12.320 +cierta información que +tengan. + +01:12.320 --> 01:15.320 +La forma de generar los métodos es como si +hiciéramos una + +01:15.320 --> 01:19.240 +función, pero esta función va a ir adentro +de nuestro objeto. + +01:19.240 --> 01:21.960 +Entonces, ¿cómo llevamos esto a un objeto +en la realidad? + +01:21.960 --> 01:23.920 +Pues bueno, esta es la +estructura, + +01:23.920 --> 01:26.880 +pero vamos a construir en este momento un +objeto. + +01:26.880 --> 01:30.640 +Entonces vamos a construir un objeto. + +01:30.640 --> 01:33.440 +Empezamos con una constante y la constante +se va a llamar + +01:33.440 --> 01:34.880 +persona. + +01:34.880 --> 01:37.880 +Lo tenemos, va a ser igual a nuestros +crochetes. + +01:37.880 --> 01:40.680 +Y entonces aquí comenzamos con nuestras +propiedades. + +01:40.680 --> 01:46.760 +Primero se va a llamar nombre, que va a +ser igual a, + +01:46.760 --> 01:49.080 +y vamos a utilizar un dato de string, + +01:49.080 --> 01:53.360 +John, coma, para poder colocar la segunda +propiedad, + +01:53.360 --> 01:55.640 +que va a ser igual a, que va a ser edad. + +01:55.640 --> 02:00.600 +Y en edad vamos a utilizar un tipo de dato +que es número. + +02:00.600 --> 02:03.760 +Y ahora vamos a poner +dirección. + +02:03.760 --> 02:07.440 +Y la dirección va a ser en sí otro pequeño +objeto unidado, + +02:07.440 --> 02:10.600 +porque va a llevar más propiedades, que +sería calle. + +02:10.600 --> 02:15.360 +Y esta calle va a ser avenida, esto tiene +que ir adentro, + +02:15.360 --> 02:22.200 +avenida Insurgentes, número 187, coma. + +02:22.200 --> 02:25.800 +Y ponemos otra propiedad, que sería ciudad. + +02:25.800 --> 02:29.000 +Y la ciudad va a ser Ciudad de México. + +02:29.000 --> 02:33.320 +Aquí salimos y como estamos saliendo de +esta propiedad y + +02:33.320 --> 02:36.600 +vamos a colocar más, ponemos una coma. + +02:36.600 --> 02:39.360 +Y ahora vamos a construir un método que se +va a llamar + +02:39.360 --> 02:40.520 +saludar. + +02:40.520 --> 02:43.720 +Y esto vamos a utilizar la estructura que +conocemos ya de + +02:43.720 --> 02:45.920 +poder generar una +función. + +02:45.920 --> 02:49.440 +Entonces el saludar lo que va a hacer es +console.log y va a + +02:49.440 --> 02:52.520 +decir prácticamente hola mi nombre es y +vamos a hacer + +02:52.520 --> 02:55.960 +referencia al nombre de nuestro objeto +persona. + +02:55.960 --> 02:59.360 +Para poder utilizar esta propiedad como +variable, + +02:59.360 --> 03:02.360 +porque hay un valor aquí, tenemos que +utilizar estas + +03:02.360 --> 03:05.120 +comillas. + +03:05.120 --> 03:12.720 +Y con esto le ponemos hola, mi nombre es, +ponemos pesitos, + +03:12.720 --> 03:20.520 +y persona.nombre, porque estamos mandando +llamar el valor de la + +03:20.520 --> 03:23.640 +propiedad de nombre que le pertenece al +objeto de + +03:23.640 --> 03:24.520 +persona. + +03:24.520 --> 03:28.760 +Así que con esto aquí ya nosotros podemos +prácticamente + +03:28.760 --> 03:31.200 +imprimir el +nombre. + +03:31.200 --> 03:33.760 +Scope out de aquí, aquí no está marcando +aquí un error, + +03:33.760 --> 03:35.040 +yo puse +nombre. + +03:35.040 --> 03:38.340 +Pero si vemos el error, aquí nos dice que +no existe la + +03:38.340 --> 03:39.560 +propiedad +nombre. + +03:39.560 --> 03:42.800 +Entonces si venimos acá podemos ver que +aquí no se escribió + +03:42.800 --> 03:46.120 +bien nombre, ya, el error no existe. + +03:46.120 --> 03:48.160 +Entonces ponemos +coma. + +03:48.160 --> 03:51.440 +Y si guardamos, perfecto, ya tenemos aquí +la estructura de + +03:51.440 --> 03:53.800 +lo que sería nuestro objeto persona. + +03:53.800 --> 03:59.720 +Vamos a imprimirla, console.log, y aquí +vamos a imprimir + +03:59.720 --> 04:02.400 +persona.coma. + +04:02.400 --> 04:06.120 +Si guardamos, podemos ver aquí que ya +tenemos la impresión de + +04:06.120 --> 04:09.640 +nuestro objeto, donde tenemos el nombre, +tenemos la dirección, + +04:09.640 --> 04:12.320 +que es un pequeño objeto, tenemos la edad, + +04:12.320 --> 04:15.560 +y tenemos aquí nuestro método de saludar. + +04:15.560 --> 04:20.280 +Ahora que tenemos nuestro objeto, vamos a +imprimirlo. + +04:20.280 --> 04:24.120 +Ponemos persona y guardamos nuestro archivo. + +04:24.120 --> 04:27.040 +Y con esto ya podemos ver aquí en terminal +que ya se imprime + +04:27.040 --> 04:28.000 +nuestro +objeto. + +04:28.000 --> 04:31.000 +Tenemos el nombre, tenemos la edad y +tenemos el objeto + +04:31.000 --> 04:34.080 +anitado, que es la dirección, que viene +con calle y que viene + +04:34.080 --> 04:35.080 +con +ciudad. + +04:35.080 --> 04:36.840 +De igual forma, tenemos aquí el método, + +04:36.840 --> 04:39.600 +que para poder entonces ver el método, +imprimirlo, + +04:39.600 --> 04:45.520 +simplemente vamos a llamar nuestro objeto +persona.saludar. + +04:45.520 --> 04:48.240 +Y como es una función, la cerramos con esto. + +04:48.240 --> 04:49.520 +Y +guardamos. + +04:49.520 --> 04:51.680 +Y tenemos aquí un error que nos dice, + +04:51.680 --> 04:58.080 +la referencia del error es log is not +defined en la línea 24. + +04:58.080 --> 05:00.600 +Si venimos aquí, podemos ver que la línea 24, + +05:00.600 --> 05:03.800 +tenemos nuestro console, coma y un espacio. + +05:03.800 --> 05:05.120 +Evidentemente, esto no está +bien. + +05:05.120 --> 05:06.600 +Ponemos el punto, +log. + +05:06.600 --> 05:09.440 +Entonces, si guardamos, ya tenemos nuestro +objeto. + +05:09.440 --> 05:14.200 +Y ya tenemos aquí entonces nuestro método +que dice, hola, + +05:14.200 --> 05:18.740 +mi nombre es John, que hace referencia al +nombre de la + +05:18.740 --> 05:23.200 +propiedad de nuestro objeto, +John. + +05:23.200 --> 05:25.280 +Ahora lo que vamos a hacer es un perfecto. + +05:25.280 --> 05:27.640 +¿Qué pasa si ya tengo este objeto +creado? + +05:27.640 --> 05:30.440 +Pero en el camino me doy cuenta que +necesito agregar o nuevas + +05:30.440 --> 05:32.920 +propiedades o nuevos +métodos. + +05:32.920 --> 05:36.560 +Entonces, para poderlo hacer es tan +sencillo como venir, + +05:36.560 --> 05:41.480 +tomar nuestro objeto persona y poder punto +y agregarle la nueva + +05:41.480 --> 05:45.360 +propiedad, que en este caso va a ser teléfono. + +05:45.360 --> 05:49.000 +Y el teléfono va a ser igual a, y aquí es +donde vamos a poner + +05:49.000 --> 05:50.760 +la información que estamos requiriendo, +que en este caso + +05:50.760 --> 05:57.280 +va a ser 555, 555, 555, +5. + +05:57.280 --> 05:57.840 +Perfecto. + +05:57.840 --> 06:00.240 +Y cerramos con punto y +coma. + +06:00.240 --> 06:06.400 +Para poder asegurarnos que esto se guarde, +console.log. + +06:06.400 --> 06:12.920 +Entonces, aquí mandamos llamar persona. +teléfono.coma. + +06:12.920 --> 06:14.720 +Guardamos. + +06:14.720 --> 06:17.360 +Y podemos ver aquí que ya se imprime +automáticamente nuestro + +06:17.360 --> 06:18.280 +teléfono. + +06:18.280 --> 06:21.200 +Si venimos acá y abrimos nuestro objeto, + +06:21.200 --> 06:24.120 +vemos que ya se está agregando esta propiedad. + +06:24.120 --> 06:25.960 +Ahora, esto es para agregar propiedades. + +06:25.960 --> 06:29.000 +Pero si yo quiero agregar un nuevo método, + +06:29.000 --> 06:30.520 +lo vamos a hacer de esta +forma. + +06:30.520 --> 06:34.400 +Llegamos aquí, de igual forma, tomamos +nuestro objeto persona + +06:34.400 --> 06:38.800 +punto y agregamos la propiedad como si +fuera una función. + +06:38.800 --> 06:42.760 +Despedir, que va a ser igual a una función +anónima. + +06:42.760 --> 06:46.760 +Y esta función, esta arrow function, más bien. + +06:46.760 --> 06:47.680 +Tenemos +esto. + +06:47.680 --> 06:50.640 +Y aquí vamos a agregar lo que estamos +buscando. + +06:50.640 --> 06:52.600 +Console.log. + +06:52.600 --> 06:59.200 +Y lo que vamos a poner aquí va a ser un adiós. + +07:02.720 --> 07:05.360 +Vamos a guardar nuestro +objeto. + +07:05.360 --> 07:09.600 +Y ahora, como lo hicimos en la parte de +acá con este método, + +07:09.600 --> 07:11.080 +en vez de utilizar un +console.log, + +07:11.080 --> 07:15.440 +simplemente vamos a poner persona punto +despedir. + +07:20.840 --> 07:21.940 +Guardamos. + +07:21.940 --> 07:25.600 +Y tenemos ya aquí nuestra función que +estamos agregando. + +07:25.600 --> 07:27.920 +Nuestro nuevo método que se está agregando +si abrimos nuestro + +07:27.920 --> 07:28.440 +objeto. + +07:28.440 --> 07:32.280 +Podemos ver ahora que tenemos el despedir +y que tenemos el + +07:32.280 --> 07:35.760 +saludar, que se están agregando de forma +independiente a + +07:35.760 --> 07:39.160 +nuestro objeto una vez que el objeto ya +fue creado. + +07:39.160 --> 07:41.320 +Ahora, tú te puedes preguntar, como perfecto, +Diego, + +07:41.320 --> 07:43.480 +ya sé cómo generar un +objeto. + +07:43.480 --> 07:45.880 +Ahora ya sé una vez que el objeto fue creado, + +07:45.880 --> 07:48.280 +si tengo que agregar ciertas propiedades o +tengo que agregar + +07:48.280 --> 07:50.520 +ciertos métodos, cómo +hacerlo. + +07:50.520 --> 07:52.600 +Pero, ¿qué pasa si de repente ya no tengo +que agregar, + +07:52.600 --> 07:55.400 +sino más bien tengo que borrar propiedades +y métodos? + +07:55.400 --> 07:58.360 +La forma de poder borrar propiedades y +métodos es + +07:58.360 --> 08:01.240 +llegamos y vamos a utilizar una palabra +reservada que se llama + +08:01.240 --> 08:02.400 +deletes. + +08:02.400 --> 08:06.280 +Vamos a mandar llamar nuestro objeto con +el punto y vamos + +08:06.280 --> 08:10.040 +a mandar llamar la propiedad que +necesitamos borrar. + +08:10.040 --> 08:12.920 +Teléfono. + +08:12.920 --> 08:17.760 +Si guardamos, en este momento, si yo vengo +aquí y abro, + +08:17.760 --> 08:20.280 +nos vamos a dar cuenta que ya no tengo +nuestra propiedad de + +08:20.280 --> 08:21.360 +teléfono en este +momento. + +08:21.360 --> 08:24.480 +Ya no tiene caso que yo utilice un control +log para poder verlo. + +08:24.480 --> 08:27.480 +Yo ya tengo aquí, como al inicio estoy +mandando llamar este + +08:27.480 --> 08:30.720 +objeto, puedo ver que la propiedad ya no +existe. + +08:30.720 --> 08:33.560 +Si queremos borrar ahora un método, va a +ser lo mismo. + +08:33.560 --> 08:37.760 +Vamos a utilizar deletes punto, más bien, + +08:37.760 --> 08:43.960 +deletes espacio persona punto y la +propiedad que quiero borrar + +08:43.960 --> 08:45.800 +es +pedir. + +08:45.800 --> 08:46.920 +Punto y +coma. + +08:46.920 --> 08:49.280 +Si guardo nuestro código y venimos aquí, + +08:49.280 --> 08:51.560 +que está imprimiendo también el código, + +08:51.560 --> 08:55.600 +podemos ver que tampoco ya existe el +método de despedir, + +08:55.600 --> 08:58.800 +solo existe el método de saludar y existen +los parámetros que + +08:58.800 --> 09:01.240 +utilizamos al momento de que creamos +nuestro objeto, + +09:01.240 --> 09:03.760 +que viene la dirección, que es un objeto +anidado, + +09:03.760 --> 09:20.800 +viene la edad y viene el +nombre. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..000a014abc21154b0a054d89ad06ecf7252ec12f --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-Resumen.html" @@ -0,0 +1,139 @@ + + + + + + + Creación y Manipulación de Objetos en JavaScript + + + +
+
+

Resumen

¿Qué son los objetos en programación?

+

Los objetos en programación son estructuras de datos que permiten almacenar información de una manera organizada. Funcionan con una estructura de clave-valor, donde cada clave (key) se asocia a un valor (value), lo que nos ayuda a mantener una colección de datos relacionados de forma coherente.

+

Los objetos no solo almacenan datos, también pueden contener métodos que son acciones ejecutables por el propio objeto. Esta capacidad para almacenar tanto datos como comportamientos hace que los objetos sean herramientas versátiles y poderosas en muchos lenguajes de programación.

+

¿Cómo crear un objeto en JavaScript?

+

Crear un objeto en JavaScript comienza declarando una constante y usando llaves para definir las propiedades y métodos dentro del objeto. Aquí te muestro cómo:

+
const persona = {
+  nombre: 'John',
+  edad: 30,
+  direccion: {
+    calle: 'Avenida Insurgentes',
+    numero: 187,
+    ciudad: 'Ciudad de México'
+  },
+  saludar: function() {
+    console.log(`Hola, mi nombre es ${this.nombre}`);
+  }
+};
+
+

En este ejemplo, hemos creado un objeto llamado persona con propiedades como nombre, edad y direccion. Además, el método saludar imprime un mensaje utilizando la propiedad nombre.

+

¿Cómo trabajar con métodos de objetos?

+

Los métodos en un objeto se crean como funciones dentro del mismo. Estos métodos permiten que el objeto realice acciones usando sus propias propiedades.

+

Para ejecutar el método saludar del objeto persona, simplemente llamamos:

+
persona.saludar(); // Imprime: Hola, mi nombre es John
+
+

Este código ejecuta la acción definida en el método saludar, mostrando el saludo con el nombre de la persona.

+

¿Cómo agregar y borrar propiedades y métodos?

+

Agregar propiedades y métodos

+

Agregar nuevas propiedades o métodos a un objeto existente es sencillo. Solo necesitas utilizar el operador de punto (.) seguido del nombre de la nueva propiedad o método:

+
persona.telefono = '555-555-5555';
+
+persona.despedir = () => {
+  console.log('Adiós');
+};
+
+console.log(persona.telefono); // Imprime: 555-555-5555
+persona.despedir(); // Imprime: Adiós
+
+

Borrar propiedades y métodos

+

Para eliminar una propiedad o método de un objeto, utiliza la palabra clave delete:

+
delete persona.telefono;
+delete persona.despedir;
+
+

Con esto, las propiedades o métodos se eliminan del objeto, y ya no estarán accesibles.

+
+

Los objetos son fundamentales en muchos paradigmas de programación, especialmente en paradigmas orientados a objetos. Te permiten crear modelos del mundo real en el código, manejando tanto datos como funcionalidades. Recuerda que como programador, el dominio de los objetos y sus manipulaciones abre la puerta a desarrollar aplicaciones más completas y robustas. ¡Sigue explorando y experimentando para fortalecer tus habilidades!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-index_1e469f9b-6fdc-4de4-9e66-cba3a484b09b.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-index_1e469f9b-6fdc-4de4-9e66-cba3a484b09b.js" new file mode 100644 index 0000000000000000000000000000000000000000..916e09ad479ec87b935b56fb87c13d662527c419 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/02-index_1e469f9b-6fdc-4de4-9e66-cba3a484b09b.js" @@ -0,0 +1,79 @@ +/* + +estructura de datos + +key / value + +objeto { + propiedad: valor, + propiedad: valor, + propiedad: valor + Metodos() +} + +*/ + +const persona = { + nombre: "John", + edad: 30, + direccion: { + calle: "Av Insurgentre 187", + ciudad: "CDMX", + }, + saludar() { + console.log(`hola, mi nombre es ${persona.nombre}`); + }, +}; + +// Imprimamos el objeto + +console.log(persona); + +// Imprimamos la propiedad nombre + +console.log(persona.nombre); + +// Imprimamos el metodo saludar + +persona.saludar(); + +// +// +// +// +// +// Agrergamos una propiedad al objeto en este caso telefono + +persona.telefono = "555-555-5555"; + +console.log(persona.telefono); + +// Agregamos un metodo al objeto + +persona.despedir = () => { + console.log("Adios"); +}; + +persona.despedir(); + +// Acceder a una propiedad de un objeto anidado / Metodo + +console.log(persona.direccion.calle); + +// +// +// +// +// +// +// Eliminar una propiedad de un objeto + +delete persona.telefono; + +console.log(persona.telefono); + +// Eliminar un metodo de un objeto + +delete persona.despedir; + +console.log(persona.despedir()); diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..a67fae315e4dff53cf5b8b708cada93bc8f79d63 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7f84ee392c6ec6b1d4c2a52767b3d6365cf5d80ecaf63089112c46e2efc20381 +size 128896729 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..7d3fd4bd01de94de5e00ac7e0c3e7d776300f803 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Funci\303\263n constructora y gesti\303\263n de instancias en JavaScript.vtt" @@ -0,0 +1,873 @@ +WEBVTT + +00:00.000 --> 00:04.120 +Como ya vimos, al momento de trabajar objetos, +por ejemplo, + +00:04.120 --> 00:11.320 +el objeto persona, construimos uno que se +llama persona, + +00:11.320 --> 00:13.640 +que va a ser igual a la estructura a la +cual ya estamos + +00:13.640 --> 00:15.120 +familiarizado. + +00:15.120 --> 00:19.280 +Tenemos el nombre igual a +Diego. + +00:19.280 --> 00:20.120 +Todo esto +funciona. + +00:20.120 --> 00:26.400 +Tenemos apellido igual a de +granda. + +00:26.400 --> 00:28.600 +Y podremos tener más +propiedades. + +00:28.600 --> 00:32.160 +Pero, ¿qué pasa si, por ejemplo, ahorita +ya tenemos un objeto y + +00:32.160 --> 00:36.400 +nosotros necesitamos construir de este +objeto 500 personas? + +00:36.400 --> 00:37.820 +¿Qué es lo que tendrías que +hacer? + +00:37.820 --> 00:40.280 +¿Tendrías que copiar y pegar este código +500 veces para + +00:40.280 --> 00:42.240 +poderlo hacer nada más de que cambias el +nombre? + +00:42.240 --> 00:43.280 +Esto no es +funcional. + +00:43.280 --> 00:44.880 +Esto no es +escalable. + +00:44.880 --> 00:48.920 +Para poder asegurarnos de que nosotros +tengamos o podamos + +00:48.920 --> 00:52.920 +construir la cantidad de objetos que +necesitemos sin tener que + +00:52.920 --> 00:56.080 +estar copiando, pegando y asegurarnos +cambiar el nombre, + +00:56.080 --> 00:58.740 +tenemos que utilizar una función que se +llama función + +00:58.740 --> 01:01.840 +constructora, que el único objetivo que +tiene es poder + +01:01.840 --> 01:03.320 +construir +objetos. + +01:03.320 --> 01:07.080 +Y para esto, como ya te comenté, esto es +una función. + +01:07.080 --> 01:09.960 +Y esta función va a tener la misma +estructura de las + +01:09.960 --> 01:12.040 +funciones de las cuales ya estamos +familiarizados, + +01:12.040 --> 01:15.560 +nada más que el nombre de la función va a +ser el nombre de + +01:15.560 --> 01:17.880 +nuestro objeto que tiene que construir. + +01:17.880 --> 01:22.120 +En este caso, va a tener una peculiaridad +que va a iniciar + +01:22.120 --> 01:25.880 +con mayúscula esa +función. + +01:25.880 --> 01:27.800 +Sería en este queremos construir, por ejemplo, + +01:27.800 --> 01:29.360 +personas. + +01:29.360 --> 01:32.600 +Entonces, nuestra función constructora va +a iniciar con + +01:32.600 --> 01:36.400 +function mayúscula +persona. + +01:36.400 --> 01:39.680 +Y aquí continuamos como si estuviéramos +haciendo una + +01:39.680 --> 01:43.800 +función en el cual tenemos los paréntesis +y tenemos nuestros + +01:43.800 --> 01:44.400 +corchetes. + +01:44.400 --> 01:47.920 +Y adentro de los paréntesis vamos a +agregar estas + +01:47.920 --> 01:49.600 +propiedades que +necesitamos. + +01:49.600 --> 01:51.400 +Porque cuando vamos a hacer la función, + +01:51.400 --> 01:54.440 +pues tenemos que agregarle las propiedades +para que entonces + +01:54.440 --> 01:57.200 +la función pueda construir nuestro objeto. + +01:57.200 --> 02:01.000 +Entonces, aquí necesitamos, por ejemplo, +el nombre. + +02:01.000 --> 02:03.800 +Necesitamos el +apellido. + +02:03.800 --> 02:06.880 +Y necesitamos, vamos a ponerle una edad +para poder construir + +02:06.880 --> 02:08.920 +nuestra +persona. + +02:08.920 --> 02:13.360 +Entonces, tenemos una función que tiene el +nombre del objeto + +02:13.360 --> 02:16.440 +que queremos empezar a construir de forma +mucho más masiva, + +02:16.440 --> 02:18.440 +que tiene que iniciar con mayúscula. + +02:18.440 --> 02:22.600 +Y aquí vamos a pasarle como parámetros las +propiedades que + +02:22.600 --> 02:24.120 +van a construir ese +objeto. + +02:24.120 --> 02:28.040 +Entonces, si venimos aquí, vamos a poner +una estructura + +02:28.040 --> 02:30.680 +similar donde tendríamos el +nombre. + +02:30.680 --> 02:32.400 +Y el nombre sería +igual. + +02:32.400 --> 02:36.480 +Esa es una función, recuerdan, no es +similar a la forma en la + +02:36.480 --> 02:39.920 +que construimos un objeto, sino esto va a +construir estos + +02:39.920 --> 02:40.880 +objetos. + +02:40.880 --> 02:44.480 +Así que ponemos nombre igual a nombre, + +02:44.480 --> 02:47.880 +que va a ser referente a este parámetro +que estamos nosotros + +02:47.880 --> 02:49.560 +utilizando, punto y +coma. + +02:49.560 --> 02:54.100 +Pero aquí tenemos una peculiaridad que +tendremos que + +02:54.100 --> 02:58.840 +iniciar con el this, punto, porque el this +hace referencia + +02:58.840 --> 03:01.040 +a este +objeto. + +03:01.040 --> 03:04.920 +Entonces, ponemos este objeto, el nombre +de este objeto va a + +03:04.920 --> 03:08.360 +ser igual al nombre que nos pasen como +parámetro. + +03:08.360 --> 03:10.320 +Y con eso terminamos la +estructura. + +03:10.320 --> 03:11.400 +Vamos en el +otro. + +03:11.400 --> 03:17.000 +Sería this, punto, apellido, igual a apellido, + +03:17.000 --> 03:20.240 +que hace referencia al parámetro que nos +van a pasar. + +03:20.240 --> 03:27.680 +Y terminamos con this, punto, +edad, + +03:27.680 --> 03:30.360 +que va a ser igual a edad como el +parámetro que nos va a + +03:30.360 --> 03:31.280 +pasar. + +03:31.280 --> 03:34.860 +Entonces, esta es la estructura de cómo +construimos una función + +03:34.860 --> 03:35.960 +constructora. + +03:35.960 --> 03:39.680 +Si nosotros queremos ahora empezar a +construir objetos + +03:39.680 --> 03:42.800 +utilizando esta función, la forma de +hacerlo sería la + +03:42.800 --> 03:44.060 +siguiente. + +03:44.060 --> 03:45.860 +Tenemos que generar una +instancia. + +03:45.860 --> 03:49.800 +Así se le llama a todos los objetos que +vengan de esta + +03:49.800 --> 03:52.480 +función constructora, se van a llamar +instancias. + +03:52.480 --> 03:55.380 +Y la forma de hacerlo es, empezamos con un +const, + +03:55.380 --> 03:58.740 +que va a ser persona1, por +ejemplo. + +03:58.740 --> 04:01.400 +Y esto vamos a utilizar una palabra +reservada que se llama + +04:01.400 --> 04:02.420 +new. + +04:02.420 --> 04:05.280 +Y después mandamos llamar nuestra función +constructora + +04:05.280 --> 04:07.240 +con los parámetros que nos interesan. + +04:07.240 --> 04:10.520 +Entonces, nuestra primera persona se va a +llamar Juan, + +04:10.520 --> 04:15.800 +coma, su apellido va a ser Pérez, coma, + +04:15.800 --> 04:19.400 +y su edad va a ser 30 años, punto y coma, + +04:19.400 --> 04:22.840 +para poder ver que esta persona se generó +o se creó de forma + +04:22.840 --> 04:25.760 +correcta con su punto +log. + +04:25.760 --> 04:30.880 +Entonces, aquí vamos a mandar llamar persona1, +punto y coma. + +04:30.880 --> 04:33.440 +Ahora, si guardamos nuestro +código, + +04:33.440 --> 04:36.000 +podemos ver que aquí ya no está regresando. + +04:36.000 --> 04:39.120 +Hay una función, o más bien hay un objeto +que se llama persona. + +04:39.120 --> 04:42.800 +Pero si lo abrimos, podemos ver que este +objeto persona se + +04:42.800 --> 04:44.920 +llama Juan, con el apellido +Pérez, + +04:44.920 --> 04:47.600 +y tiene la edad de 30 +años. + +04:47.600 --> 04:48.240 +Perfecto. + +04:48.240 --> 04:50.560 +Ahora, sabemos que ya podemos generar +instancias. + +04:50.560 --> 04:53.640 +Pero entonces, ¿cuál es el beneficio de +hacerlo así? + +04:53.640 --> 04:54.960 +A hacerlo así, +¿no? + +04:54.960 --> 04:56.080 +Como copiar y +pegar. + +04:56.080 --> 04:58.560 +Bueno, el beneficio es que la siguiente +vez que yo quisiera + +04:58.560 --> 05:02.880 +tener otra persona nueva, va a ser una +constancia. + +05:02.880 --> 05:05.160 +Esta persona va a ser +persona2. + +05:05.160 --> 05:07.720 +Y vamos a copiar la misma estructura con +la reservada + +05:07.720 --> 05:10.520 +new, +persona. + +05:10.520 --> 05:13.520 +Y entonces, ahora, en vez de generar esta +estructura o + +05:13.520 --> 05:16.720 +esta estructura, simplemente mandamos +llamar nuestra función + +05:16.720 --> 05:19.200 +constructora y solo le pasamos los +parámetros que nos + +05:19.200 --> 05:22.120 +interesan para esta nueva +persona. + +05:22.120 --> 05:28.760 +Va a ser Diego, coma, su apellido va a ser +de granda, + +05:28.760 --> 05:32.200 +y entonces su edad va a ser 35 años. + +05:32.200 --> 05:34.680 +Lo +tenemos. + +05:34.680 --> 05:36.080 +Console.log. + +05:36.080 --> 05:40.800 +Y entonces aquí, persona2, punto y coma. + +05:40.800 --> 05:44.280 +Imprimimos y podemos ver que ahora +entonces ya tenemos dos + +05:44.280 --> 05:47.640 +objetos, uno de nombre Juan, otro de +nombre Diego. + +05:47.640 --> 05:50.840 +Y así podemos empezar a generar las +personas que nosotros + +05:50.840 --> 05:51.880 +necesitemos. + +05:51.880 --> 05:55.160 +E incluso podíamos hacer una función que +pueda automatizar + +05:55.160 --> 05:58.320 +este proceso para que solo le pasemos los +parámetros que nos + +05:58.320 --> 06:01.120 +interesan, inyectarle los parámetros que +nos interesan y + +06:01.120 --> 06:03.960 +que nos vaya formando tantas personas +tenga nuestro + +06:03.960 --> 06:04.720 +documento. + +06:04.720 --> 06:08.360 +Entonces, ahora ya sabemos cómo nosotros +generamos una función + +06:08.360 --> 06:13.000 +constructora y cómo podemos generar las +instancias. + +06:13.000 --> 06:15.880 +Y si tu pregunta es, oye, Diego, ahora que +ya sé cómo generar + +06:15.880 --> 06:19.520 +esta función constructora, ¿qué pasa si +tengo que generar una + +06:19.520 --> 06:21.080 +propiedad +después? + +06:21.080 --> 06:23.160 +En el camino me doy cuenta que no solo +quiero edad, + +06:23.160 --> 06:26.160 +sino que también quiero el género o +incluso quiero su + +06:26.160 --> 06:27.640 +dirección. + +06:27.640 --> 06:30.160 +¿Podrías venir directamente aquí a la +función constructora y + +06:30.160 --> 06:32.520 +agregar esa nueva propiedad como +dis? + +06:32.520 --> 06:35.720 +Entonces, asegurarte que aquí en el +momento de estar como + +06:35.720 --> 06:39.880 +construyendo esa instancia, puedas poner +esa información. + +06:39.880 --> 06:43.480 +O lo que puedes hacer es utilizar el +prototype, + +06:43.480 --> 06:49.080 +puedes generar o agregar una propiedad al +prototype de + +06:49.080 --> 06:49.760 +persona. + +06:49.760 --> 06:51.560 +Y ahorita vamos a ver qué significa eso. + +06:51.560 --> 06:53.760 +La forma de hacerlo es, mandamos llamar +nuestra función + +06:53.760 --> 06:57.800 +constructora, punto, prototype, punto, + +06:57.800 --> 06:59.120 +la propiedad que quiero +agregar. + +06:59.120 --> 07:02.800 +Que en este caso sería +teléfono. + +07:02.800 --> 07:04.960 +Y aquí vamos a poner un teléfono por default, + +07:04.960 --> 07:11.560 +que sería +555-555-5555. + +07:11.560 --> 07:14.080 +Entonces, al momento de poner punto y coma +y guardar, + +07:14.080 --> 07:16.280 +puedo ver que aquí está imprimiendo mis +dos objetos que + +07:16.280 --> 07:18.760 +ya he generado, que son mis dos instancias. + +07:18.760 --> 07:21.440 +Al momento de abrir, puedo ver que, bueno, + +07:21.440 --> 07:24.480 +aquí no existe la propiedad que yo acabo +de generar. + +07:24.480 --> 07:28.080 +El problema es que, o el punto, es que +esta propiedad no se + +07:28.080 --> 07:31.240 +agrega directamente en la función +constructora, + +07:31.240 --> 07:33.960 +sino se está agregando al prototipo de la +función + +07:33.960 --> 07:34.640 +constructora. + +07:34.640 --> 07:36.120 +Aquí tenemos +prototype. + +07:36.120 --> 07:39.560 +Y si lo abrimos, podemos ver que aquí está +la propiedad que + +07:39.560 --> 07:40.240 +estoy +agregando. + +07:40.240 --> 07:41.000 +¿Por +qué? + +07:41.000 --> 07:44.080 +Porque recordemos que el prototipo es la +copia de la + +07:44.080 --> 07:47.720 +función constructora que se encarga de +compartir cada una de + +07:47.720 --> 07:51.280 +las propiedades o métodos que existen en +mi función. + +07:51.280 --> 07:54.280 +Así que si yo tengo que agregar una nueva +propiedad o un nuevo + +07:54.280 --> 07:57.900 +método, lo voy a hacer de esta forma para +asegurarme que el + +07:57.900 --> 08:00.880 +prototipo también tenga esta información +que estoy + +08:00.880 --> 08:04.040 +añadiendo y se pueda empezar a compartir +en las siguientes + +08:04.040 --> 08:05.240 +instancias. + +08:05.240 --> 08:07.440 +No va a venir directamente desde el +constructor, + +08:07.440 --> 08:10.200 +pero sí se va a compartir desde el prototype. + +08:10.200 --> 08:13.000 +Pero ahora, ¿qué pasa si yo solo quiero +agregar una nueva + +08:13.000 --> 08:17.160 +propiedad a una instancia en particular +que yo ya generé y + +08:17.160 --> 08:19.400 +no necesito que se comparte entre todas +las demás + +08:19.400 --> 08:20.520 +instancias? + +08:20.520 --> 08:23.480 +Entonces, la forma de hacerlo, ya lo +sabemos hacer, sería, + +08:23.480 --> 08:25.160 +vamos a mandar llamar nuestra instancia, + +08:25.160 --> 08:31.320 +va a ser persona1, punto, y va a tener una +nueva información + +08:31.320 --> 08:37.200 +que va a ser nacion, +nacionalidad. + +08:37.200 --> 08:42.600 +Y en este caso, para esta persona, sería +mexicano. + +08:45.240 --> 08:47.280 +Vamos a +guardar. + +08:47.280 --> 08:51.960 +Entonces, venimos aquí, tenemos, por ejemplo, +persona1. + +08:51.960 --> 08:53.600 +Aquí es donde está +Juan. + +08:53.600 --> 08:56.720 +Estamos agregando su nueva propiedad, +que es mexicano. + +08:56.720 --> 09:00.680 +Venimos a persona2, Diego, y podemos ver +que no existe esta + +09:00.680 --> 09:05.160 +propiedad en esta instancia, porque a esta +instancia no se + +09:05.160 --> 09:06.320 +la +agregamos. + +09:06.320 --> 09:09.680 +Pero si buscamos en prototipo, aquí sigue +estando teléfono y + +09:09.680 --> 09:11.360 +aquí sigue estando +teléfono. + +09:11.360 --> 09:13.800 +Y ahora, si lo que queremos agregar, +por ejemplo, + +09:13.800 --> 09:17.280 +en la función constructora no es una +propiedad, sino un método, + +09:17.280 --> 09:19.680 +podemos ver que esta función constructora, +nosotros, + +09:19.680 --> 09:22.360 +no agregamos métodos, simplemente propiedades, + +09:22.360 --> 09:25.360 +pues la forma de hacerlo de igual forma va +a ser con el + +09:25.360 --> 09:26.280 +prototipo. + +09:26.280 --> 09:29.800 +Entonces, llegamos, mandamos llamar +nuestra función + +09:29.800 --> 09:32.880 +constructora de persona, utilizamos +nuestra palabra + +09:32.880 --> 09:35.280 +reservada de prototype, +punto. + +09:35.280 --> 09:38.320 +Y entonces, aquí vamos a construir una +función que se va + +09:38.320 --> 09:40.720 +a convertir en el +método. + +09:40.720 --> 09:43.880 +Saludar, que en este caso va a ser igual a +una función + +09:43.880 --> 09:44.380 +anónima. + +09:47.440 --> 09:49.960 +Y la estructura, esta ya la conocemos, + +09:49.960 --> 09:51.440 +cómo hacer las funciones +anónimas, + +09:51.440 --> 09:53.240 +cómo generar una +función. + +09:53.240 --> 09:58.240 +Vamos a poner un +console.log. + +09:58.240 --> 10:00.920 +Y aquí vamos a utilizar, por ejemplo, + +10:00.920 --> 10:05.080 +el nombre de cada una de las instancias +que estamos creando + +10:05.080 --> 10:07.240 +para que se imprima de forma independiente. + +10:07.240 --> 10:11.520 +Y entonces, vamos a utilizar nuestras +comillas para poder + +10:11.520 --> 10:12.800 +utilizar las +variables. + +10:12.800 --> 10:17.400 +Y entonces, aquí ponemos, hola, coma, +me llamo. + +10:17.400 --> 10:21.200 +Y entonces, vamos a poner +besitos, + +10:21.200 --> 10:23.080 +vamos a poner nuestros +corchetes. + +10:23.080 --> 10:25.520 +Y entonces, aquí vamos a utilizar el dis, + +10:25.520 --> 10:28.120 +porque el dis, recordemos, que hace +referencia a la función + +10:28.120 --> 10:34.040 +constructora misma para poder mandar +llamar el valor de la + +10:34.040 --> 10:36.160 +variable que estamos buscando en este momento. + +10:36.160 --> 10:41.160 +Entonces, sería +dis.nombre. + +10:41.160 --> 10:43.000 +Y vamos a también agregarle el apellido. + +10:45.800 --> 10:51.480 +Y sería +dis.apellido. + +10:51.480 --> 10:57.720 +Entonces, si guardamos aquí, si venimos acá, + +10:57.720 --> 11:01.000 +aquí de igual forma, pues no lo vamos a +ver visible en la + +11:01.000 --> 11:02.200 +función +constructora. + +11:02.200 --> 11:05.600 +Si abrimos el prototipo, podemos ver que +ya existe el método de + +11:05.600 --> 11:06.600 +saludar. + +11:06.600 --> 11:10.040 +Y la forma de ver si realmente lo tiene +cada una de nuestras + +11:10.040 --> 11:20.080 +instancias, pues es un, vamos a mandar +llamar persona1.saludar. + +11:20.080 --> 11:23.520 +Y +persona2.saludar. + +11:28.760 --> 11:32.440 +Entonces, si guardamos aquí, podemos ver +que de persona1 es, + +11:32.440 --> 11:33.680 +hola, me llamo Juan +Pérez. + +11:33.680 --> 11:50.720 +Y persona2, hola, me llamo Diego de Granda. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Resumen.html" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Resumen.html" new file mode 100644 index 0000000000000000000000000000000000000000..805427c5857a7e8327a96a2c61bf4b81578036cf --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/03-Resumen.html" @@ -0,0 +1,140 @@ + + + + + + + Función constructora y gestión de instancias en JavaScript + + + +
+
+

Resumen

¿Cómo podemos crear múltiples objetos en JavaScript de manera eficiente?

+

Cuando trabajamos con objetos en JavaScript, es común encontrarnos con la necesidad de crear múltiples instancias del mismo tipo de objeto, como podría ser una persona. En vez de copiar y pegar el mismo código repetidamente y modificarlo, podemos optar por un enfoque más eficiente y escalable utilizando funciones constructoras. Estas nos permiten definir una plantilla para un objeto, facilitando la creación de múltiples instancias.

+

¿Qué son las funciones constructoras y cómo se utilizan?

+

Una función constructora es una forma de crear múltiples objetos con estructura similar sin necesidad de duplicar código. La función constructora tiene ciertas peculiaridades:

+
    +
  • Nombre en mayúscula: Iniciamos el nombre de la función constructora con una letra mayúscula para indicar que esta función se utilizará para crear objetos.
  • +
  • Estructura como una función regular: Aunque tiene nombre específico, la estructura es similar a una función regular, pasando los datos necesarios como parámetros.
  • +
+

Veamos un ejemplo básico para construir un objeto "Persona":

+
function Persona(nombre, apellido, edad) {
+    this.nombre = nombre;
+    this.apellido = apellido;
+    this.edad = edad;
+}
+
+

Crear instancias con new

+

Para crear instancias de un objeto utilizando una función constructora, utilizamos la palabra clave new:

+
const persona1 = new Persona('Juan', 'Pérez', 30);
+const persona2 = new Persona('Diego', 'De Granda', 35);
+
+

Cada persona aquí es una instancia separada del objeto "Persona" con sus propios datos.

+

¿Cómo se pueden añadir propiedades o métodos adicionales?

+

Es posible que después de definir una función constructora, necesitemos añadir propiedades o métodos adicionales. Podemos hacerlo directamente en una instancia particular o utilizar el prototipo para afectar a todas las instancias.

+

Agregar propiedades individuales

+

Para añadir una propiedad a una instancia particular sin afectar a las demás, simplemente accedemos al objeto y añadimos la nueva propiedad:

+
persona1.nacionalidad = 'Mexicano';
+
+

Utilizar Prototype

+

Si deseamos agregar una propiedad o método a todas las instancias, lo hacemos a través del prototype:

+
Persona.prototype.telefono = '555-555-5555';
+
+Persona.prototype.saludar = function() {
+    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`);
+};
+
+

El método saludar ahora estará disponible para todas las instancias de Persona:

+
persona1.saludar(); // "Hola, me llamo Juan Pérez"
+persona2.saludar(); // "Hola, me llamo Diego De Granda"
+
+

¿Por qué usar funciones constructoras y el prototipo?

+
    +
  • Eficiencia: Las funciones constructoras evitan la repetición de código y permiten una construcción más rápida y limpia cuando se necesitan múltiples instancias.
  • +
  • Específicas: Al modificar el prototype, podemos añadir funcionalidades o propiedades que se apliquen globalmente a todas las instancias, manteniendo el código DRY (Don't Repeat Yourself).
  • +
  • Flexibilidad: Podemos tanto modificar instancias específicas como influir sobre todas a través del prototipo, ofreciendo un gran margen de personalización y manejo eficiente de las propiedades.
  • +
+

Este uso de funciones constructoras y prototipos es una práctica común en JavaScript, especialmente al manejar la creación de objetos dinámicos y masivos. Ahora que conoces estos fundamentos, te animo a seguir explorando y desarrollando tus habilidades con JavaScript. ¡La práctica constante es la clave para dominar cualquier tecnología!

+
+
+ + \ No newline at end of file diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.mp4" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..d486af15ab0ddebabedeb7a34ebe57868eafe415 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.mp4" @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:38b66525bce56af6eb79e35633e4355d8e1d6e83925fab4525181356bc0646b0 +size 40687964 diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.vtt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.vtt" new file mode 100644 index 0000000000000000000000000000000000000000..125fddeb4952beb04c0860efa72c81756a128337 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Clases en JavaScript Creaci\303\263n y Uso de Objetos con Sintaxis Moderna.vtt" @@ -0,0 +1,408 @@ +WEBVTT + +00:00.000 --> 00:04.760 +A partir de 2015, JavaScript presentó una +nueva forma de construir clases. + +00:04.760 --> 00:08.360 +Y no es algo completamente nuevo o +diferente de la forma en la que conocemos, + +00:08.360 --> 00:10.120 +que sería una función +constructora. + +00:10.120 --> 00:15.840 +Simplemente es una forma que se asemeja +mucho a otros lenguajes de programación, + +00:15.840 --> 00:20.280 +por ejemplo Java, que son lenguajes mucho +más orientados a objetos, + +00:20.280 --> 00:22.040 +reales orientados a +objetos. + +00:22.040 --> 00:25.560 +Podemos decir que una clase de esta nueva +estructura es un Sugar Syntax, + +00:25.560 --> 00:28.840 +en lo que ya nosotros conocemos para poder +generar objetos. + +00:28.840 --> 00:30.680 +Pero entonces, ¿qué es una +clase? + +00:30.680 --> 00:33.760 +Una clase es como si tuviéramos un Blueprint, + +00:33.760 --> 00:38.640 +que prácticamente es generar el molde del +cual se van a construir diferentes objetos. + +00:38.640 --> 00:42.720 +Vamos a pasar entonces a nuestro editor de +texto. + +00:42.720 --> 00:45.800 +Si estamos aquí, como te estaba comentando, + +00:45.800 --> 00:50.120 +una clase es prácticamente como un molde +que nosotros vamos a construir + +00:50.120 --> 00:52.280 +para poder crear nuevos +objetos. + +00:52.280 --> 00:55.800 +Es como una función constructora, pero con +una sintaxis distinta. + +00:55.800 --> 01:00.080 +Para poder comenzar con las clases, +nosotros vamos a utilizar una palabra reservada + +01:00.080 --> 01:02.320 +que se llama +class. + +01:02.320 --> 01:06.000 +Ahora esa es la palabra que utilizamos +para comenzar con las clases. + +01:06.000 --> 01:10.000 +Y similar a como se utiliza, por ejemplo, +con una función constructora, + +01:10.000 --> 01:12.800 +es el nombre de lo que va a ser nuestra clase. + +01:12.800 --> 01:18.360 +Iniciamos con una letra en mayúscula. + +01:18.360 --> 01:22.800 +Esta clase se va a llamar persona, porque +de aquí voy a construir más personas. + +01:22.800 --> 01:25.120 +Y ponemos nuestros +corchetes. + +01:25.120 --> 01:28.200 +Y ya que estamos acá, lo primero que +tenemos que hacer es + +01:28.200 --> 01:31.440 +vamos a sacar un método, que es un método +constructor. + +01:31.440 --> 01:37.080 +Que esto define cómo se deben configurar +las propiedades de este objeto. + +01:37.080 --> 01:42.200 +De los objetos que vengan de esta clase, +este método constructor + +01:42.200 --> 01:46.760 +va a definir cómo se deben de configurar +estas propiedades del objeto + +01:46.760 --> 01:50.040 +y puede recibir argumentos para +personalizar la iniciación. + +01:50.040 --> 01:53.240 +Quiere decir que, como es un método tipo +función, + +01:53.240 --> 01:59.000 +aquí voy a poner los argumentos que +requiero para poder formar mi persona. + +01:59.000 --> 02:03.680 +Que en este caso va a ser un nombre, +por ejemplo, y edad. + +02:03.680 --> 02:05.640 +Aquí lo +tengo. + +02:05.640 --> 02:11.320 +Entonces aquí voy a empezar a formar la +estructura de lo que va a generar mi + +02:11.320 --> 02:13.840 +clase, de cómo se va a crear mi clase. + +02:13.840 --> 02:17.000 +Y vamos a reutilizar esta palabra reservada, +this, + +02:17.000 --> 02:22.320 +que como platicábamos, this es una palabra +reservada que hace referencia + +02:22.320 --> 02:23.840 +a la misma +clase. + +02:23.840 --> 02:29.000 +Entonces, en este caso es this.nombre, +como el nombre de esta clase, + +02:29.000 --> 02:33.480 +en este caso es persona, va a ser igual a +el nombre que me pasen como + +02:33.480 --> 02:35.920 +parámetro. + +02:35.920 --> 02:36.840 +Perfecto. + +02:36.840 --> 02:37.800 +Punto y +coma. + +02:37.800 --> 02:39.440 +Y vamos a utilizar +edad. + +02:39.440 --> 02:43.320 +this.edad, que es la edad de esta clase, + +02:43.320 --> 02:47.520 +va a ser igual a edad que me pasen como +referencia una vez que yo genere + +02:47.520 --> 02:50.000 +la nueva +instancia. + +02:50.000 --> 02:53.640 +Porque vamos a utilizar al momento de +generar una nueva instancia, + +02:53.640 --> 02:57.120 +vamos a hacerlo como si fuera una función +que recibe dos parámetros. + +02:57.120 --> 03:01.480 +Y estos dos parámetros se van a convertir +en el valor de estas dos + +03:01.480 --> 03:04.760 +propiedades de la clase que estoy +construyendo en este momento. + +03:04.760 --> 03:07.560 +Y aquí, por ejemplo, si mi clase va a +llevar algún método, + +03:07.560 --> 03:11.400 +recordemos que estas son propiedades, +pero también puede llevar métodos. + +03:11.400 --> 03:13.760 +Vamos a poner +saludar. + +03:13.760 --> 03:17.640 +Entonces el método es como una función +adentro de un objeto. + +03:17.640 --> 03:22.400 +Y saludar lo que va a hacer es, nos va a +regresar un console.log, + +03:22.400 --> 03:30.000 +que a su vez nos va a imprimir, por ejemplo, +un hola, mi nombre es, + +03:30.000 --> 03:39.160 +y vamos a mandar llamar el valor de nombre, +de mi propiedad nombre, + +03:39.160 --> 03:40.160 +que sería +this.nombre. + +03:40.160 --> 03:49.560 +Y tengo nada más para, tengo un poco más +de información, + +03:49.560 --> 03:55.440 +tengo this.edad, +años. + +03:55.440 --> 03:57.480 +Listo con +eso. + +03:57.480 --> 04:00.600 +Entonces ya que tenemos aquí, este es un +Blueprints. + +04:00.600 --> 04:02.520 +Prácticamente eso nada más es un molde. + +04:02.520 --> 04:04.320 +Ahorita no va a ser +nada. + +04:04.320 --> 04:10.760 +Si yo mando llamar, por ejemplo, el método +de saludar de mi clase + +04:10.760 --> 04:13.880 +persona, pues va a haber un onDefine +porque no tengo nada + +04:13.880 --> 04:16.920 +definido, no hay valores aquí como definidos. + +04:16.920 --> 04:18.280 +Ese simplemente es un +molde. + +04:18.280 --> 04:21.480 +De aquí nosotros tenemos que empezar a +crear estas nuevas + +04:21.480 --> 04:24.040 +instancias de personas que nos van a +ayudar a tener la + +04:24.040 --> 04:27.200 +información suficiente para empezar a +darle valor a estas + +04:27.200 --> 04:28.520 +propiedades que tenemos +aquí. + +04:28.520 --> 04:29.600 +¿Cómo lo +haríamos? + +04:29.600 --> 04:34.800 +Bien, empezamos con una constante persona1 +igual a, + +04:34.800 --> 04:37.400 +utilizando la palabra reservada new, que new, + +04:37.400 --> 04:41.880 +y aquí mandamos llamar el nombre de +nuestra clase. + +04:41.880 --> 04:45.240 +New lo que hace es prácticamente va a +conectar, + +04:45.240 --> 04:49.360 +new va a mandar llamar a nuestra clase y +new va a conectar con + +04:49.360 --> 04:54.240 +el constructor para poder entonces +rellenar estas + +04:54.240 --> 04:57.360 +propiedades que tengo aquí con valores que +yo le vaya a pasar + +04:57.360 --> 05:00.800 +a la clase, que es la clase que estoy +formando. + +05:00.800 --> 05:03.560 +Entonces tenemos nombre y +edad. + +05:03.560 --> 05:11.320 +Va a ser Mariana y Mariana tiene 25 años. + +05:11.320 --> 05:13.520 +Aquí ya tenemos una nueva instancia. + +05:13.520 --> 05:15.480 +Que lo que estamos haciendo es, mi +instancia se llama + +05:15.480 --> 05:20.800 +persona1, estamos generando una nueva +instancia de mi clase + +05:20.800 --> 05:24.920 +persona y le estamos dando el valor a los +parámetros que me + +05:24.920 --> 05:29.160 +pide el constructor para que entonces +estas dos propiedades + +05:29.160 --> 05:30.080 +tengan un +valor. + +05:30.080 --> 05:33.040 +Y se puede utilizar en caso de que yo +mande llamar saludar. + +05:33.040 --> 05:36.360 +Que en este caso es justo lo que voy a hacer. + +05:36.360 --> 05:39.000 +Voy a mandar llamar persona1.saludar. + +05:45.600 --> 05:48.440 +Con esto si guardo, aquí ya tengo el +primer mensaje que + +05:48.440 --> 05:49.120 +está +imprimiendo. + +05:49.120 --> 05:52.440 +Es, hola, mi nombre es Mariana y tengo 25 +años. + +05:52.440 --> 05:55.320 +Esto viene de crear una primera instancia +con esta nueva + +05:55.320 --> 05:58.000 +sintaxis, que es la sintaxis de clase. + +05:58.000 --> 06:00.400 +De aquí en adelante, prácticamente todo lo +que vayas + +06:00.400 --> 06:03.520 +a hacer en temas de programación orientado +a objetos, + +06:03.520 --> 06:06.240 +vas a utilizar esta sintaxis, clases. + +06:06.240 --> 06:08.480 +Tienes tu constructor, tienes los métodos, + +06:08.480 --> 06:12.720 +tienes aquí prácticamente las propiedades +y los parámetros que + +06:12.720 --> 06:15.720 +se requieren para poder generar tus nuevas +instancias y tú + +06:15.720 --> 06:23.280 +vas a poder utilizar +después. + diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Lecturas recomendadas.txt" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Lecturas recomendadas.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0cf45bc41c7c80805a49f0cb0b053e7e2297c6c6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-Lecturas recomendadas.txt" @@ -0,0 +1 @@ +https://github.com/platzi/basico-js diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_36cbd56e-6114-4e82-92ba-c0c0792e2d31.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_36cbd56e-6114-4e82-92ba-c0c0792e2d31.js" new file mode 100644 index 0000000000000000000000000000000000000000..f2175bd58d53103fdae55c53d80ed65f3a7a21f6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_36cbd56e-6114-4e82-92ba-c0c0792e2d31.js" @@ -0,0 +1,13 @@ +class Persona { + constructor(nombre, edad) { + this.nombre = nombre; + this.edad = edad; + } + saludar() { + console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); + } +} + +const persona1 = new Persona("Mariana", 25); + +persona1.saludar(); diff --git "a/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_ddba79ea-e95d-4638-b3e0-7725876e1037.js" "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_ddba79ea-e95d-4638-b3e0-7725876e1037.js" new file mode 100644 index 0000000000000000000000000000000000000000..f2175bd58d53103fdae55c53d80ed65f3a7a21f6 --- /dev/null +++ "b/subir/Curso de Fundamentos de JavaScript/05-Programaci\303\263n Orientada a Objetos/04-index_ddba79ea-e95d-4638-b3e0-7725876e1037.js" @@ -0,0 +1,13 @@ +class Persona { + constructor(nombre, edad) { + this.nombre = nombre; + this.edad = edad; + } + saludar() { + console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); + } +} + +const persona1 = new Persona("Mariana", 25); + +persona1.saludar();