how can i refactor this function using array destructuring?

Question

Helo everybody,

I have build this function to convert the fetch data of an Api to an array of objects, but linters are requesting me to use array destructuring.

can jou please help me? im just a begginner so please be nice!

export const organiceData = async () => {
  const data = await getData();
  const toArr = Object.entries(data);
  let newBook;
  const arr = [];
  toArr.forEach((book) => {
    newBook = book;
    newBook[1][0].id = book[0];
    arr.push(newBook[1][0]);
  });
  return arr;
};

This is all it is telling me "error Use array destructuring prefer-destructuring" in this case it would be on line 8 of my code "newBook[1][0].id = book[0];" — , Jul 13 '22 at 20:37
It looks like it's asking you to replace `newBook[1][0].id = book[0]` with `[newBook[1][0].id] = book`. — Wyck, Jul 13 '22 at 20:42
I don't believe you. I tried it at https://validatejavascript.com/ and your lint error went away. `foo = bar[0]` can be replaced with `[ foo ] = bar`. — Wyck, Jul 13 '22 at 21:10
@Wyck: Really? And you tried every linter in the list and every combination of settings? — Scott Sauyet, Jul 14 '22 at 12:30
@andgarzonmal: You should probably describe the linter you're using and whatever custom settings you've applied. I do have to say that this looks to be quite bizarre code. If you supplied the input format (the result of `getData()`) and the desired output, we might be able to help you actually clean it up. — Scott Sauyet, Jul 14 '22 at 12:34
thanks for your comments i will take it into account next time — , Jul 15 '22 at 00:24

score 1 · Accepted Answer · answered Jul 13 '22 at 23:30

Ignore that particular warning message. But still you should fix some things in your code:

use map instead of forEach+push
get rid of the useless newBook alias - assignment is not creating a copy, and certainly not a deep copy of the object
book is not actually a book object, it's a tuple (two-element array) representing a key-value pair. The book object is the value - or rather, it appears to be contained in the first element of the value which is itself an array.

export async function organiceData() {
  const data = await getData();
  return Object.entries(data).map(pair => {
    pair[1][0].id = pair[0];
    return pair[1][0];
  });
}

Now we could also use destructuring instead of the pair variable, same as doing const key = pair[0], value = pair[1];:

export async function organiceData() {
  const data = await getData();
  return Object.entries(data).map(([key, value]) => {
    value[0].id = key;
    return value[0];
  });
}

If you want to create a copy of the object before putting an id property on it, as to not mutate it, you can use spread syntax in an object literal. We may also further use destructuring on the value (like const book = value[0];):

export async function organiceData() {
  const data = await getData();
  return Object.entries(data).map(([key, [book]]) => {
    return {...book, id: key};
  });
}

how can i refactor this function using array destructuring?

1 Answers1