Incluso un ingeniero backend, al final, el “resultado” se ejecuta en el navegador.
No es necesario ser un experto en frontend, pero al menos conocer la sintaxis y los métodos mínimos de JavaScript:

  • Sería mucho más fácil identificar la causa de los errores

  • Podrás comunicarte eficazmente con los compañeros de frontend

  • Podrás manejar al menos interfaces simples por ti mismo.

En este artículo, se resumen los 5 mejores métodos de JavaScript de frontend que definitivamente serán útiles para los ingenieros backend.

1. fetch – Hacer llamadas HTTP desde el navegador

Commandbox 광고

¿Por qué es importante?

Lo más familiar para un ingeniero backend son las API HTTP.
En el frontend, a menudo se llama a esta API usando fetch.
Solo entender cómo se envían las solicitudes y cómo se manejan las respuestas/errores facilita enormemente el proceso de depuración.

Uso básico

// Ejemplo de solicitud GET
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('Error HTTP ' + res.status);
    return res.json(); // Analiza el JSON
  })
  .then((data) => {
    console.log('usuario:', data);
  })
  .catch((err) => {
    console.error('error de fetch:', err);
  });

Ejemplo de POST + JSON

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('Error HTTP ' + res.status);
    }

    const data = await res.json();
    console.log('creado:', data);
  } catch (e) {
    console.error(e);
  }
}

Punto clave

  • Con res.ok, res.status, etc., se pueden diferenciar errores en el servidor

  • Los patrones de uso de JSON.stringify, res.json() pueden ser memorizados casi como plantillas

  • Si surge un error de CORS, es recomendable acostumbrarse a observar cómo se envía la solicitud fetch en la consola del navegador

2. Promise y async/await – La base de la lógica asíncrona

¿Por qué es importante?

El frontend es mayormente asíncrono.

  • Eventos de UI

  • Solicitudes HTTP

  • Temporizadores, WebSocket, etc.

Los conceptos clave para manejar esto son Promise y async/await.
Si has trabajado con I/O asíncrono en el backend, el concepto es similar.

Base de Promise

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

Más fácil de leer con async/await

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

Llamadas paralelas (un patrón común en el backend)

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

Punto clave

  • Las API basadas en Promise son elegibles para ser leídas con .then().catch() o async/await

  • Es útil saber el patrón de Promise.all para enviar varias solicitudes a la vez

3. Los tres métodos de arreglos: map, filter, reduce

Commandbox 광고

¿Por qué es importante?

En el frontend también se manejan datos.

  • Convertir una lista JSON recibida del servidor a un formato de datos para la visualización

  • Filtrar solo los datos que cumplen ciertas condiciones

  • Calcular sumas/estadísticas

Para esto, se utilizan mucho los métodos de arreglo. Es el mismo concepto que el manejo de colecciones que es común en el backend.

map – “Transformar” cada elemento de un arreglo

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

filter – Mantener solo los que cumplen con la condición

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

reduce – Agrupar un arreglo en un solo valor

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

Ejemplo de encadenamiento

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

Punto clave

  • Cuando veas “código de frontend lleno de bucles for”, puedes empezar a notar puntos de refactorización con map/filter/reduce

  • Si estableces relaciones entre las bibliotecas de colecciones en el backend (Java, Kotlin, Python, Go, etc.), la comprensión será más rápida

4. Herramientas clave para manipular el DOM: querySelector, addEventListener, classList

¿Por qué es importante?

Aunque uses marcos (React, Vue, etc.), en la fase de depuración, al final debes ver el DOM directamente.
Para páginas de administración simples o herramientas internas, a veces se codifica sin un marco utilizando JavaScript puro.

Selección de elementos – querySelector

<button id="save-btn">Guardar</button>

const saveBtn = document.querySelector('#save-btn');

Se utiliza la notación de los selectores CSS.

  • #id

  • .class

  • button.primary

  • div > span etc.

Manejador de eventos – addEventListener

saveBtn.addEventListener('click', () => {
  console.log('¡Botón de guardar clickeado!');
});

Cambiar estilos/estados – classList

<button id="save-btn" class="primary">Guardar</button>

saveBtn.classList.add('loading');     // Agregar clase
saveBtn.classList.remove('primary');  // Quitar clase
saveBtn.classList.toggle('hidden');   // Si está, quita, si no está, agrega

Con solo saber estas combinaciones:

  • “¿Por qué no se presiona el botón?” → Puedes verificar si el elemento DOM está correctamente asignado y si el evento está asignado

  • “¿Por qué no se ve este div?” → Puedes seguir la clase de estado observando classList

Punto clave

  • Entender el funcionamiento interno de los marcos es mucho menos abrumador si se tiene una base de la API del DOM

  • Es importante tener el hábito de usar document.querySelector(...) directamente en la consola del navegador

5. Módulos ES – import / export fundamentos

¿Por qué es importante?

Ahora, JavaScript en el frontend utiliza ES Module (ESM) como base.

  • El código se separa en archivos

  • Solo se importan lo que se necesita

  • Aún sin usar Webpack/Babel/bundlers, el navegador entiende directamente ESM

Dado que el uso de ESM también está aumentando en el backend (Node.js), tener esto registrado será de ayuda en ambos lados.

Exportación de módulos – export

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// Exportación por defecto – valor/función representativos del módulo
export default function mul(a, b) {
  return a * b;
}

Importación de módulos – import

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

  • { add, PI } : Importar exportación nombrada

  • mul : Importar exportación por defecto

Ejemplo de uso de módulos en el navegador

<script type="module" src="/static/js/main.js"></script>

Al declarar así, podrás usar la sintaxis import / export dentro de main.js.

Punto clave

  • El concepto de “modularización” es el mismo tanto en frontend como en backend

  • Conocer las reglas de ruta para importaciones (./, ../, rutas absolutas, alias por bundlers, etc.) te facilitará la lectura de la configuración de construcción de frontend

Ingeniero escribiendo código js

Conclusión – Lo mínimo que debe saber un backend que también hace frontend

En resumen, lo que un ingeniero backend debe conocer al menos para entender JavaScript de frontend son:

  1. fetch – Hacer llamadas HTTP desde el navegador y procesar JSON

  2. Promise / async/await – Comprender la estructura de la lógica asíncrona

  3. Métodos de arreglo (map, filter, reduce) – Transformación/filtrado/agregación de datos

  4. Fundamentos del DOM (querySelector, addEventListener, classList) – Selección de elementos en pantalla, eventos, alternancia de estados

  5. Módulos ES (import / export) – Comprender la estructura del código en unidades de módulos

Con solo familiarizarse con estos cinco aspectos:

  • Puedes participar en revisiones de código de frontend

  • Puedes implementar/modificar interfaces simples tú mismo

  • Puedes rastrear problemas de integración de API tanto en el frontend como en el backend.

A partir de ahí, es recomendable ampliar el rango según sea necesario hacia marcos como React/Vue, y configuración de construcción/bundling (Webpack, Vite, SWC, etc.).