Functional Destructuring: Destructure via function calls using new syntax

💡 Ideas
5

Yeah I was going to complain about that abuse :-) Just write

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

instead!

I maintain my disapproval. Destructuring is not well-suited for this, since you want to pass the entire structure into each of those functions, not an individual part. Really this is just a glorified loop, as your helperFn demonstrates. I'd be open to standardising that helper functionality though - it's the well-known ap method of applicative functors. Providing it as an array method could make this look like

const [slug, date, wordCount, charCount] = [buildSlug, getDaysSince, getWordCount, getCharCount].ap(article);
// same as
const [slug, date, wordCount, charCount] = [buildSlug(article), getDaysSince(article), getWordCount(article), getCharCount(article)]

If however we were to pass only a part of the destructured object/array into the function, I could see this fit well into the concept. One might consider a syntax like the following:

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: buildSlug(slug),
    date: getDaysSince(days),
    content: getWordCount(wordCount),
    content: getCharCount(charCount),
    title: getCharCount(titleCharCount),
  } = article;
}

which would work like

const title = article.title,
      subTitle = article.subtitle,
      content = article.content,
      category = article.content,
      slug = buildSlug(article.title),
      days = getDaysSince(article.date),
      wordCount = getWordCount(article.content),
      charCount = getCharCount(article.content),
      titleCharCount = getCharCount(article.title);

Similarly for array patterns, we could make

const [fn1(a), fn2(b)] = arr;
// same as
const a = fn1(arr[0]), b = fn2(arr[1]);
1 Like