Access previously iterated element within array.map in JavaScript?

In JavaScript, you can access previously iterated elements within array.map() using the index parameter. The map() method provides both the current element and its index, allowing you to reference earlier elements in the array.

Let's say the following is our array:

var details = [
   {subjectId:110, subjectName: 'Java' },
   {subjectId:111, subjectName: 'Javascript' },
   {subjectId:112, subjectName: 'MySQL' },
   {subjectId:113, subjectName: 'MongoDB' }
];

Using Index to Access Previous Elements

The key is to use the index parameter in the map() callback to access array[index-1] for the previous element:

var details = [
   {subjectId:110, subjectName: 'Java' },
   {subjectId:111, subjectName: 'JavaScript' },
   {subjectId:112, subjectName: 'MySQL' },
   {subjectId:113, subjectName: 'MongoDB' }
];

var output = details.map((detailsObject, index) => {
   var tempObject = {};
   tempObject.subjectId = detailsObject.subjectId;
   tempObject.subjectName = detailsObject.subjectName;
   
   const getThePreviousObject = index != 0 ? details[index-1] : null;
   tempObject.previousSubjectName = getThePreviousObject ? 
      getThePreviousObject.subjectName : 'Not Available'
   
   return tempObject;
});

console.log(output);

[
   {
      subjectId: 110,
      subjectName: 'Java',
      previousSubjectName: 'Not Available'
   },
   {
      subjectId: 111,
      subjectName: 'JavaScript',
      previousSubjectName: 'Java'
   },
   {
      subjectId: 112,
      subjectName: 'MySQL',
      previousSubjectName: 'JavaScript'
   },
   {
      subjectId: 113,
      subjectName: 'MongoDB',
      previousSubjectName: 'MySQL'
   }
]

Alternative Approach Using Array Destructuring

You can also use array destructuring for a more concise solution:

var details = [
   {subjectId:110, subjectName: 'Java' },
   {subjectId:111, subjectName: 'JavaScript' },
   {subjectId:112, subjectName: 'MySQL' },
   {subjectId:113, subjectName: 'MongoDB' }
];

var output = details.map((current, index, array) => ({
   ...current,
   previousSubjectName: index > 0 ? array[index - 1].subjectName : 'Not Available'
}));

console.log(output);

[
   { subjectId: 110, subjectName: 'Java', previousSubjectName: 'Not Available' },
   { subjectId: 111, subjectName: 'JavaScript', previousSubjectName: 'Java' },
   { subjectId: 112, subjectName: 'MySQL', previousSubjectName: 'JavaScript' },
   { subjectId: 113, subjectName: 'MongoDB', previousSubjectName: 'MySQL' }
]

Key Points

• The map() callback receives (element, index, array) as parameters
• Use index - 1 to access the previous element
• Always check if index > 0 to avoid accessing negative indices
• The third parameter array gives you access to the entire original array

Conclusion

Accessing previously iterated elements in array.map() is straightforward using the index parameter. Always check for boundary conditions to avoid errors when accessing the first element.