Upload via hfc (batch)

Uploaded using hfc tool

.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

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

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

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/03-Métodos 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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/03-Métodos 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.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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)

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/04-Métodos map y forEach en JavaScript Uso y Ejemplos Prácticos.mp4

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/04-Métodos map y forEach en JavaScript Uso y Ejemplos Prácticos.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.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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)

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/05-Métodos Filter y Reduce en JavaScript Uso y Ejemplos Prácticos.mp4

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/05-Métodos Filter y Reduce en JavaScript Uso y Ejemplos Prácticos.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.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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)

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/06-Métodos find y findIndex en JavaScript Uso y ejemplos prácticos.mp4

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/06-Métodos find y findIndex en JavaScript Uso y ejemplos prácticos.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.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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)

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/07-Uso del método 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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/07-Uso del método 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.
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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())

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

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinación y Más.mp4

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

subir/Curso de Fundamentos de JavaScript/04-Manipulación de Arrays/08-Uso del Spread Operator en JavaScript Copia Combinación y Más.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?
+

subir/Curso de Fundamentos de JavaScript/04-Manipulación 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)

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/01-Lecturas recomendadas.txt

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

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/01-Programación Orientada a Objetos en JavaScript Conceptos y Práctica.mp4

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

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/01-Programación Orientada a Objetos en JavaScript Conceptos y Práctica.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.
+

subir/Curso de Fundamentos de JavaScript/05-Programación 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());

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/02-Creación y Manipulación de Objetos en JavaScript.mp4

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

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/02-Creación y Manipulación 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.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/02-Lecturas recomendadas.txt

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

subir/Curso de Fundamentos de JavaScript/05-Programación 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());

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/03-Función constructora y gestión de instancias en JavaScript.mp4

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

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/03-Función constructora y gestión 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.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/04-Clases en JavaScript Creación 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

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/04-Clases en JavaScript Creación 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.
+

subir/Curso de Fundamentos de JavaScript/05-Programación Orientada a Objetos/04-Lecturas recomendadas.txt

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

subir/Curso de Fundamentos de JavaScript/05-Programación 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();