Playground - Crea tu propio método map

Cursos Empresas Blog Live Conf Precios

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 5 - Checkpoint

20
Playground - encuentra el palindromo más grande

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 15 - Checkpoint

50
Playground - Sistema de reservaciones de un hotel

Día 16

Día 17

Día 18

Día 19

Día 20 - Checkpoint

65
Playground - Agenda de vuelos

Día 21

Día 22

Día 23

Día 24 - Checkpoint

77
Playground - Crea un task manager con patrones de diseño

Día 25

Día 26

Día 27

Día 28

Día 29

Día 30

93
¡Lo lograste!
01:41 min

Live Class

Tomar examen

Playground - Crea tu propio método map

Comentarios

Leonardo de los angeles Espinoza Hernandez

student

🛡️🛡️Escudo anti-spoilers🛡️🛡️

/ Aprovechando el espacio dejame explicarte un poquito más acerca de las funciones puras como es este caso, la definición es un poco curiosa:

Una función pura es aquella que dado el mismo input, tendremos el mismo output

En palabras sencillas, una función que no modifica el input. / Lo siguiente no es un spoiler así que puedes seguir leyendo. / imaginemos que la función myMap modifica nuestro array, de tal manera que siempre tendremos un resultado diferente. Ejemplo

const array = [1,2,3,4,5]
myMap(array, (num) => num * 2)

console.log(array)
// Suponiendo que se modifica el array tendríamos [2,4,6,8,10]

// Lo volvemos a ejecutar
myMap(array, (num) => num * 2)

// Teniendo el mismo input estamos obteniendo un diferente output
console.log(array)
// en este caso, ahora sería [4,8,12,16,20]

La ventaja de las funciones de orden superior es básicamente eso, que no modifican el input (el array en este caso). Por lo que esta HOF siempre nos dará el mismo resultado dado el mismo input

const array = [1,2,3,4,5]
myMap(array, (num) => num * 2)
// Si no modificamos el array, la función siempre nos retornará [2,4,6,8,10]

console.log(array)
// Al no modificar el array, nos dará siempre lo mismo [1,2,3,4,5]

// Lo volvemos a ejecutar
myMap(array, (num) => num * 2)
// El resultado sigue siendo el mismo [2,4,6,8,10]

// Teniendo el mismo input estamos obteniendo un mismo output
console.log(array)
// en este caso, sigue siendo [1,2,3,4,5] (conserva su estado)

Ahora sí, los spoilers aquí abajo !capibara and turtle

Explicación de la solución

Aquí el código de solución

function myMap(array, func) {
  // Creamos el array que retornaremos
  // Inicialmente está vacío 
  const rta = [];
  for (let i = 0; i < array.length; i++) {
    // Luego iteramos por cada elemento del array
    const element = array[i];

    // Y lo vamos pasando al array vacío después de ejecutar 
    // la función sobre cada elemento del array
    rta.push(func(element));

    // Es importante recalcar que en ningún momento modificamos el array original 
  }

  // Al final lo retornamos
  return rta;
}

Y listo! Un par de lineas para resolver este ejercicio ¿Cómo te fue a ti?

Gilberto Espinoza Maciel

student

Me inspira que la diferencia entre tu código y el mío es que yo uso result = [] y tu rta = []. Es bueno saber que voy por el sendero que yo quiero aunque no tan rápido cómo quisiera.

Frandel Corporan Rodríguez

student

aqui lo mismo pero simplificado

function myMap(array, func) {
  let newArray = []
  for (let arr of array) newArray.push(func(arr))
  return newArray
}

Daniel Sebastián Rodríguez

student

Anti Spoiler

Mi solución

Utilizo un ciclo for para recorrer desde la posición 0 hasta la última posición del arreglo y en cada iteración ejecuto la función que llegó como parámetro y la guardo dentro de la posición correspondiente

export function myMap(array, func) {
  let nuevoArray = array
  for (let i = 0; i < nuevoArray.length; i++){
    nuevoArray[i] = func(nuevoArray[i])
  }
  return nuevoArray
}

