Cuatro retos de JavaScript para entrevistas de trabajo

En entrevistas recientes con desarrolladores, noté que muchos candidatos se sentían abrumados por los retos técnicos de código. Para posiciones junior, es muy común que pregunten sobre tareas básicas de JavaScript. Hoy quiero compartir varias técnicas esenciales de manipulación de datos que recomiendo practicar antes de una prueba técnica.

En este artículo, explico cuatro técnicas importantes de JavaScript con ejemplos sencillos: filtrar productos, combinar datos de varias APIs, eliminar duplicados y encontrar el elemento con la calificación más alta. Estos ejemplos te van a servir para prepararte bien para tu próxima prueba técnica.

Vamos a revisar estos ejemplos prácticos para que estés listo.

💡 Mi consejo: Intenta resolver estos problemas por tu cuenta primero y luego revisa las soluciones. Si tienes mejores formas de resolverlos, compártelas en los comentarios.

1. Encontrar elementos: filtrar productos

Escenario: Imagina que estás creando una tienda en línea y necesitas filtrar productos según un rango de precios y una marca específica.

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 arreglo con los elementos que cumplen la condición de la función dada. Comprueba si product.price está dentro del rango definido por filters.minPrice y filters.maxPrice, y si product.brand coincide con filters.brand. Si se cumplen ambas condiciones, el producto se incluye en el arreglo 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: crear un panel de usuario

Escenario: Tienes que crear un panel de usuario que muestre información proveniente de varias llamadas a una 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 recibe un arreglo de promesas y retorna una sola promesa que se resuelve cuando todas las promesas del arreglo se han resuelto.

Lee más sobre Promise.all.

Usa await con Promise.all() para asegurarte de que las tres llamadas a la API (fetchUserProfile, fetchUserPurchases, fetchUserActivity) se completen. Luego, usa desestructuración con [profileData, purchaseData, activityData] para guardar los resultados de cada llamada en variables separadas. Finalmente, usa la sintaxis de object spread (...) para crear una copia de profileData, agregando las propiedades purchaseData y activityData para combinar toda la información.

Aprende más sobre la sintaxis de desestructuración y 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 creando una aplicación de contactos. Recibes una lista donde algunos contactos pueden estar duplicados. El objetivo es mostrar una lista unificada solo con contactos únicos basados en su correo electrónico.

const contacts = [
    { name: "Mandy", email: "mandy@email.com" },
    { name: "Alysse", email: "alice@email.com" }, 
    { name: "Mandi", email: "mandy@email.com" },// Duplicado 
];
 
const nbaContacts = [
    { name: "Lebron", personal_email: "lebron@email.com" },
    { name: "Irving", personal_email: "irving@email.com" }, 
    { name: "Levron", personal_email: "lebron@email.com" }, // Duplicado
]

Solución:

Primero, reúne todos los correos en un arreglo usando la función map, apuntando al campo "email" o "personal_email". Luego, elimina los duplicados usando new Set. Por último, recorre cada uniqueEmail usando forEach y agrégalos al arreglo 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
}

Aquí usamos métodos comunes como .map, forEach y Set(), pero podemos escribir una solución más limpia. Veamos una segunda opción.

En esta segunda opción, primero declaramos el Set uniqueEmails para registrar los valores únicos. Después, usamos el método filter para recorrer cada elemento del arreglo original, usando element[key] para obtener el valor de la propiedad. Si el Set uniqueEmails todavía no contiene ese correo (!uniqueEmails.has(value)), significa que aparece por primera vez: lo agregamos al Set y retornamos true en el filtro. Si ya contiene el valor, retornamos false, lo que indica que es un elemento duplicado y debe descartarse.

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 con mejor calificación

Escenario: Tienes un arreglo de objetos de productos, cada uno con una propiedad rating. 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(). Este método recorre los productos comparando la calificación de cada uno con la más alta encontrada hasta ese momento. Si el producto actual tiene una mejor calificación, se convierte en el nuevo valor máximo.

La función callback de reduce compara el rating del producto current con el producto highest acumulado. Si el producto current tiene una calificación superior, pasa a ser el nuevo highest. Este proceso se repite para cada elemento y al final se devuelve el producto con la mejor calificación.

const highestRatedProduct = products.reduce((highest, current) => {
  return current.rating > highest.rating ? current : highest;
}, products[0]);

Conclusión

Listo, revisamos cuatro operaciones comunes de manipulación de datos en JavaScript para entrevistas junior. Practicar estos ejercicios te ayudará a sentirte con mayor seguridad en pruebas técnicas y también en tu trabajo del día a día, ya sea que necesites filtrar listas, combinar respuestas de APIs, limpiar duplicados o buscar el valor más alto.

Recuerda practicar estos ejemplos por tu cuenta. Espero que te sirvan mucho en tu próxima entrevista técnica.