TC39 Proposal: Inline object/spread destructuring

💡 Ideas
1

Introduction

This proposal introduces a new syntax for destructuring objects in JavaScript using the from keyword or an alternative syntax below. This syntax aims to provide a more concise and readable way to extract multiple properties from an object, especially when these properties are to be used in the creation of a new object.

Motivation

Currently, in JavaScript, when one needs to pick specific properties from an object and use them to create another object, the process involves declaring a new variable using object destructuring and then using these variables to create the new object. This can be verbose, especially when dealing with multiple properties or when the property names are the same in both the source and target objects.

The proposed from syntax or the alternative syntax simplifies this process, making the code more concise and readable.

Proposed Syntax

Basic Syntax

function someFunction(data) {
  return {
    prop1 from data,
    prop2 from data,
    prop3 from data,
    // misc data...
  };
}

Shorthand Syntax

function someFunction(data) {
  return {
    ...({ prop1, prop2, prop3 } from data),
    // misc data...
  };
}

Alternative Syntax Using (:)

function someFunction(data) {
  return {
    { prop1, prop2, prop3 }: data, /* or inversed */
    // misc data...
  };
}

Semantics

  • The from keyword or alternative syntax can be used in an object literal to directly extract properties from another object.
  • When used, it creates a property in the new object with the same name as the property in the source object, and its value is the value of that property in the source object.
  • The shorthand syntax with ... allows for extracting multiple properties at once, similar to the existing object spread syntax but with the ability to pick specific properties.
  • The alternative syntax using : is provided as a more familiar form for developers who are used to the existing destructuring syntax.

Use Cases

This syntax is particularly useful in scenarios such as:

  • Picking specific properties from an object to create a new object.
  • Reducing boilerplate code when dealing with objects that have many properties.
  • Improving readability and maintainability of code that involves object property manipulation.

Backward Compatibility

This change is backward compatible as it introduces a new syntax without altering the existing functionality of JavaScript.

Polyfill/Shim

Due to the syntactic nature of this proposal, it cannot be polyfilled or shimmed in current JavaScript environments. It requires changes to the JavaScript parser.

Conclusion

The introduction of the from keyword for object destructuring in JavaScript offers a more concise and readable way to extract properties from objects. This proposal aims to enhance the language's expressiveness while maintaining backward compatibility and the spirit of JavaScript's existing syntax and design principles.

Alternatives considered

The Object.omit and Object.pick proposal would be useful for picking properties from objects as well, those the syntax isn't as conducive for plain object references, as the syntax uses plain strings for reference (e.g. ['a']) rather than being able to ref via property (e.g. { a }: data).

This would look like this:

function someFunction(data) {
  return {
    ...Object.pick(data, ['prop1', 'prop2', 'prop3']),
    // misc data...
  };
}

vs.

function someFunction(data) {
  return {
    { prop1, prop2, prop3 }: data, /* or inversed */
    // misc data...
  };
}
2

See also GitHub - rbuckton/proposal-shorthand-improvements: A proposal to introduce new shorthand assignment forms for ECMAScript object literals

1 Like
3

@rbuckton Does that proposal cover this sort of inline destructuring? If not, could we? :)

4

Read the proposal a bit closer - it does, and that's one of the main motivators for that proposal in general.

5

@claudiameadows I've looked over it a few times now and still do not see any examples that use inner-object (inline) destructuring. Everything appears to use assignments on the samne level as the destructuring, at least in the examples provided both in the README as well as the attached presentation slides.

Could you please help to clarify here? I appreciate it. Thanks!

6

Are you looking for GitHub - tc39/proposal-object-pick-or-omit: Ergonomic Dynamic Object Restructuring. instead?

7

@claudiameadows Specifically not Object.pick/omit

I am looking for syntax that would allow for inline destructuring without strings, so we can do something like what I showed in my examples above:

function someFunction(data) {
  return {
    { prop1, prop2, prop3 }: data, /* or inversed */
    // misc data...
  };
}

I actually ran into another IRL situation today where this would have been handy.

Here is the actual situation:

const dispatchData = {
  queries: ["SavedEntriesPage"],
  onCompletedData: {
    id: data.createSavedEntry.id,
    name: data.createSavedEntry.name,
    data: data.createSavedEntry.data,
    type: data.createSavedEntry.type
  }
};

This could be shortened to something like this, but this leaks those values out into the outer scope, and is often art risk of naming collisions as a result:

const data = /* some reactive value */;
const { id, name, data: innerData, type } = data;

const dispatchData = {
  queries: ["SavedEntriesPage"],
  onCompletedData: { id, name, innerData: data, type }
};

:white_check_mark: Instead, it would be useful to do something like this:

onCompletedData: { id, name, data, type } from data

:white_check_mark: or this:

onCompletedData: ({ id, name, data, type }: data)

:x: not this:

onCompletedData: Object.pick(data, ['id', 'name', 'data', 'type'])