Playground - Crea tu propio método map

30 días de JavaScript

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

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Comentarios90

Leonardo de los angeles Espinoza Hernandez

Estudiante

Hace 3 años

🛡️🛡️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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

**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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

que interesante solucion

Isabelle de Souza

Estudiante

Hace 3 años

gracias! me encanto la solucion

willmar fernando romero marin

Estudiante

Hace 3 años

. . . . . . . . . . . . . . . . . . . . . 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

Estudiante

Hace 3 años

🛡️🛡️🛡️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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

Genial! siempre quise saber como funcionaba .map

Sebastian David Exeni Cazón

Estudiante

Hace 2 años

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

Estudiante

Hace 3 años

Anti-Spoiller Esta fue mi solución :)

Fernando Velasco

Estudiante

Hace 3 años

Mi solución:

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

Fernando Velasco

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Estudiante

Hace 3 años

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

Harrison Steve Pinzón Neira

Estudiante

Hace 3 años

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

Berny Alejandro Orozco Córdoba

Estudiante

Hace 3 años

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

Pablo Perez

Estudiante

Hace 3 años

Mi solución: 👀 👀 👀 👀 👀 👀

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

Julio Bastidas

Estudiante

Hace 3 años

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

Carina Payleman

Estudiante

Hace 3 años

. . . . . .

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) {
    const newArray = [];
    for (let i = 0; i < array.length; i++) {
        let resp = (func(array[i]));
        newArray.push(resp);
    };
    return newArray;
}

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  😅

Playground - Crea tu propio método map

¡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

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios