If we want to map each entry of an array to a new value, we can do it in a few ways. We can either use the map method or the Array.from method do to this. The map method is an array instance method that takes a callback function that has up to three parameters. The first parameter is the value of the array that’s being processed by the map method. This is a required parameter. The second parameter is an optional parameter, which is the index of the array entry that’s being processed in the array. The third argument is the array of which the map method is being called on. The callback returns the value that we want the new value to have.

For example, if we want to get a field of each array entry into a new array, we can write the following code:

const arr = [{
    food: 'apple',
    color: 'red'
  },
  {
    food: 'orange',
    color: 'orange'
  },
  {
    food: 'grape',
    color: 'purple'
  },
  {
    food: 'banana',
    color: 'yellow'
  }
];
const foodColors = arr.map(({
  color
}) => color);
console.log(foodColors);

In the code above, we used the map method to get the value of the color field and put it in a new array. In the map method, we passed in a callback function with the first parameter, with the objects in the arr array destructured into color variable, and the color variable is retrieved within the parameter then we returned it. This is will get us the value of the color field of each entry into the new foodColors array.

Alternatively, we can use the Array.from method to do the same thing. The Array.from method creates a new shallow copied array instance from an array-like or other iterable objects. The first argument that it accepts is an array or other array-like or iterable objects like NodeList, arguments , strings, TypedArrays like Uinit8Array, Map, other Sets, and any other object that have a Symbol.iterator method. The second argument is an optional callback argument function we can use to map each entry from one value to another. The callback function takes two parameters, which is the entry that’s being processed by the from method. The from method will iterate through the whole iterable object or array to map each entry to a new value. The second parameter is the index of the array or iterable that’s being processed. It returns a new array with the new entry

For example, we can replace the map method with the Array.from method with the following code:

const arr = [{
    food: 'apple',
    color: 'red'
  },
  {
    food: 'orange',
    color: 'orange'
  },
  {
    food: 'grape',
    color: 'purple'
  },
  {
    food: 'banana',
    color: 'yellow'
  }
];
const foodColors = Array.from(arr, ({
  color
}) => color);
console.log(foodColors);

In the code above, we used the callback function that we passed into the Array.from method to get the value of the color field and put it in a new array. In the map method, we passed in a callback function with the first parameter, with the objects in the arr array destructured into color variable. The color variable is retrieved within the parameter, then we returned it. This will get us the value of the color field of each entry into the new foodColors array.