The Record and Tuple proposal translates this sentence into English.

Background of ECMAScript 14 Record and Tuple Proposal

Records and Tuples are two new immutable data structures introduced in ECMAScript 14. They aim to provide JavaScript with more efficient and safer ways to handle immutable data operations. Records are similar to objects but immutable, while Tuples are similar to arrays and also immutable. The introduction of these two proposals offers native support for immutable data handling in JavaScript.

Basic Concept of Record

A Record is an immutable object structure. Unlike regular objects, once a Record is created, it cannot be modified. Any attempt to modify a Record will throw an error. The syntax for Records uses #{ }:

const person = #{
  name: "Alice",
  age: 30,
  address: #{
    city: "New York",
    zip: "10001"
  }
};

// Attempting to modify will throw an error
person.name = "Bob"; // TypeError: Cannot assign to read only property 'name' of object '#<Object>'

Records support nested structures and can contain other Records or Tuples. Due to their immutability, Records are well-suited for representing data like configurations or states that do not need modification.

Basic Concept of Tuple

A Tuple is an immutable array structure. Unlike regular arrays, once a Tuple is created, it cannot be modified. The syntax for Tuples uses #[ ]:

const coordinates = #[1, 2, 3];

// Attempting to modify will throw an error
coordinates[0] = 4; // TypeError: Cannot assign to read only property '0' of object '#<Array>'

Tuples support all array read operations, such as length and indexOf, but do not support any modification operations like push or pop.

Features of Records and Tuples

Immutability

The core feature of Records and Tuples is immutability. This means their values cannot be modified once created. This characteristic makes them highly useful in functional programming, as it avoids unintended side effects.

function updatePerson(person, newName) {
  return #{ ...person, name: newName };
}

const original = #{ name: "Alice", age: 30 };
const updated = updatePerson(original, "Bob");

console.log(original.name); // "Alice"
console.log(updated.name); // "Bob"

Value-Based Comparison

Records and Tuples are compared based on their values, not their references. This means two Records or Tuples with identical content are considered equal:

const a = #{ x: 1, y: 2 };
const b = #{ x: 1, y: 2 };
console.log(a === b); // true

const c = #[1, 2, 3];
const d = #[1, 2, 3];
console.log(c === d); // true

Support for Spread Operator

Records and Tuples support the spread operator, making it easy to create new Records or Tuples:

const base = #{ a: 1, b: 2 };
const extended = #{ ...base, c: 3 };
console.log(extended); // #{ a: 1, b: 2, c: 3 }

const nums = #[1, 2, 3];
const moreNums = #[...nums, 4, 5];
console.log(moreNums); // #[1, 2, 3, 4, 5]

Use Cases for Records and Tuples

State Management

In state management, immutable data prevents unintended state modifications. Records and Tuples are ideal for representing state:

const initialState = #{
  user: #{
    name: "Alice",
    age: 30
  },
  todos: #[
    #{ id: 1, text: "Learn Record", completed: false },
    #{ id: 2, text: "Learn Tuple", completed: false }
  ]
};

function toggleTodo(state, id) {
  return #{
    ...state,
    todos: state.todos.map(todo => 
      todo.id === id ? #{ ...todo, completed: !todo.completed } : todo
    )
  };
}

const newState = toggleTodo(initialState, 1);
console.log(newState.todos[0].completed); // true

Configuration Objects

Records are well-suited for representing configuration objects, as configurations typically do not need modification:

const config = #{
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retry: 3
};

function fetchData(config) {
  // Use config
}

Function Parameters

Tuples can be used to represent multiple return values from functions, ensuring immutability:

function getMinMax(numbers) {
  const min = Math.min(...numbers);
  const max = Math.max(...numbers);
  return #[min, max];
}

const result = getMinMax([1, 2, 3, 4, 5]);
console.log(result); // #[1, 5]

Limitations of Records and Tuples

No Dynamic Properties

Records do not support dynamic property names; all properties must be defined at creation:

const key = "name";
const person = #{ [key]: "Alice" }; // SyntaxError: Record literals may not contain computed properties

No Prototype Chain

Records do not have a prototype chain and cannot use __proto__ or Object.setPrototypeOf:

const proto = #{ greet() { console.log("Hello"); } };
const obj = Object.create(proto);
const record = #{ ...obj }; // TypeError: Cannot convert object with prototype to Record

No Non-Primitive Values

Records and Tuples can only contain primitive values, other Records, or Tuples, not regular objects or arrays:

const obj = { x: 1 };
const record = #{ data: obj }; // TypeError: Cannot convert object to Record

Conversion of Records and Tuples

Converting from Objects or Arrays

You can use Record.from() and Tuple.from() methods to convert from regular objects or arrays:

const obj = { x: 1, y: 2 };
const record = Record.from(obj);
console.log(record); // #{ x: 1, y: 2 }

const arr = [1, 2, 3];
const tuple = Tuple.from(arr);
console.log(tuple); // #[1, 2, 3]

Converting to Objects or Arrays

You can use the spread operator or Object.fromEntries() to convert Records or Tuples to regular objects or arrays:

const record = #{ x: 1, y: 2 };
const obj = { ...record };
console.log(obj); // { x: 1, y: 2 }

const tuple = #[1, 2, 3];
const arr = [...tuple];
console.log(arr); // [1, 2, 3]

Performance Considerations for Records and Tuples

Due to their immutability, Records and Tuples may be more efficient than regular objects and arrays in certain scenarios. For example, React's shallow comparison can more quickly determine if a Record or Tuple has changed:

const prevProps = #{ name: "Alice", age: 30 };
const nextProps = #{ name: "Alice", age: 30 };
console.log(prevProps === nextProps); // true

Browser Support for Records and Tuples

Currently, the Record and Tuple proposal is still in Stage 2 and is not natively supported by any browsers. However, you can use them via the Babel plugin @babel/plugin-proposal-record-and-tuple:

npm install --save-dev @babel/plugin-proposal-record-and-tuple

Then add it to your Babel configuration:

{
  "plugins": ["@babel/plugin-proposal-record-and-tuple"]
}

Future Development of Records and Tuples

The Record and Tuple proposal is still evolving. Future updates may include additional features like pattern matching and richer APIs, further enhancing JavaScript's capabilities in handling immutable data.