Skip to main content

How to Add Hours to a Date in JavaScript

A common task in programming is to perform date arithmetic, such as adding a specific number of hours to a Date object. This is essential for calculating future times, setting expirations, or scheduling events. The most reliable way to do this in native JavaScript is by working with the date's underlying timestamp.

This guide will teach you the standard, immutable method for adding hours to a Date object by manipulating its millisecond timestamp, ensuring your code is both accurate and free of side effects.

The Core Concept: Working with Timestamps​

The most robust way to add or subtract time from a JavaScript Date object is to work with its internal numerical representation: the timestamp. A timestamp is the number of milliseconds that have elapsed since the Unix Epoch (January 1, 1970, UTC).

The logic is simple:

  1. Get the timestamp of the original Date object using the .getTime() method.
  2. Calculate the number of hours you want to add, in milliseconds.
  3. Add the two numbers together.
  4. Create a new Date object from the resulting timestamp.

This approach automatically and correctly handles all edge cases, such as rolling over to the next day, month, or year.

It is a strong best practice to write "pure" or immutable functions for date manipulation. This means your function should not change the original Date object but should instead return a new one with the updated value.

For example, you have a Date object and need to get a new Date object that is N hours in the future.

// Problem: How to get a new Date object representing 3 hours after this one?
const startDate = new Date('2025-10-16T10:00:00Z');

Solution: This function creates a copy of the date before modifying it, preserving the original.

function addHoursToDate(date, hours) {
  // Create a new Date object from the provided date to avoid mutation
  const dateCopy = new Date(date);
  
  // Get the current timestamp and add the hours in milliseconds
  const newTimestamp = dateCopy.getTime() + (hours * 60 * 60 * 1000);
  
  // Set the new time on the copied date object
  dateCopy.setTime(newTimestamp);
  
  return dateCopy;
}

// Example Usage:
const startDate = new Date('2025-10-16T22:00:00Z'); // 10 PM UTC

// Add 3 hours, which rolls over to the next day
const futureDate = addHoursToDate(startDate, 3);

console.log('Original Date:', startDate.toISOString());
console.log('Future Date:  ', futureDate.toISOString());

Output:

Original Date: 2025-10-16T22:00:00.000Z
Future Date:   2025-10-17T01:00:00.000Z

Let's see how the logic work by breaking down the key parts of the function:

  • const dateCopy = new Date(date);: This is the crucial first step for immutability. It creates a new Date object with the same internal timestamp as the original.
  • hours * 60 * 60 * 1000: This is the conversion factor. We multiply the number of hours by the number of minutes in an hour (60), seconds in a minute (60), and milliseconds in a second (1000) to get the total duration in milliseconds.
  • dateCopy.setTime(newTimestamp): This method updates the Date object to represent the new timestamp. Since we are calling it on dateCopy, the original date is left unchanged.

A Note on Mutability: Why You Shouldn't Change the Original Date​

You will often see examples that modify the original Date object directly.

The mutable approach is NOT recommended:

function addHours(date, hours) {
  // ⛔️ This changes the original date object!
  date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
  return date;
}
note

This is considered a bad practice because it creates a side effect. If you pass a Date variable to this function, that variable will be permanently changed, which can lead to unexpected bugs elsewhere in your application. Always prefer the immutable approach of creating a copy first.

Conclusion​

Adding hours to a Date in JavaScript is a simple task when you work with the underlying millisecond timestamp.

  • The recommended best practice is to create a reusable and immutable function that:
    1. Makes a copy of the input Date object.
    2. Calculates the new timestamp by adding the desired hours in milliseconds.
    3. Returns the new Date object.
  • The formula for the duration is hours * 60 * 60 * 1000.
  • Avoid mutating the original Date object directly, as this can lead to unpredictable side effects.

Table of Contents