Explore the 6 Most Exciting JavaScript Proposals Shaping 2024

After covering five ECMAScript 2024 (ES15) features, we continue with additional eye‑catching proposals.

1. Pattern Matching 🧩🔍 (Early Stage)

JavaScript gains a smarter switch -like construct that can match complex data structures without nested conditionals.

Old way 😫

<code>function checkAnimal(animal) {
  if (animal.type === "dog" && animal.sound === "woof") {
    return "It's a dog! 🐶";
  } else if (animal.type === "cat" && animal.sound === "meow") {
    return "It's a cat! 🐱";
  } else {
    return "Unknown animal 😕";
  }
}</code>

New way 🎉

<code>function checkAnimal(animal) {
  return match (animal) {
    { type: "dog", sound: "woof" } => "It's a dog! 🐕",
    { type: "cat", sound: "meow" } => "It's a cat! 🐈",
    _ => "Unknown animal 🤷‍♂️"
  };
}</code>

Although not yet natively supported, libraries like ts-pattern can provide similar functionality.

2. Pipeline Operator 🔗🚿 (Stage 2 – Draft)

The pipeline operator |> enables cleaner, more readable function chaining.

Old way 😩

<code>const result = process(clean(parse(inputData)));</code>

New way 🤩

<code>const result = inputData
  |&gt; parse
  |&gt; clean
  |&gt; process;</code>

This proposal could enhance functional programming in front‑end frameworks and data‑flow logic once standardized.

3. Async Context 🎢💻

JavaScript introduces an async context that automatically tracks asynchronous operations, eliminating the need for manual context handling.

Old way 😐

<code>async function fetchData() {
  const response = await apiCall();
  // …where did my context go?
}</code>

New way 🎉

<code>async function fetchData() {
  const context = getCurrentContext(); // always know where you are
  const response = await apiCall();
  return response;
}</code>

The async context acts like a GPS for promises, keeping track of execution flow.

4. New Set Methods 🎛️✨ (Proposal Stage)

Sets gain built‑in methods such as union , intersection , and difference .

Old way 😩

<code>const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const union = new Set([...setA, ...setB]); // verbose spread</code>

New way 🤩

<code>const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const union = setA.union(setB); // one‑line magic</code>

These methods make set operations more expressive and concise.

5. New Array Methods 🍰

ES15 adds handy array utilities like groupBy and toSorted , offering non‑destructive sorting and grouping.

Old way 😕

<code>const arr = [1, 4, 2, 3];
const sortedArr = [...arr].sort((a, b) => a - b);</code>

New way 🎉

<code>const arr = [1, 4, 2, 3];
const sortedArr = arr.toSorted(); // non‑mutating sort</code>

The new methods give developers finer control over array manipulation.

6. Temporal API 🕰️⌛

The Temporal API replaces the problematic Date object with a modern, well‑designed date‑time library.

Old way 😣

<code>const date = new Date('2023-12-01');
const nextMonth = new Date(date.setMonth(date.getMonth() + 1));</code>

New way 🌟

<code>const date = Temporal.PlainDate.from('2023-12-01');
const nextMonth = date.add({ months: 1 });</code>

Temporal makes date handling meaningful and straightforward, reducing mental overhead.