What causes an array to accumulate duplicate objects when they are added in a loop?

Question

What causes an array to accumulate duplicate objects when they are added in a loop?

I am currently developing a calendar application using ExpressJS and TypeScript. Within this project, I have implemented a function that manages recurring events and returns an array of events for a specific month upon request.

let response: TEventResponse[] = [];
    for (let i = 0; i < events.length; i++) {
        let e = events[i];
        if (!e.isPeriodical) {
            const event: TEventResponse = {
                beginning: e.beginTime,
                ending: e.endTime,
                title: e.title,
                description: e.description,
                place: e.place,
            };
            response.push(event);
        } else {
            let beginning = new Date(e.beginTime);
            const upperDate = new Date();
            upperDate.setFullYear(year);
            upperDate.setMonth(month + 1);
            upperDate.setDate(1);
            const lowerDate = new Date();
            lowerDate.setFullYear(year);
            lowerDate.setMonth(month);
            lowerDate.setDate(1);
            console.log(lowerDate);
            console.log(upperDate);

            let dateBoundary = undefined;
            if (e.dateBoundary) {
                dateBoundary = e.dateBoundary;
            } else {
                dateBoundary = upperDate;
            }
            console.log(dateBoundary);

            if (dateBoundary >= upperDate) {
                const periodicalEventsArr: TEventResponse[] = [];
                while (beginning <= dateBoundary && beginning < upperDate) {
                    if (beginning >= lowerDate) {
                        const event: TEventResponse = {
                            beginning: beginning,
                            ending: e.endTime,
                            title: e.title,
                            description: e.description,
                            place: e.place,
                        };

                        periodicalEventsArr.push(event);
                        console.log(periodicalEventsArr);
                    }
                    const n = e.repeatPeriod!;
                    switch (e.repeatPeriodUnit) {
                        case "DAY":
                            beginning.setDate(beginning.getDate() + n);
                            break;
                        case "WEEK":
                            beginning.setDate(beginning.getDate() + n * 7);
                            break;
                        case "MONTH":
                            beginning.setMonth(beginning.getMonth() + n);
                            break;
                        case "YEAR":
                            beginning.setFullYear(beginning.getFullYear() + n);
                            break;
                    }
                    console.log(periodicalEventsArr);
                }
                response.concat(periodicalEventsArr);
            }
        }
    }

    return response;

The main for loop functions correctly, but the inner while loop, intended to add a periodic event multiple times by adjusting the date each time, is exhibiting unexpected behavior.

Although the event appears to be added correctly initially (as shown in the first console.log(periodicalEventsArr)), subsequent iterations are modifying not only the 'beginning' value of the new event but also altering the same field in all previously added events (visible from the second console.log(periodicalEventsArr)). Consequently, the final array primarily consists of duplicates of the last added event.

This issue has puzzled me for some time now, and I would greatly appreciate any insights or guidance on where I may be going wrong.

javascript arrays typescript loops express

Answer 1

Answer №1

The issue lies in consistently adding the same object, beginning, and altering its state each time, thereby affecting previous items in the array. To illustrate this problem clearly:

let beginning = new Date(); //creating a new date object
let myArray = []; //initializing a new array
myArray.push(beginning); //adding the created date to the array
console.log(myArray); //displays the current day 
beginning.setFullYear(2001); //changing the year of the date object
console.log(myArray); //reveals that the previously added item in the array also changed

To resolve this issue, a revised approach is necessary:

    let beginning = new Date(); //creating a new date object
    let myArray = []; //initiating a new array
    myArray.push(beginning); //adding the date to the array
    console.log(myArray); //displays the current day
    beginning = (new Date(beginning)).setFullYear(2001); //modifying the date object separately
    console.log(myArray); //demonstrates that the array item remains unchanged

To implement this solution in your scenario:

                        const event: TEventResponse = {
                            beginning: new Date(beginning), //cloning the date instead of referencing the same object
                            ending: e.endTime,
                            title: e.title,
                            description: e.description,
                            place: e.place,
                        };

Answer 2

The issue lies in consistently adding the same object, beginning, and altering its state each time, thereby affecting previous items in the array. To illustrate this problem clearly:

let beginning = new Date(); //creating a new date object
let myArray = []; //initializing a new array
myArray.push(beginning); //adding the created date to the array
console.log(myArray); //displays the current day 
beginning.setFullYear(2001); //changing the year of the date object
console.log(myArray); //reveals that the previously added item in the array also changed

To resolve this issue, a revised approach is necessary:

    let beginning = new Date(); //creating a new date object
    let myArray = []; //initiating a new array
    myArray.push(beginning); //adding the date to the array
    console.log(myArray); //displays the current day
    beginning = (new Date(beginning)).setFullYear(2001); //modifying the date object separately
    console.log(myArray); //demonstrates that the array item remains unchanged

To implement this solution in your scenario:

                        const event: TEventResponse = {
                            beginning: new Date(beginning), //cloning the date instead of referencing the same object
                            ending: e.endTime,
                            title: e.title,
                            description: e.description,
                            place: e.place,
                        };

What causes an array to accumulate duplicate objects when they are added in a loop?

Answer №1

Similar questions

Issue with file upload: The view is not refreshing in response to non-angular events

An error occurs when trying to load data into a grid upon clicking, resulting in an Uncaught TypeError: Unable to access properties of undefined (specifically 'dataState')

Change the value of a single element in an array using a component in ReactJS

Creating nested for loops in Python can be achieved by defining a function that generates the desired loop structure

Is it possible to extract the value displayed on a Typography component in Material UI and store it in a state variable?

Trouble with displaying cell content in ag-grid within an Angular application

Is there a way to execute Javascript in Django without revealing static files?

Utilizing Angular Filter to compare the date in a JSON file with the current system date

JavaScript asynchronous problem

phpif (the current date is after a certain specific date, do

PhpStorm alerts users to potential issues with Object methods within Vue components when TypeScript is being utilized

Building an array of objects using a foreach loop

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

Trouble retrieving desired data from an array of objects in React Native

What is the optimal approach for moving the dashboard to a separate subdomain in a static Next.js-generated landing page?

I am experiencing an issue where the onChange event is not being triggered in my React application

I am experiencing an issue where a JSON string array is being converted into a C# List object, but each field of a Model inside the List is returning a "null

Translate CSS into JavaScript while maintaining selector understanding

Getting real-time comments after they have been submitted in ReactJS

The Utilization of Callback Functions in CRUD Operations