Volver al blog

Pattern Matching en JavaScript: La Propuesta TC39 Que Cambiara Tu Codigo

Hola HaWkers, una de las propuestas mas esperadas en TC39 finalmente esta ganando traccion: Pattern Matching para JavaScript. Esta feature, ya presente en lenguajes como Rust, Scala y Elixir, promete revolucionar la forma en que escribimos logica condicional y desestructuracion de datos en JavaScript.

¿Alguna vez te frustraste con cadenas infinitas de if/else o switch cases confusos? Pattern Matching puede ser la solucion que estabas esperando.

Que es Pattern Matching?

Pattern Matching es una forma de verificar valores contra patrones y extraer datos de estructuras complejas de forma declarativa.

Comparacion Basica

Hoy con switch:

function getAnimalSound(animal) {
  switch (animal.type) {
    case 'dog':
      return 'woof';
    case 'cat':
      return 'meow';
    case 'bird':
      return 'chirp';
    default:
      return 'unknown';
  }
}

Con Pattern Matching (propuesta):

function getAnimalSound(animal) {
  return match (animal) {
    when ({ type: 'dog' }) -> 'woof',
    when ({ type: 'cat' }) -> 'meow',
    when ({ type: 'bird' }) -> 'chirp',
    else -> 'unknown'
  };
}

Por Que Esto Importa?

Beneficios del Pattern Matching:

Aspecto Tradicional Pattern Matching
Legibilidad if/else anidados Declarativo y limpio
Desestructuracion Separada de la condicion Integrada
Exhaustividad Manual Puede ser verificada
Composicion Dificil Natural
Tipos Verificacion separada Incorporada en el patron

La Propuesta TC39

Entendamos los detalles de la propuesta actual.

Estado en TC39

Historico:

  • Stage 1: 2020
  • Stage 2: 2024
  • Stage 3: En discusion (2026)
  • Stage 4: Previsto para 2027

Principales defensores:

  • Mark Miller (Agoric)
  • Tab Atkins (Google)
  • Jordan Harband (Airbnb)

Sintaxis Propuesta

La sintaxis todavia esta en discusion, pero la version mas probable es:

// Sintaxis basica
match (valor) {
  when (patron1) -> resultado1,
  when (patron2) -> resultado2,
  else -> resultadoPorDefecto
}

// Como expresion
const resultado = match (x) {
  when (1) -> 'uno',
  when (2) -> 'dos',
  else -> 'otro'
};

Tipos de Patrones

1. Patrones Literales:

const descripcion = match (codigo) {
  when (200) -> 'OK',
  when (201) -> 'Created',
  when (404) -> 'Not Found',
  when (500) -> 'Server Error',
  else -> 'Unknown Status'
};

2. Patrones de Objeto:

const mensaje = match (response) {
  when ({ status: 'success', data }) -> `Exito: ${data}`,
  when ({ status: 'error', message }) -> `Error: ${message}`,
  when ({ status: 'loading' }) -> 'Cargando...',
  else -> 'Estado desconocido'
};

3. Patrones de Array:

const primero = match (lista) {
  when ([]) -> 'Lista vacia',
  when ([unico]) -> `Un item: ${unico}`,
  when ([primero, segundo]) -> `Dos: ${primero}, ${segundo}`,
  when ([head, ...tail]) -> `Primero: ${head}, resto: ${tail.length}`,
  else -> 'Formato inesperado'
};

4. Patrones con Guards:

const categoria = match (usuario) {
  when ({ edad }) if (edad < 13) -> 'nino',
  when ({ edad }) if (edad < 20) -> 'adolescente',
  when ({ edad }) if (edad < 60) -> 'adulto',
  when ({ edad }) -> 'senior',
  else -> 'edad desconocida'
};

Casos de Uso Practicos

Veamos como Pattern Matching mejora codigo real.

Procesamiento de Respuestas de API

Antes:

function handleResponse(response) {
  if (response.status === 'success') {
    if (response.data && response.data.items) {
      return response.data.items.map(processItem);
    } else if (response.data) {
      return [processItem(response.data)];
    }
  } else if (response.status === 'error') {
    if (response.code === 401) {
      return redirectToLogin();
    } else if (response.code === 404) {
      return showNotFound();
    }
  }
  return null;
}

Con Pattern Matching:

function handleResponse(response) {
  return match (response) {
    when ({ status: 'success', data: { items } }) ->
      items.map(processItem),

    when ({ status: 'success', data }) ->
      [processItem(data)],

    when ({ status: 'error', code: 401 }) ->
      redirectToLogin(),

    when ({ status: 'error', code: 404 }) ->
      showNotFound(),

    else -> null
  };
}

Como Usar Hoy

Mientras la propuesta no es aprobada, existen alternativas.

Bibliotecas Actuales

1. ts-pattern (TypeScript/JavaScript):

import { match, P } from 'ts-pattern';

const resultado = match(valor)
  .with({ type: 'dog' }, () => 'woof')
  .with({ type: 'cat' }, () => 'meow')
  .with({ type: P.string }, ({ type }) => `${type} sound`)
  .otherwise(() => 'unknown');

2. match-iz:

import { match, when, otherwise } from 'match-iz';

const resultado = match(animal)(
  when({ type: 'dog' }, () => 'woof'),
  when({ type: 'cat' }, () => 'meow'),
  otherwise(() => 'unknown')
);

Timeline y Expectativas

¿Cuando podemos esperar Pattern Matching en produccion?

Roadmap Estimado

Fase Fecha Estimada Estado
Stage 3 Q2 2026 En revision
Implementacion browsers Q4 2026 Despues de Stage 3
Stage 4 Q1 2027 Pendiente
Disponible en Node LTS Q3 2027 Previsto

Como Prepararse

1. Aprende los conceptos:

  • Estudia Pattern Matching en otros lenguajes
  • Practica con bibliotecas como ts-pattern
  • Entiende desestructuracion avanzada

2. Refactoriza codigo existente:

  • Identifica cadenas if/else complejas
  • Reescribe switches como pattern matches
  • Documenta donde usarias la feature

3. Sigue la propuesta:

  • GitHub: tc39/proposal-pattern-matching
  • Lee las notas de reuniones del TC39
  • Participa en discusiones

Conclusion

Pattern Matching es una de las adiciones mas esperadas a JavaScript y tiene potencial para transformar significativamente como escribimos codigo. La feature trae mas expresividad, legibilidad y seguridad para logica condicional y procesamiento de datos.

Puntos principales:

  1. Pattern Matching permite verificar valores contra patrones de forma declarativa
  2. La propuesta esta en Stage 2 en TC39, caminando hacia Stage 3
  3. Soporta patrones literales, objetos, arrays y guards
  4. Bibliotecas como ts-pattern permiten usar conceptos similares hoy
  5. Se espera disponibilidad nativa entre 2026-2027

Para desarrolladores JavaScript, vale la pena comenzar a familiarizarse con el concepto ahora. Cuando la feature sea lanzada, estaras listo para aprovechar todo su potencial.

Para mas sobre el futuro de JavaScript, lee: ESM (ES Modules): La Adopcion Completa en JavaScript 2026.

Vamos con todo! 🦅

Comentarios (0)

Este artículo aún no tiene comentarios 😢. ¡Sé el primero! 🚀🦅

Añadir comentarios