Durante recientes entrevistas con desarrolladores, noté que muchos candidatos se sentían abrumados por los desafíos de codificación. Para puestos junior, es común que se les pregunte sobre tareas básicas de JavaScript. Hoy, compartiré técnicas esenciales de manipulación de datos que los desarrolladores junior deben practicar para los desafíos de codificación.
En este artículo, explicaré cuatro importantes técnicas de JavaScript con ejemplos sencillos: filtrar productos, combinar datos de API, eliminar duplicados y encontrar el artículo mejor valorado. Estos ejemplos te ayudarán a prepararte de manera efectiva para tu próximo desafío de codificación.
¡Exploremos estos ejemplos prácticos para que estés listo!
💡 Mi consejo: Intenta resolver estos problemas por ti mismo primero, luego verifica las soluciones. Si tienes mejores ejemplos, por favor compártelos en los comentarios.
1. Encontrar Elementos: Filtrar Productos
Escenario: Imagina que estás construyendo una tienda en línea y necesitas filtrar productos en función del rango de precios y la marca.
const products = [
{ name: "iPhone 13", price: 999, brand: "Apple" },
{ name: "Galaxy S21", price: 799, brand: "Samsung" },
{ name: "iPad Air", price: 599, brand: "Apple" },
{ name: "Pixel 6", price: 699, brand: "Google" },
];
const filters = {
minPrice: 500,
maxPrice: 800,
brand: "Samsung"
};
Solución:
Usa el método filter(). Este método crea un nuevo array con elementos que pasan la prueba en la función proporcionada. Verifica si el product.price está dentro del rango definido por filters.minPrice y filters.maxPrice, y si el product.brand coincide con filters.brand. Si ambas condiciones se cumplen, el producto se incluye en el array filteredProducts.
Lee más sobre el método filter.
const filteredProducts = products.filter(product => {
return product.price >= filters.minPrice &&
product.price <= filters.maxPrice &&
product.brand === filters.brand;
});
2. Combinar Datos: Construir un Panel de Usuario
Escenario: Debes crear un panel de usuario que muestre datos de múltiples llamadas a API.
fetchUserProfile(userId),
fetchUserPurchases(userId),
fetchUserActivity(userId),
Solución:
Usa el método Promise.all() para manejar múltiples operaciones asíncronas. Este método toma un array de promesas y devuelve una sola promesa que se resuelve cuando todas las promesas de entrada se han resuelto.
Lee más sobre Promise.all.
Usa await con Promise.all() para asegurarte de que las tres llamadas a API (fetchUserProfile, fetchUserPurchases, fetchUserActivity) se completen. Luego, usa la asignación por desestructuración con [profileData, purchaseData, activityData] para obtener los resultados de cada llamada a API en variables separadas. Finalmente, usa la sintaxis spread (...) para crear una copia de profileData, agregando las propiedades purchaseData y activityData a esta copia, combinando todos los datos juntos.
Aprende más sobre Destructuring y la Sintaxis Spread.
async function fetchAndMergeUserData(userId) {
const [profileData, purchaseData, activityData] = await Promise.all([
fetchUserProfile(userId),
fetchUserPurchases(userId),
fetchUserActivity(userId),
]);
return { ...profileData, purchases: purchaseData, activity: activityData };
}
3. Eliminar Duplicados: Limpiar Datos de Contactos
Escenario: Estás construyendo una aplicación de contactos. Obtienes una lista de contactos, algunos de los cuales pueden ser duplicados. El objetivo es mostrar una lista unificada con solo contactos únicos basados en el correo electrónico.
const contacts = [
{ name: "Mandy", email: "mandy@email.com" },
{ name: "Alysse", email: "alice@email.com" },
{ name: "Mandi", email: "mandy@email.com" },// Duplicate
];
const nbaContacts = [
{ name: "Lebron", personal_email: "lebron@email.com" },
{ name: "Irving", personal_email: "irving@email.com" },
{ name: "Levron", personal_email: "lebron@email.com" }, //duplicate
]
Solución:
Primero, recopila todos los correos electrónicos en un array usando la función map, apuntando al campo "email" o "personal_email". Luego, elimina duplicados usando new Set. Finalmente, recorre cada uniqueEmail usando forEach y agrégalos al array de contactos.
function removeDuplicates(elements: Array<any>, key: string) {
let emails = elements.map(p => p[key]);
let uniqueEmails = Array.from(new Set(emails));
let contacts = [];
uniqueEmails.forEach((value) => {
let contact = elements.find(p => p[key] === value);
uniqueContacts.push(contact)
})
return contacts
}
Estamos usando métodos comunes como .map, forEach y Set(), pero no los estamos utilizando completamente. Intentemos una segunda opción.
En esta segunda opción, primero declara el conjunto uniqueEmails para rastrear valores únicos. Luego, usa el método filter para recorrer cada elemento en el array de entrada, usando element[key] para obtener el valor de la propiedad. Si el conjunto uniqueEmails no tiene ya el correo electrónico (!uniqueEmails.has(value)), significa que es la primera vez, así que agrégalo y devuelve true desde el filtro. Si ya tiene el valor, devuelve false, indicando que este elemento es un duplicado y debe ser eliminado.
function removeDuplicates(elements: Array<any>, key: string) {
const uniqueEmails = new Set();
return elements.filter(elm => {
const value = elm[key];
const isDuplicate = !uniqueEmails.has(value);
uniqueEmails.add(value);
return !isDuplicate;
});
}
4. Transformar Datos: Encontrar el Producto Mejor Valorado
Escenario: Tienes un array de objetos de productos, cada uno con una propiedad de calificación. Quieres encontrar el producto con la calificación más alta.
const products = [
{ id: 1, name: "Laptop", rating: 4.5 },
{ id: 2, name: "T-shirt", rating: 4.2 },
{ id: 3, name: "Headphones", rating: 4.8 },
];
Solución
Usa el método reduce(). Recorre los productos, comparando la calificación de cada producto con el producto mejor valorado hasta el momento. Si el producto actual tiene una calificación más alta, se convierte en el nuevo mejor valorado.
El reducer con la función de callback compara el `rating` del producto current con el producto con la calificación más alta hasta el momento. Si el producto current tiene una calificación más alta, se convierte en el nuevo highest. Esto continúa para cada producto, y el highestRatedProduct se retornal al final.
const highestRatedProduct = products.reduce((highest, current) => {
return current.rating > highest.rating ? current : highest;
}, products[0]);
Conclusión
Listo, hemos aprendido las cuatro principales manipulaciones de datos en JavaScript para entrevistas junior. Después de practicar estas manipulaciones de datos, puedes sentirte más seguro sobre los desafíos de codificación o tus tareas diarias. Ya sea que estés filtrando productos, combinando respuestas de API, eliminando duplicados o encontrando el artículo mejor valorado.
Recuerda practicar estos ejemplos, y espero que te ayuden en tu próximo desafío.