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
fromkeyword 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...
};
}
Instead, it would be useful to do something like this:
not this: