Functional Destructuring: Destructure via function calls using new syntax

💡 Ideas
7

This destructuring syntax is starting to become similar to a previous idea we've talked about here - in that thread a different syntax was being proposed, but the fundamental idea is the same:

const buildSlug = (string) => string.toLowerCase().replaceAll(' ', '-');
const getCharCount = (string) => string.length;
const getWordCount = (string) => string.split(' ').length;
const getDaysSince = (date) => (new Date() - new Date(date)) / 864e5;

for (const article of apiResponse) {
  const {
    title,
    subtitle: subTitle,
    content,
    category,
    title: slug via buildSlug,
    date: days via getDaysSince,
    content: wordCount via getWordCount,
    content: charCount via getCharCount,
    title: titleCharCount via getCharCount,
  } = article;
}

Another option to solve the original problem would be this extensions proposal. With this proposal, you can define arbitrary getters and use them on objects you don't own. If I understand it correctly, this should allow you to use third-party getters as you destructure, so you could do something like this:

for (const article of apiResponse) {
  const {
    title,
    subtitle,
    content,
    category,
    ::buildSlug: slug,
    ::getDaysSince: date,
    ::getWordCount: wordCount,
    ::getCharCount: charCount,
  } = article;
}

This proposal doesn't actually have examples of how to destructure using getter-extensions, so that was just my best guess at how the syntax would be. I also don't have a ton of hope for this proposal's future, as I've seen a couple of other proposals come out with the intent to replace this one. But, you never know - we'll see how things pan out.

3 Likes