Intenten utilizar console.table() en lugar de console.log para imprimir sus objetos 😉
Introducción al curso
¡Alto! Tenemos una nueva versión de este curso para ti
Bienvenidos al Curso de Fundamentos de JavaScript
Repositorio de este curso de fundamentos de JS
Primeros pasos en JavaScript
Variables
Variables: Strings
Variables: Números
Funciones
El alcance de las funciones
Objetos
Desestructurar objetos
Parámetros como referencia o como valor
Comparaciones en JavaScript
Estructuras de Control y Funciones
Condicionales
Funciones que retornan valores
Arrow functions
Estructuras repetitivas: for
Estructuras repetitivas: while
Estructuras repetitivas: do-while
Condicional múltiple: switch
Arrays
Introducción a arrays
Filtrar un array
Transformar un array
Reducir un array a un valor
Programación Orientada a Objetos en JavaScript
Cómo funcionan las clases en JavaScript
Modificando un prototipo
El contexto de las funciones: quién es this
La verdad oculta sobre las clases en JavaScript
Clases en JavaScript
Asincronismo
Funciones como parámetros
Cómo funciona el asincronismo en JavaScript
Cómo funciona el tiempo en JavaScript
¿Qué pasó con swapi.co?
Callbacks
Haciendo múltiples requests
Manejando el Orden y el Asincronismo en JavaScript
Manejo de errores con callbacks
Promesas
Promesas Encadenadas
Múltiples promesas en paralelo
Async-await: lo último en asincronismo
Juego de HTML
Comenzando el juego
Generando una secuencia de números
Iluminando la secuencia de colores
Obteniendo el input del usuario
Agregando la verificación del color elegido
Agregando los estados finales del juego
Conclusiones del curso
Complementos
Diferencias entre var, let y const
Memoización: ahorrando cómputo
¿Hace cuántos días naciste?
Funciones recursivas
Entiende los closures de JavaScript
Estructuras de datos inmutables
Cambiando de contexto al llamar a una función
¿Cuándo hace falta poner el punto y coma al final de la línea?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
En esta clase veremos cómo transformar un array. El método map() itera sobre los elementos de un array en el orden de inserción y devuelve array nuevo con los elementos modificados.
Aportes 281
Preguntas 49
Intenten utilizar console.table() en lugar de console.log para imprimir sus objetos 😉
Las diferencia entre filter() y map() radica en sus callbacks, o sea en lo que retornan.
filter(): retornará 1 subconjunto de un Array.
map(): retornará un nuevo Array basándose en otro de referencia.
Todo súper resumido. 😃
Hice un arreglo en el que se agrega una propiedad clasificación dependiendo de si es alta o no la persona.
Mi código:
El resultado:
Les dejo una imagen que me paso un amigo y me ayudo a comprender los métodos.
Transformar un array
Ahora digamos que como entrenador medí la fuerza y rapidez de mi equipo,
y me di cuenta que los jugadores menores de 16 años y 1.7 son una partida de debiluchos y quiero darles una posición secreta como en Space Jam 😄
aca los apuntes de la clase
TRANSFORMAR UN ARRAY
En esta clase vamos a profundizar acerca de la función map, la función “map” a diferencia de filter lo que va a hacer devolvernos un nuevo array en el cual va a modificar cada uno de los elementos que le vayamos pasando del array original, con ello vamos a pasar la altura de las personas como están de metros a centímetros.
Y lo haremos de la siguiente manera:
const pasarAlturaACms = persona => {
persona.altura *= 100
return persona
}
var personasCms = personas.map(pasarAlturaACms)
console.log(personasCms)
Al hacer esto map nos pasara la altura de las personas convertida a centímetros, pero. que pasa con el array personas? La respuesta es que también cambia, si lo revisas en la consola del navegador, veras que está en centímetros y esto es un inconveniente, por lo que;
const pasarAlturaACms = persona => {
return {
...persona,
altura: persona.altura * 100
}
}
Al hacer esto, le estamos diciendo que queremos pasar la altura a centímetros sin modificar el array original, sino que nos retorne un array nuevo, con la altura modificada, puesto que estamos desglosando la persona y pisamos el valor de su altura abajo.
Por lo que, al crear este array nuevo, el mismo estará en otro espacio de la memoria RAM, a parte del original por lo que al hacer el cambio, como vimos en clases pasadas, no cambia los tributos del array original.
Podemos comparar, en la consola
Personas[0] === personasCms [0]
Nos dira false porque son datos en espacios de memoria RAM distintos, por lo que si cambiamos la clave de uno no cambia la clave del otro, ejemplo;
Cambiemos en la consola el nombre de angel a pablo con;
Personas[0].nombre = ‘pablo’
Al escribir “personas[0]” nos mostrara que el nombre del primer objeto ha cambiado, por el mismo principio antes explicado.
Ahora otra cosa a tener en cuenta es que existe una forma de hacer que el arrow function retorne el array, escribiéndolo con otra nomenclatura;
const pasarAlturaACms = persona => ({
...persona,
altura:persona.altura * 100
})
Si lo escribimos de esta manera, iniciando el paréntesis luego del arrow, encerramos la funcion entre llaves, haremos que el arrow function nos retorne el array automáticamente y queda mas prolijo de esta manera
a alguien mas le pasa que ven platzi como si fuera una serie de netflix no pueden parar de ver cada clase xD
En la clase el profesor hizo uso del Spread Operator u Operador de propagación que es cuando le pone los tres puntos a persona (…persona), aquí dejo el enlace de la MDN para saber más sobre el tema.
Spread-operator
Para todos aquellos que quieran profundizar un poco de esta funcion de map, pueden visitar este enlace de developer mozilla, que nos describe muy bien con ejemplos como se comporta esta funcion, es un buen complemento a la explicacion de el gran profesor Sacha.
Pulsa aqui
Les aconsejo aprender esto muy bien. Actualmente estoy retrocediendo a esta clase, por no aprender estos conceptos perfectamente. En muchos casos en tu vida profesional, tendrás que trabajar con una API la cual tiene JSONs y estos no son mas que un Array de Objetos, por tal importancia les aconsejo fundamentar bien todo los metodos que tengan que ver con Arrays y mas con Arrays de objetos. Animo!
Cuál sería la diferencia entre map, foreach y for in?
Dejo la explicación de por qué se debe encerrar entre () el cuerpo de la función para retornar objetos literales.
JS lee lo que esta entre { }
como el cuerpo de la función, donde _altura_
hace referencia a una etiqueta y no a un atributo de un objeto. Una etiqueta (label) es un identificador hacia una sentencia de código, que le indica al programa, al encontrarse con un break o continue, donde debe continuar su ejecución.
Este es un ejemplo del uso de la etiqueta
Su uso es similar al _jump _en ensamblador o al _goto _en lenguajes como C o C++
Usar etiquetas puede considerarse una mala practica, ya que ‘rompe’ con el seguimiento lógico del programa
Me da mucho gusto aprender cosas nuevas.
Fui desarrollador web hace más de 10 años y ECMAScript 6 es nuevo para mi. con ES6 se logra mucho sin usar librerías.
no había map, filter, arrow functions, spread ni muchas otras funciones super útiles, todo se resolvía con librerías: salve jquery.
el tiempo cambio y JS también lo hizo.
Con un poco de Stackoverflow, hice un script que consulta los precios en un reconocido hipermercado Colombiano y evalúa si el producto aplica descuento del día sin IVA y devuelve un array con los objetos y el precio sin IVA calculado.
Solo debes pegarlo en la consola y ejecutarlo.
PD1: El hipermecado que comienza por Al y termina por Kosto.
PD2: Se puede mejorar MUCHO
PD3: Los reto a replicarlo para otras tiendas y compartirlo
//defino las constantes globales,
var LIMITE_IVA = 2800000
var IVA = 1.19
// busco los equipos en la lista html
listaNodos = document.querySelectorAll(".products-grid .item")
//querySelectorAll retorna un node list. con Spread lo comvertimos en array
arrayNodos = [...listaNodos]
//funcion que convierte de elemento DOM a un objeto javascript personalizado
HTMLaObjeto = elementoHTML => {
//es mejor pedir perdon que pedir permiso
try{
objeto = {
titulo : elementoHTML.querySelector("h2").textContent.replace(/\s+/g,' '),
precio : parseInt(elementoHTML.querySelector("span > span.price").textContent.replace(/\W/g, '')),
url : elementoHTML.querySelector("h2 a").href
}
if(objeto.precio < LIMITE_IVA ){
return {... objeto, sin_iva: Math.round(objeto.precio /IVA, 2 ) }
}
}
catch(e){}
}
//convierto el array..
filtrados = arrayNodos.map(HTMLaObjeto)
//elimino los objetos que no cumplieron las condiciones en HTMLaObjeto
//esto se puede mejorar
filtrados = filtrados.filter(objeto => objeto !== undefined)
//console.log fue deshabilitado por la tienda. por suerte se puede imprimir el objeto simplemente escribiendo su nombre.
clear() //limpia la consola
filtrados
Se que es mucha información para los más nuevos pero vale la pena intentarlo.

);
.map() Siempre nos devuelve un nuevo array.
No les parece mas complicado remover palabras clave para hacer menos codigo pero es mas difícil la lectura?
casi nunca aplico los mismos nombres de Sasha a las variables. porque siempre escribir persona muchas veces me confunde. aqui mi manera de ahcerlo
var gente = [alan, martin, dario, vicky, paula, miguel,andre]
const pasarAlturaACms = parametro =>({
... parametro,
altura: parametro.altura * 100
})
var alturaEnCms = gente.map(pasarAlturaACms)
console.log(alturaEnCms)
console.log(gente)
Dejo en link a un video nuevo de sacha en YOU TUBE para qeu comprenda mejor estos 3 metodos de Array:
https://www.youtube.com/watch?v=tP8JiVUiyDo
Chavos les comparto una duda que tenia acerca del porque dentro de los metodos filter y map llamabamos las funciones sin parentesis y que pasa si las llamamos con parentesis:
En terminos resumidos, estos metodos si o si reciben una funcion, es por eso que si llamamos la funcion con parentesis nos tiraria error, ya que estariamos trayendo el valor de retorno de dicha funcion, por lo tanto, al metodo le estariamos mandando un valor como parametro, y no una funcion que es lo que realmente necesita. 👍
Se que ya no estas aqui en Platzi, que lamentable por cierto me parece que eras excelente 😦. Pero de igual manera, lo digo para que no se confundan, si no me equivoco incluso esto ya lo habias explicado previamente pero en el minuto 5:15 mencionas que:
personas[0] === personasCms[0]
//false
Si bien, estas en lo correcto aunque tuvieran todos los valores exactamente iguales seguiria retornando falso ya que apuntan a distintas direcciones en memoria. Un saludo.
personasCms[0].altura = personas[0].altura
personas[0] === personasCms[0]
//Seguiria retornando false
Map permite modificar o transformar los atributos de los objetos que componen un array.
var personaCms = personas.map(alturaCms)
Esta forma va a afectar el array original:
const alturaCms = persona => {
persona.altura *= 100
}
Esta forma va a devolver un array completamente nuevo a la variable “personaCms”, lo que deja intacto el array original:
const alturaCms = persona => {
return {
...persona,
altura: persona.altura * 100
}
}
Los paréntesis indican que la función únicamente retorna un objeto.
const alturaCms = persona => ({
...persona,
altura: persona.altura * 100
})
Mis Apuntes
// MAP a diferencia de Filter devuelve un "nuevo array"
// en el cual se va modificar c/u de los elementos del array
// original
// Declarmos funcion "pasarAlturaCms"
const pasarAlturaCms = persona => ({
...persona,
altura: persona.altura * 100
})
// Usamos MAP
var personaCms = personas.map(pasarAlturaCms);
// Mostramos resultado
console.log(personaCms);
hola! quería preguntar porque cuando usamos el operador " *= " en persona.altura, la iteracion del .map modifica también el objeto Persona pero cuando usamos solo " * " el objeto Persona no modifica sus atributos y solo lo hace para el nuevo objeto que retorna
const alturaACms = persona =>{
return{
...persona,
altura: persona.altura * 100
}```
Por que la gente repite como loros lo que vamos a ver o las frases textuales que dice el profe en comentarios? es por los puntos?
console.table(personas)
Se ven bonitas
Sin complicarse mucho con el tema de objetos, esto es lo que hace Map “Crear un nuevo array a partir de modificar los elementos de otro”
const ELEVAR_AL_CUBO = num => num*num*num
const numeros_originales = [1,2,3,4,5]
const numeros_al_cubo = numeros_originales.map(ELEVAR_AL_CUBO)
// numeros_al_cubo = [1,8,27,64,125]
Un aporte que hago es sobre la sintaxis u operador spread (desglosar) que usa Sacha en el video, que son los tres puntos (…)
La sintaxis extendida o spread syntax permite a un elemento iterable (array o cadena) ser expandido en lugares donde cero o más argumentos (en caso de funciones) o elementos (para Array literales) son esperados.
Podemos usarlo para desglosar un objeto (como ocurre en el video) así:
function miFuncion(persona){
return {
...persona,
altura: persona.altura * 1.2,
edad: persona.edad++
}
}
Los tres puntos también se usan con un operador que actúa de manera inversa y es el operador rest que en vez de desglosar, agrupa elementos:
Se utiliza por ejemplo en funciones donde los argumentos que se pasan son variables, de esta manera:
function sumar(...loQueSumamos) {
return loQueSumamos.reduce((previous, current) => {
return previous + current;
});
}
console.log(sumar(1, 2, 3));
// salida: 6
console.log(sumar(1, 2, 3, 8, 10));
// salida: 24
Espero sirva la info! saludos a todos!
Así me quedó el código de la clase, traté de simplificarlo un poquito más:
var personas = [sacha, alan, martin, dario, vicky, paula];
const personasEnCM = personas.map(persona => ({
...personas,
altura: persona.altura * 100
}));
console.table(personasEnCM);
console.table(personas);
Espero les sea util
Estaba tomando la clase sin leer los aportes, no haga eso, los aportes son una gran ayuda de las mentes inquietas que estudian en Platzi 😉
let sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
altura: 1.72
}
let alan = {
nombre: 'Alan',
apellido: 'Perez',
altura: 1.86
}
let martin = {
nombre: 'Martin',
apellido: 'Gomez',
altura: 1.85
}
let dario = {
nombre: 'Dario',
apellido: 'Juarez',
altura: 1.71
}
let vicky = {
nombre: 'Vicky',
apellido: 'Zapata',
altura: 1.56
}
let paula = {
nombre: 'Paula',
apellido: 'Barros',
altura: 1.76
}
let personas = [
sacha,
alan,
martin,
dario,
vicky,
paula
]
const pasarAlturaCms = persona => {
let enCentímetros = persona.altura * 100
return {
...persona,
altura: enCentímetros
}
}
let personasEnCms = personas.map(pasarAlturaCms)
console.log('Personas en metros: ');
console.table(personas);
console.log('Personas en centímetros: ');
console.table(personasEnCms);```
Mi entendimiento
const pasarAlturaCms = (persona) => {
return {
//para no modificar el array original se retorna un nuevo objeto
...persona, // con la persona desglozada
altura: persona.altura * 100, //pizando el atributo altura con la operacion deseada sin el =
};
};
//otra forma de hacer mas prolijo es:
const pasarAlturaMms = (persona) => ({
...persona,
altura: persona.altura * 1000,
});
var personasCms = personas.map(pasarAlturaCms);
var personasMms = personas.map(pasarAlturaMms);
console.table(personasCms);
console.table(personasMms);
console.table(personas);
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
tengo una pregunta. ¿qué es exactamente map?
Con el siguiente código tamben se evita el problema de que el array original (en este caso “personas”) se modifique al realizar el mapeo.
var paula = {
id: 1,
nombre: 'Anne',
apellido: 'Font',
edad: 33,
altura: 1.75
}
var patricio = {
id: 2,
nombre: 'Patricio',
apellido: 'Santillan',
edad: 23,
altura: 1.95
}
var judit = {
id: 3,
nombre: 'Judit',
apellido: 'Aguirre',
edad: 53,
altura: 1.55
}
var nicolas = {
id: 4,
nombre: 'Nicolas',
apellido: 'Otamendi',
edad: 37,
altura: 2.02
}
const MAYOR = 30
const FACTOR = 100
const convertir = ({altura}) => altura *= FACTOR
//uso de MAP. Vamos a pasar de metros a cm en la altura
var personas = [paula, patricio, judit, nicolas]
var personas_cm = personas.map(convertir)
console.log(personas_cm);
//---------------------------------
// Transformar un Array
// funcion map
//definir varias variables
var claudia = {
nombre: ‘Claudia’,
apellido: ‘Aparicio’,
altura: 1.70
}
var alan = {
nombre: ‘Alan’,
apellido: ‘Perez’,
altura: 1.86
}
var martin = {
nombre: ‘Martin’,
apellido: ‘Gomez’,
altura: 1.85
}
var fernando = {
nombre: ‘Fernando’,
apellido: ‘Mendoza’,
altura: 1.80
}
//agrupar a estas personas en una coleccion:
//corchetes para indicar que es un array
var personas = [claudia, alan, martin, fernando]
//definir funcion para pasar altura de metros a centimetros
const pasaralturaacms = persona => ({
return { // con este return se crea un nuevo objeto sin afectar el original (persona)
…persona,
altura: persona.altura *= 100 //sirve para multiplicar la altura * 100
}
})
var personascms = personas.map(pasaralturaacms)
console.log(personascms)
RESUMEN DE LA CLASE
// RESUMEN DE LA CLASE : 'Transformar Array'
// - Tomaremos como referencia el codigo de la clase anterior :
var fernando = {
nombre:'Fernando',
apellido:'Huaman',
altura:1.68
}
var gabriel = {
nombre:'Gabriel',
apellido:'Gonzalez',
altura:1.81
}
var homero = {
nombre:'Homero',
apellido:'Simpsoms',
altura:1.5
}
var italo = {
nombre:'Italo',
apellido:'Rodriguez',
altura:1.9
}
var personas = [fernando,gabriel,homero,italo]
// - Lo que se quiere en esta clase es transformar la altura de las personas de
// metros a centimetros.
//
// - Para lo cual nos ayudaremos de la funcion 'map' que nos permites cambiar
// valores de array orginal y almacenarlo en un nuevo array. Esta funcion 'map'
// tiene como estructura -----> var Nuevo_Array = Array_Original.map(funcion)
//
// - Primero lo que aremos sera definir la funcion que nos permitira cambiar
// la atura de metros a centimetros.
//
// ---> PRIMER CASO:
//
// const pasarAlturaACms = (persona) => {
// persona.altura *= 100
// return persona
// }
//
// - El problema con este caso es que el cambio de valor se realizara tanto
// en el array Array_Original como en el Nuevo_Array.
// - Si queremos arreglar este problema lo que se tendria que hacer es crear
// un nuevo objeto.
//
//
// ---> SEGUNDO CASO:
// const pasarAlturaACms = (persona) => {
// return {
// ...persona,
// altura: persona.altura * 100
// }
// }
// - Con este caso arreglamos el problema anterior y entonces tanto el
// Array_Original y el Nuevo_Array son independientes pero que tienen Los
// mismos atributos.
//
// ---> TERCER CASO:
// - Si queremos una forma mas abreviada , entonces tenemos este caso que
// consiste en omitir el 'return' y sus '{}' y que el resto del, cuerpo
// de la funcion junto con sus '{}' vayan entre parentesis ().
//
const pasarAlturaACms = (persona) => ({
...persona,
altura: persona.altura*100
})
// Aqui ell Nuevo_Array que se llama personasCms
var personasCms = personas.map(pasarAlturaACms)
console.log(personasCms)
Muy buena la funcionalidad de map, yo matándome con for in of … jajaja
Aquí la versión con enteros:
var array1 = [1,2,3,4,5,6,7,8,9,0]
const inc6pcs = arrayNum => arrayNum + 6
var arrayNew = array1.map(inc6pcs)
console.log(arrayNew)
const ESTATURA = 1.70;
const personasAltas = Personas.filter(( {altura} ) => altura >= ESTATURA);
const personasBajas = Personas.filter(( {altura} ) => altura < ESTATURA);
const personasCms = Personas.map( personas => ({ ...personas, altura: personas.altura * 100 }));
console.log(personasAltas);
console.log(personasBajas);
console.log(personasCms);
Dejo como quedo mi práctica por si alguien quiere comprar algo:
var sacha = {
nombre: 'Sacha',
apellido: 'Lidszyx',
altura: 1.72
}
var alan = {
nombre: 'Alan',
apellido:'Perez',
altura: 1.86
}
var martin = {
nombre: 'Martin',
apellido: 'Gomez',
altura : 1.85
}
var dario = {
nombre: 'Dario',
apellido: 'Lifszyc',
altura: 1.71
}
var vicky = {
nombre: 'Vicky',
apellido: 'Zapata',
altura: 1.56
}
var paula = {
nombre: 'Paula',
apellido: 'Baros',
altura: 1.76
}
var personas = [ sacha, alan, martin, dario, vicky, paula];
// const pasarAlturaAcms = persona => {
// persona.altura *= 100; // aca modificamos la altura en
// return persona; // el objeto original
// }
// a continuación desglosamos el objeto
// const pasarAlturaAcms = persona => {
// return {
// ...persona,
// altura: persona.altura * 100
// }
// }
// rtetornamos el obejo directyamente mediante los parentesis y lalves
const pasarAlturaAcms = persona => ({
...persona,
altura: persona.altura * 100
})
var personasEnCMS = personas.map(pasarAlturaAcms);
console.log(personasEnCMS);
for (var i = 0; i < personasEnCMS.length; i++) {
persona = personasEnCMS[i];
console.log(`${persona.nombre} mide ${persona.altura} cms.`);
}```
.MAP siempre nos devuelve un nuevo array pero modificado.!
Otro ejemplo envolviendo las llaves entre paréntesis para indicar que se devuelve un nuevo objeto y no que se trata del cuerpo de la función:
.
Agregue un for al nuevo array para imprimir los objetos con su altura en cms.
const pasarAlturaACms = persona => ({
...persona,
altura: persona.altura * 100
})
var personasCms = personas.map(pasarAlturaACms);
for(var i in personasCms){
console.log(`${personasCms[i].nombre} mide ${personasCms[i].altura} cm`)
}
Hola Chicos Saludos.
Considero que fue un poco enredado.
Me costo aprenderlo por el orden de las líneas yo use este orden y me parece que no afecta en nada, y da el mismo resultado.
var personas = [holman, pacho, fabio, david, andres, raul]
const esAlta = personas => personas.altura > 160
var Altos = personas.filter(esAlta)
console.log(Altos)
En los arrays encontramos el método de map() que permite iterar sobre los elementos de un array pero se diferencia de filter() en que crea otra array a partir del mismo array
var numArray = [1,2,3,4,5,6,7,8,9,10]
var numArray2 = numArray.map(current => current*2)
console.log("numArray => ", numArray)
console.log("numArray2 => ", numArray2)
En nuestro ejemplo usamos map para pasar de metros a centímetros la altura así
declaramos la variable que recibirá el nuevo arreglo usando maps
var personasCms= personas.map(pasarAlturaACms)
aquí en una función ejecutaremos el procedimiento de pasar de metros a centímetros
const pasarAlturaACms = persona =>({
...persona,
altura:persona.altura*100
})
Devuelve a través de una arrow function un nuevo objeto para así evitar modifcar el objeto principal que es personas
Creo que hay 4 tipos de estudiantes:
Los que ven una clase nueva y dicen ya está, lo entendí y pasan a la siguiente clase.
Los que ven la clase y la hacen por su cuenta en su pc
Los que además de hacer lo de 2., hacen un ejercicio similar aplicando lo de la clase.
Los que, además de hacer lo del 3., se toman el tiempo de compartirlo.
<<< Adivinen quién aprende más >>>
P.S. Los personas superdotadas(genios) del 1. no sirven para este ejemplo 😂.
Añadí una lista más con las personas altas mostradas en cms y las muestro como un array en disposición de una tabla de datos con console.table():
var personas =
[
gonzalo = {
nombre: "Gonzalo",
apellido: "Vidal",
altura: 1.75
},
sebastian = {
nombre: "Sebastian",
apellido: "Rodriguez",
altura: 1.65
},
carla= {
nombre: "Carla",
apellido: "Paredes",
altura: 1.80
}
]
const esAlta = persona => persona.altura >= 1.75;
var personasAltas = personas.filter(esAlta);
console.log(`Las personas altas son: `);
console.table(personasAltas);
const pasarAlturaACms = personas => ({
...personas,
altura: personas.altura*100
})
var personasCms = personas.map(pasarAlturaACms)
console.log(`Personas en cms:`);
console.table(personasCms);
var personasAltasCms = personasAltas.map(pasarAlturaACms)
console.log(`Personas altas en cms:`);
console.table(personasAltasCms);
var sasha = {
nombre: 'Sasha',
apellido: 'Lifszyc',
altura: 1.56
}
var dario = {
nombre: 'Dario',
apellido: 'Susnisky',
altura: 1.78
}
var pepe = {
nombre: 'Pepe',
apellido: 'Perez',
altura: 1.45
}
var juan = {
nombre: 'Juan',
apellido: 'Gomez',
altura: 1.90
}
//Filtrar se necesita un array y una condicion
var personas = [sasha, dario, pepe, juan]
const ES_ALTA = (personas) => personas.altura > 1.8
const ES_BAJA = (personas) => personas.altura <= 1.8
var personasAltas = personas.filter(ES_ALTA)
var personasBajas = personas.filter(ES_BAJA)
const PASAR_ALTURA_A_CMS = persona => {
return {
...persona,
altura: persona.altura * 100
}
}
/*const PASAR_ALTURA_A_CMS = persona => ({
...persona,
altura: persona.altura * 100
})*/
//Transforma el array
var personasCms = personas.map(PASAR_ALTURA_A_CMS)
console.log(personasCms)
console.log(personas)
//aqui con un array
var numeros = [1, 5, 10, 15];
//creamos un array apartir de numeros, los cuales seran el doble
var numerosDobles = numeros.map(function(x) {
return x * 2;
});
console.log(numerosDobles);
// 😃
Muy buena clase. Dejo un video sobre el Spread Operator que encontré en youtube para los que no lo entendieron bien (https://www.youtube.com/watch?v=gFvWNjVy-wc)
function convertirAMts (persona)
{
return {
...persona,
altura: persona.altura / 100
}
}
var sacha = {
nombre: "Sacha",
apellido: "Lifszyc",
altura: 178
}
var alan = {
nombre: "Alan",
apellido: "Fernandez",
altura: 177
}
var martin = {
nombre: "Martín",
apellido: "Rojas",
altura: 180
}
var dario = {
nombre: "Darío",
apellido: "Lopez",
altura: 158
}
var vicky = {
nombre: "Vicky",
apellido: "De la Cruz",
altura:193
}
var paula = {
nombre: "Paula",
apellido: "Ruiz",
altura: 177
}
var personas = [sacha, alan, martin, dario, vicky, paula];
var personasAMts = personas.map(convertirAMts);
console.log (personasAMts)```
Me parece que esta es la mejor forma de expresarlo
var gregorio = {
nombre: 'Gregorio',
apellido: 'Vides',
altura: 1.86
}
var marc = {
nombre: 'Marc',
apellido: 'Pellus',
altura: 1.50
}
var boga = {
nombre: 'Ricardo',
apellido: 'Diaz Gonzalez',
altura: 1.82
}
var personas = [gregorio, marc, boga];
var personasCms = personas.map(persona => ({
...persona,
altura: persona.altura * 100
})
);
console.log(personasCms);
console.log(personas);
Mis apuntes y anotaciones:
//Función map()
/*A diferencia de filter lo que va hacer es devolvernos un nuevo array en el cual va a modificar cada uno de los elementos que le vayamos pasando del arrray original
Recordemos que map() siempre nos devuelve un nuevo array
*/
/* vamos a pasar de metros a centímetros en este ejemplo no nos modifica el array original
pero si estamos modificando cada uno de los elementos esa modificación va a perdurar en los elementos del array original*/
var liam = {
nombre: 'Liam',
apellido: 'León',
edad: 18,
altura: 1.72
}
var clifort = {
nombre: 'Clifort',
apellido: 'Collins',
edad: 19,
altura: 1.58
}
var paula = {
nombre: 'Paula',
apellido: 'Benavides',
edad: 21,
altura: 1.72
}
var natanael = {
nombre: 'Natanael',
apellido: 'León',
edad: 18,
altura: 1.82
}
var jhonatan = {
nombre: 'Jhonatan',
apellido: 'Lizcano',
edad: 19,
altura: 1.93
}
/* así se representa un array: [] y puede contener núm, objetos, funciones, incluso mezclar cosas etc*/
var personas = [liam, paula, clifort, natanael, jhonatan]
const pasarAlturaACms = persona => {
//persona.altura = persona.altura * 100 es lo mismo que:
//persona.altura *= 100
//aquí retornamos un nuevo objeto persona y pisamos el atributo altura con los datos en centímetros en la ecuación
return {
...persona,
altura: persona.altura * 100
}
/*Al momento de devolver un objeto en un arrow function se hace de la siguiente manera
envolviendo al objeto en paréntesis
const pasarAlturaACms = persona => ({
...persona,
altura: persona.altura * 100
)
*/
}
var personasCms = personas.map(pasarAlturaACms)
console.log(personasCms)
oK!!! Falta repasar para que quede bien entendido!!!
Aquí pueden encontrar más información sobre los métodos de los arrays, no se queden con dudas.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
Usar console.table(array) da una mejor salida, mucho mas entendible y mejor presentada que console.log para imprimir arreglos.
¿Por que pusieron return persona esta vez, no se suponia que ya la función en flecha ya tiene implicito el que devolverá algo?
Es interesante ver como map crea otro objeto a partir del original aplicando las nuevas reglas aquí esta mi reto:
var sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
altura: 1.72
}
var alan = {
nombre: 'Alan',
apellido: 'Perez',
altura: 1.86
}
var martin = {
nombre: 'Martin',
apellido: 'Gomez',
altura: 1.85
}
var dario = {
nombre: 'Dario',
apellido: 'Juarez',
altura: 1.71
}
var vicky = {
nombre: 'Vicky',
apellido: 'Zapata',
altura: 1.56
}
var paula = {
nombre: 'Paula',
apellido: 'Barros',
altura: 1.76
}
var personas = [sacha,alan,martin,dario,vicky,paula]
console.log (personas)
/*primera manera de hacerlo con function tipo arrow
var esAlta = (personas) => {
return personas.altura > 1.60
}*/
//otra manera de hacerlo con una function
//filtrar por los mayores de 1.80
function esAlta(personas){
return personas.altura > 1.80
}
//funcion es Baja
const esBaja=personas =>{
return personas.altura < 1.80
}
var personaAlta = personas.filter(esAlta)
console.log(personaAlta)
var personaBaja = personas.filter(esBaja)
console.log(personaBaja)
// convertir en centimetros creando otro objeto
//para no modificar el objeto original
const pasarCMS = ({altura}) => {
return{
...{altura},
altura:{altura}.altura *= 100
}
}
var personasCM = personas.map(pasarCMS)
console.log (personasCM)
const pasarAlturaACms = ( { altura }) => altura *= 100; /* persona.altura = persona.altura * 100; */
/* const pasarAlturaACms = persona => {
return persona.altura *= 100;
}
de esta forma modificamos la altura pero tambien modificamos el array original debido a que estamos trabajando con el objeto dentro de la funcion */
/* const pasarAlturaACms = persona => {
return {
...persona,
altura: persona.altura *100
}
}
const pasarAlturaACms = persona => ({
...persona,
})
Es igual que la anterior solo que estamos retornando con los parentecis.
aqui a pesar de que trabajamos el aaray con objetos dentro de la funcion esto crea un nuevo array con las propiedades del anterior y no modicica el original
ojo con esta por que en las demas solo traemos las alturas aqui por el contrario traemos el array con sus objetos enteros*/
var personasCms = personas.map(pasarAlturaACms);
console.log(personasCms);
/* map es parecido a filter solo que este no solo permite una condicion si no tambien un proceso de modificacion de variables
*/
Ejemplo sencillo del método map con arrays:
let numerosString = ["1","2","3","4","5","6","7","8", "9", "10"];
// Creamos un nuevo array con los numeros convertidos a tipo de dato Number, que es el que deben de tener para operar con ellos
let numeros = numerosString.map( num => Number(num));
console.log(numerosString);
console.log(numeros);
Nota: Con los arrays el método map no modifica el array (como pasa con los objetos), sino crea otro nuevo.
Yo lo hice así y no me modifico el array inicial
Aúnque despues lo hice así
Para que el resultado sea así
.map:
Devuelve un nuevo array, PERO si estamos modificando cada uno de los elementos eso si modificara el array original.
¿por qué cuando se crea la arrow function con parametro(persona) y se pasa como parametro ya sea al .map o .filter se hace sin pasarle parametros?
Genere un error al escribir un =
({ ...persona, altura: persona.altura *= 100 })
que deberia ser sin el =
({ ...persona, altura: persona.altura * 100 })
Por eso se modifico el array original y eran iguales, solo los valores pero no al compararlo == 🤣
En una sola línea:
var personasCms = personas.map( persona => ({...persona, altura: persona.altura * 100}));
Me gusta el vocabulario de los argentinos!
muy claro el profe!!!1
let personasCms = personas.map( persona =>({
...persona,
altura: persona.altura * 100,
})
);
Reto#5
var sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
altura: 1.72
}
var alan = {
nombre: 'Alan',
apellido: 'Perez',
altura: 1.86
}
var martin = {
nombre: 'Martin',
apellido: 'Gomez',
altura: 1.85
}
var dario = {
nombre: 'Dario',
apellido: 'Juarez',
altura: 1.71
}
var vicky = {
nombre: 'Vicky',
apellido: 'Zapata',
altura: 1.56
}
var paula = {
nombre: 'Paula',
apellido: 'Barros',
altura: 1.76
}
const esAlta = persona => persona.altura > 1.80
const esBaja = persona => !esAlta(persona)
var personas = [sacha, alan, martin, dario, vicky, paula];
/*
Filtraremos personas altas para hacerlo utilizaremos la funcion filter
Filter lleva como parametro una condicion y en este caso utilizamos
una funcion, se podria poner la funcion ahi mismo o invocar a la
funcion como lo hicimos en este ejemplo.
Filter nos devuelve un nuevo array, este no modificara el array
al cual le aplicamos la funcion.
*/
var personasAltas = personas.filter(esAlta)
var personasBajas = personas.filter(esBaja)
console.log(personasAltas);
console.log(personasBajas);```
Hola comunidad.
.
Que trucazo este que comenta el Profesor Sacha 😄.
.
.
Al momento de programar muchas veces hay problemas en cómo manejar las variables de tal manera que deseamos hacer operaciones sobre el contenido de una variable pero sin modificar este contenido.
.
Aquí el profesor nos recomienda una manera en cómo abordar el problema.
.
Muy útil.
.
Saludos.
Si colocamos el código de esta manera el .map creara un nuevo array solo con las alturas en cms:
const PasarAlturaACms = ({ altura }) => altura*100;
var personasCms = personas.map(PasarAlturaACms)
console.log(personasCms);```
array que se formó:
(6) [176, 156, 171, 185, 186, 172]
Al igual que filter, map recorre todo el arreglo, pero la diferencia es que aplica la transformación que nosotros pasemos por esa función y genera un nuevo arreglo ya transformado, esta también es muy útil y muy usada, les dejo su documentación:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map
El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
return x * 2;
});
siempre será más claro poner “cm” como símbolo de centímetros mas no la abreviatura “cms”
esos … antes del objeto que son? solo aplica para objetos o tambien para arrays?
Para devolver un objeto en una arrow function, esta debe estar envuelta en (), que buen tip.
Muy buena clase!
Sacha, se te olvida subir los archivos
El objeto Map almacena pares clave/valor. Cualquier valor (tanto objetos como valores primitivos) pueden ser usados como clave o valor.
Muy buena clase.
Personas bajas
var sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
altura: 1.72
}
var alan = {
nombre: 'Alan',
apellido: 'Perez',
altura: 1.86
}
var martin = {
nombre: 'Martin',
apellido: 'Gomez',
altura: 1.85
}
var dario = {
nombre: 'Dario',
apellido: 'Juarez',
altura: 1.71
}
var vicky = {
nombre: 'Vicky',
apellido: 'Zapata',
altura: 1.56
}
var paula = {
nombre: 'Paula',
apellido: 'Barros',
altura: 1.76
}
const esBajas= persona => persona.altura <1.8;
var personas = [sacha,alan,martin,dario,vicky,paula];
var personasBajas = personas.filter(esBajas);
///// map eecuta la funcion por cada persona y las modifica
const pasarAlturaCms= persona =>{
return {
...persona,
altura:persona.altura*100
}
}
var personasCms= personas.map(pasarAlturaCms);
console.log(personasCms);
Entonces qué significado tiene en el lenguaje JS esto.?
(…)
Filter se usa para filtrar algún atributo y hacer algo con el!
Map se usa para recorrer el objeto!
usando map Clase de Hoy
const pasarAlturaCms = persona => ({
...persona,
altura: persona.altura*100
})
var personasCms = personas.map(pasarAlturaCms)
console.log(personasCms)
código simple pero cumple su función
function metrosAcentrimetros({altura}){
return altura * 100;
}
function centimetrosAmetros({altura}){
return altura / 100;
}
function personaMetrosAcm(personaObject){
return {
...personaObject,
altura:personaObject.altura * 100
}
}
function personaCmAmetros(personaObject){
return {
...personaObject,
altura: personaObject.altura/100
}
}
let arrayPersonasDeMetrosAcm = arrayPersonas.map(personaMetrosAcm);
let arrayPersonasDeCmAMetros = arrayPersonasDeMetrosAcm.map(personaCmAmetros);
console.log(arrayPersonasDeMetrosAcm);
console.log(arrayPersonasDeCmAMetros);```
Matemáticas básicas
1.8 * 100 de m a =>cm
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?