Beware of overwriting the first element in an array when creating it with a while loop in JavaScript or AppsScript

Question

Beware of overwriting the first element in an array when creating it with a while loop in JavaScript or AppsScript

I am attempting to generate an array containing all dates within a specified time frame. To test this, I have chosen Feb 9 - Feb 13 as the date range. Ideally, the resulting array should display [Feb 9, Feb 10, Feb 11, Feb 12, Feb 13]. Upon revisiting an older post, I discovered the method of using New Date() to create new Date objects each time to avoid ending up with a repetitive array like [Feb 13, Feb 13, Feb 13, Feb 13, Feb 13]. However, I am facing an issue where the very first element I push to the array is being overwritten. The output currently shows [Feb 10, Feb 11, Feb 12, Feb 13, Feb 13]. Within my while loop, I've included a print statement to monitor the array after every push, which indicates that the initial element is being replaced. Any insights on why this is occurring and how I can achieve my desired array would be greatly appreciated. Thank you!

Below is the code snippet I am utilizing:

var Current_Date = new Date(Date_start); // Starting from Feb 9 
Current_Date = new Date(Current_Date.setHours(Current_Date.getHours() - 24)); // Updating to Feb 8
var Billing_Dates = []

while (Current_Date.valueOf() <= Date_end.valueOf()) {
    Current_Date = new Date(Current_Date.setHours(Current_Date.getHours() + 24));
    Billing_Dates.push(Current_Date);
    Logger.log(Billing_Dates)
}

Simplified Output (showing array status after each push):

[Feb 09]
[Feb 10, Feb 10]
[Feb 10, Feb 11, Feb 11]
[Feb 10, Feb 11, Feb 12, Feb 12]
[Feb 10, Feb 11, Feb 12, Feb 13, Feb 13]

View Image of the Actual Output (including array status after each push)

javascript arrays datetime google-apps-script

Answer 1

Answer №1

When you perform the action

Add_Bill_Dates(Billing_Dates)

you are actually adding a reference to the date, rather than the date itself. This means that any changes made to the original date will also reflect in the dates stored in your array. Hence, the last two dates in your array always appear identical. The following line of code demonstrates this concept:

Billing_Date = new Date(Current_Date.setHours(Current_Date.getHours() + 24));

By creating a new reference using new Date(), you end up modifying only the last two elements in the array.

To rectify this issue, ensure you create a fresh reference when storing in the array :

Billing_Dates.push(new Date(Current_Date))

Answer 2

When you perform the action

Add_Bill_Dates(Billing_Dates)

you are actually adding a reference to the date, rather than the date itself. This means that any changes made to the original date will also reflect in the dates stored in your array. Hence, the last two dates in your array always appear identical. The following line of code demonstrates this concept:

Billing_Date = new Date(Current_Date.setHours(Current_Date.getHours() + 24));

By creating a new reference using new Date(), you end up modifying only the last two elements in the array.

To rectify this issue, ensure you create a fresh reference when storing in the array :

Billing_Dates.push(new Date(Current_Date))

Answer 3

Answer №2

Instead of continuously manipulating date references in place, a more efficient approach would be to create a new date object for each instance, like this:

const totalDays = 7
const oneDayMs = 24 * 3600 * 1000;
const allDates = [];
const startDate = new Date();

for (let i=0; i < totalDays; i++){
  const currentDate = new Date(startDate.getTime() + i * oneDayMs);
  allDates.push(currentDate.toString())
}

console.log(allDates)

Answer 4

Instead of continuously manipulating date references in place, a more efficient approach would be to create a new date object for each instance, like this:

const totalDays = 7
const oneDayMs = 24 * 3600 * 1000;
const allDates = [];
const startDate = new Date();

for (let i=0; i < totalDays; i++){
  const currentDate = new Date(startDate.getTime() + i * oneDayMs);
  allDates.push(currentDate.toString())
}

console.log(allDates)

Answer 5

Answer №3

function createArrayOfDates(startDate = '2/9/2021', endDate = '2/13/2021') {
  let dateArray = [];
  let startDay = new Date(startDate);
  let endDay = new Date(endDate);
  let increment = 0;
  do {
    dateArray.push(new Date(startDay.getFullYear(), startDay.getMonth(), startDay.getDate() + increment++));
  } while (new Date(dateArray[dateArray.length - 1]).valueOf() < endDay.valueOf());
  let formattedDates = dateArray.map((date) => {return Utilities.formatDate(new Date(date), Session.getScriptTimeZone(), "MMM dd")});
  Logger.log(formattedDates);
}

Execution log
12:28:30 PM Notice  Execution started
12:28:30 PM Info    [Feb 09, Feb 10, Feb 11, Feb 12, Feb 13]
12:28:30 PM Notice  Execution completed

Answer 6

function createArrayOfDates(startDate = '2/9/2021', endDate = '2/13/2021') {
  let dateArray = [];
  let startDay = new Date(startDate);
  let endDay = new Date(endDate);
  let increment = 0;
  do {
    dateArray.push(new Date(startDay.getFullYear(), startDay.getMonth(), startDay.getDate() + increment++));
  } while (new Date(dateArray[dateArray.length - 1]).valueOf() < endDay.valueOf());
  let formattedDates = dateArray.map((date) => {return Utilities.formatDate(new Date(date), Session.getScriptTimeZone(), "MMM dd")});
  Logger.log(formattedDates);
}

Execution log
12:28:30 PM Notice  Execution started
12:28:30 PM Info    [Feb 09, Feb 10, Feb 11, Feb 12, Feb 13]
12:28:30 PM Notice  Execution completed

Beware of overwriting the first element in an array when creating it with a while loop in JavaScript or AppsScript

Answer №1

Answer №2

Answer №3

Similar questions

Validation based on the condition of the request body in Express using express-validator

Utilizing React: Incorporating classes to elements with innerHTML

What is the best way to extract the text from the first visible `<td></td>` table row using jQuery?

What steps can I take to prevent the "onclick" event from triggering multiple times?

What is the best way to utilize Angular to conceal an image until it is fully loaded?

Creating gulp tasks that are compatible across different platforms, particularly using gulp-shell

Obtain a collection of a specific property from an array of objects that each contain that property

The useEffect React Hook is missing a dependency: 'fetchTracker'. Please make sure to add it to the dependency array or consider removing it

In a carousel slider, the height and width of divs are not set to specific dimensions

Will terminating a Google Cloud Storage stream impact network usage?

Be warned: Babel has detected a duplicate plugin or preset error

Error message: "React Component not identified"

The issue of asynchronous behavior causing malfunctioning of the PayPal button

Bootstrap 5.5.2 facing transition issues on bundle.js

Utilize mapping function to merge arrays

The output from the Node.js child_process.exec command returned null for stdout, yet stderr was not empty

Troubleshooting a NextJS and ExpressJS error related to on-demand entry pinging

Implementing a node.js application deployment with pm2 to ensure zero downtime

What is the best way to transfer parameters from the Vue root to a component?

Using JavaScript to modify elements that have been dynamically generated