Reynerio Hidalgo

student

**Alerta de spoiler **

export function myMap(array, func) {

  let arreglo = [];

  for (let i = 0; i < array.length; i++){
    arreglo[i] = func(array[i]);
  }

  return arreglo;
}

Lucas Frazzetta

student

Pensé que me iba a costar mucho pero pude hacerlo rápido :) Dejo mi solución . . . . . . . . . . . .

export function myMap(array, func) {
  // Tu código aquí 👈
  let newArray = [];
  for (let i = 0; i < array.length; i++) {
    const newElement = func(array[i]);
    newArray.push(newElement);
  }
  return newArray;
}

Maximiliano Santin

student

El objetivo de este desafío es crear una función myMap que recibe un array y una función, y devuelve un nuevo array con los elementos transformados por la función.

Para lograr esto, se puede utilizar una función de orden superior, en este caso reduce, para iterar sobre el array original y aplicar la función a cada elemento. En cada iteración, se puede agregar el resultado de la función transformada a un nuevo array que se devolverá al final.

Aquí está una posible solución:

export function myMap(array, func) {
  return array.reduce((acc, curr) => {
    acc.push(func(curr));
    return acc;
  }, []);
}

En esta solución, la función reduce se utiliza para iterar sobre el array original y aplicar la función func a cada elemento. En cada iteración, se agrega el resultado de la función transformada al array acc, que se inicializa como un array vacío []. Al final de la iteración, reduce devuelve el array acc, que contiene los elementos transformados.

Rahiber Paradas

student

que interesante solucion

Isabelle de Souza

student

gracias! me encanto la solucion

willmar fernando romero marin

student

. . . . . . . . . . . . . . . . . . . . . asi tambien funciono :), jujuju siento que voy entendiendo function myMap(array, func) { var data = []; array.forEach(e => data.push(func(e))) return data; }

David Ochoa

student

🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️

Crea tu propio método map

!Spoiler Shield

export function myMap(array, func) {
  // Tu código aquí 👈
  let result = [];
  for (let element of array) {
    result.push(func(element));
  }

  return result;
}

console.log(myMap([1, 2, 3, 4], (num) => num * 2));
console.log(
  myMap(
    [
      { name: "michi", age: 2 },
      { name: "firulais", age: 6 },
    ],
    (pet) => pet.name
  )
);

Carlos Mauricio Ospino Monsalve

student

Mi solución, sin uso de metodos del Array, y funciona en Arrays de multiples dimensiones. Puro código vanilla.

export function myMap(array, func) {
    let newList = [];
    for ( let position = 0; position < array.length;  position++){
        const element = array[position];
        if (func(element)){
            newList[position] = func(element);
            continue;
        }
        newList[position] = myMap(element, func);
    }
    return newList;
}

Juan Camilo Noreña López

student

Genial! siempre quise saber como funcionaba .map

Sebastian David Exeni Cazón

student

Mi solución xD:

export function myMap(array, func) {
  // Tu código aquí 👈
  let newArray = [];
  array.forEach(elemento => newArray.push(func(elemento)));
  return newArray;
}

Joan Alexander Valerio Rodríguez

student

Anti-Spoiller Esta fue mi solución :)

Fernando Velasco

student

Mi solución:

export function myMap(array, func) {
  array.forEach((value, i, arr) => {
    arr[i] = func(value);
  });
  return array;
}

Fernando Velasco

student

Un simple for sobre el mismo array o for-of loop hubiera sido suficiente y más eficiente, pero al menos ahora conozco otros usos de la función forEach(). OJO, si bien esta solución pasa las pruebas, no cumple con el concepto de High Order Function, al modificar el mismo array se crea un closure, por lo que si vuelves a ejecutarlo la función del parámetro se aplica otra vez sobre los elementos previamente modificados. Podrían añadir una prueba más para ejecutar la función más de una vez y que siempre retorne el mismo resultado.

Manuel Rincon

student

buen día; les comparto mi solución

