JavaScript Reduce. This is a method that is not complicated, but really confusing and does not know when to apply in developers’ application. Even good coders sometimes find it really confusing to use the reduce javascript method.
reduce javascript – convert array to object js
JavaScript Reduce syntax
As mentioned earlier, the Reduce Method javascript is not complicated. Take a look at the syntax below.
arr.reduce(callback, initialValue);
Return JavaScript Reduce
Remember that the reduce method will only return a single value and a unique value. Remember to use reducer.
Example JavaScript Reduce
A very simple first example for those who have never used reduce, let’s see how reduce is handled? Total:
1 2 3 4 5 6 | const value = 0; const numbers = [10, 20, 30]; for (let i = 0; i < numbers.length; i++) { value += numbers[i]; } |
If you have not used reduce and sum will use this method. Ok it works very well but, pay close attention to see value = 0, after running is complete the value value will change, this time value = 60. Now see how reduce javascript will handle this situation?
1 2 3 4 | const numbers = [5, 10, 15]; const total = numbers.reduce((accumulator, item) => accumulator + item) //Result total = 60 |
Result total = 60 without additional declarations as above. This is a very gentle example for you to understand. Now read on to see if reduce helps coders handle more complex tasks.
Convert array to object javascript using reduce Suppose we have the following array:
1 2 3 4 5 6 7 8 | const players = [ { id: 11, name: 'Messi', age: 33 }, { id: 12, name: 'Ronaldo', age: 34 }, { id: 13, name: 'Young', age: 35 }, { id: 14, name: 'Mane', age: 21 }, { id: 15, name: 'Salah', age: 24 }, ] |
Now we want to Convert array to object js that looks like this.
1 2 3 4 5 6 7 8 | const playersModified = { 11: {id: 11, name: "Messi", age: 33} 12: {id: 12, name: "Ronaldo", age: 34} 13: {id: 13, name: "Young", age: 35} 14: {id: 14, name: "Mane", age: 21} 15: {id: 15, name: "Salah", age: 24} } |
If you do not know how to use reduce, it takes a lot of time to handle the above work. Let’s take a look at how reduce handles reduce array object javascript. First write a function return about objects Trust me, here you will learn a lot of tips and tricks in javascript .
1 2 3 4 5 6 7 8 9 10 | const convertArrayToObject = (array, key) => { const initialValue = {}; return array.reduce((obj, item) => { return { ...obj, [item[key]]: item, }; }, initialValue); } |
Use convert an array into an object in javascript
1 2 3 4 5 6 7 8 9 10 | const players = [ { id: 11, name: 'Messi', age: 33 }, { id: 12, name: 'Ronaldo', age: 34 }, { id: 13, name: 'Young', age: 35 }, { id: 14, name: 'Mane', age: 21 }, { id: 15, name: 'Salah', age: 24 }, ] const playersModified = convertArrayToObject(players, 'id'); |
Result:
1 2 3 4 5 6 7 8 | playersModified = { 11: {id: 11, name: "Messi", age: 33} 12: {id: 12, name: "Ronaldo", age: 34} 13: {id: 13, name: "Young", age: 35} 14: {id: 14, name: "Mane", age: 21} 15: {id: 15, name: "Salah", age: 24} } |
Cool, let’s move on to another example to see reduce working on the problem of converting array to key value javascript
1 2 3 4 5 6 | const playerProfile = [ { name: "Ronaldo", team: "Juventus " }, { name: "Messi", team: "Barcelona" }, { name: "Mane", team: "Liverpool" } ]; |
Now we turn into
1 2 3 4 5 6 | const playerProfileModified = { Mane: {team: "Liverpool"}, Messi: {team: "Barcelona"}, Ronaldo: {team: "Juventus "} } |
As in the previous example, we also wrote a function first
1 2 3 4 5 6 7 | const getMapFromArray = data => { return data.reduce((obj, item) => { obj[item.name] = { team: item.team }; return obj }, {}) } |
Use
const playerProfileModified = getMapFromArray(playerProfile) Result:
1 2 3 4 5 6 7 | playerProfileModified = { Mane: {team: "Liverpool"}, Messi: {team: "Barcelona"}, Ronaldo: {team: "Juventus "} } |
Conclusion This is an article to help you better understand the use and operation of reduce javascript. You should read and refer to many processing skills in javascript programming if you want to go beyond. Good luck! I will try to give more examples for you to refer and understand more about Reduce Javascript. The more you try to follow and practice, the more you run, the more you understand. Don’t finish reading and leave it there, it’s time to use it again. Thanks for reading!
Read more about the javascript blog: https://anonystick.com