function myMap(array, func) {
    const newArray = [];
    for (let i = 0; i < array.length; i++) {
        let resp = (func(array[i]));
        newArray.push(resp);
    };
    return newArray;
}

Ricardo Alfonso Chavez Vilcapoma

student

ALTO AHÍ, NO TE SPOILEES

PERO YA QUE INSISTES 🤷‍♂️

function myMap(array, func) {
  let arrayMap = [];
  for (let element of array) {
    arrayMap.push(func(element));
  }
  return arrayMap;
}```

Fue el más fácil luego del ejercicio de retornar el typeof  😅

Cristian Canto Bueno

student

Bueno debo confesar que me costo pero la satisfacción es muy grande cuando lo consigues desarrollar.

Harrison Steve Pinzón Neira

student

Solución ! . . . . . . . . .

Berny Alejandro Orozco Córdoba

student

Es extraño, ni siquiera la propia solución propuesta pasa la quinta prueba

Pablo Perez

student

Mi solución: 👀 👀 👀 👀 👀 👀

export function myMap2(array, func) {
  const newArray = []
  array.forEach(e=>newArray.push(func(e)))
  return newArray
}

Julio Bastidas

student

export function myMap(array, func) {
  // Tu código aquí 👈
  let nuevoArray = [];
  array.forEach(item => {
    nuevoArray.push(func(item));
  });
  return nuevoArray;
}

Carina Payleman

student

. . . . . .

export function myMap(array, func) {
    let output = [];
    for (let i of array) {
      output.push(func(i));
    }
    return output;
}

const array = [1,2,3,4,5]
myMap(array, (num) => num * 2)

console.log(array)
// Suponiendo que se modifica el array tendríamos [2,4,6,8,10]

// Lo volvemos a ejecutar
myMap(array, (num) => num * 2)

// Teniendo el mismo input estamos obteniendo un diferente output
console.log(array)
// en este caso, ahora sería [4,8,12,16,20]

const array = [1,2,3,4,5]
myMap(array, (num) => num * 2)
// Si no modificamos el array, la función siempre nos retornará [2,4,6,8,10]

console.log(array)
// Al no modificar el array, nos dará siempre lo mismo [1,2,3,4,5]

// Lo volvemos a ejecutar
myMap(array, (num) => num * 2)
// El resultado sigue siendo el mismo [2,4,6,8,10]

// Teniendo el mismo input estamos obteniendo un mismo output
console.log(array)
// en este caso, sigue siendo [1,2,3,4,5] (conserva su estado)

function myMap(array, func) {
  // Creamos el array que retornaremos
  // Inicialmente está vacío 
  const rta = [];
  for (let i = 0; i < array.length; i++) {
    // Luego iteramos por cada elemento del array
    const element = array[i];

    // Y lo vamos pasando al array vacío después de ejecutar 
    // la función sobre cada elemento del array
    rta.push(func(element));

    // Es importante recalcar que en ningún momento modificamos el array original 
  }

  // Al final lo retornamos
  return rta;
}

export function myMap(array, func) {
  // Tu código aquí 👈
  let newArray = [];
  for (let i = 0; i < array.length; i++) {
    const newElement = func(array[i]);
    newArray.push(newElement);
  }
  return newArray;
}

export function myMap(array, func) {
  // Tu código aquí 👈
  let result = [];
  for (let element of array) {
    result.push(func(element));
  }

  return result;
}

console.log(myMap([1, 2, 3, 4], (num) => num * 2));
console.log(
  myMap(
    [
      { name: "michi", age: 2 },
      { name: "firulais", age: 6 },
    ],
    (pet) => pet.name
  )
);

export function myMap(array, func) {
    let newList = [];
    for ( let position = 0; position < array.length;  position++){
        const element = array[position];
        if (func(element)){
            newList[position] = func(element);
            continue;
        }
        newList[position] = myMap(element, func);
    }
    return newList;
}  

function myMap(array, func) {
  let arrayMap = [];
  for (let element of array) {
    arrayMap.push(func(element));
  }
  return arrayMap;
}```

Fue el más fácil luego del ejercicio de retornar el typeof  😅

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions