Javascript function call returns same value?

Question

I have written a function to format a date for me, and I am calling it on a start date and an end date. The intended behavior is for the start date to be calculated with the formatDate function, and then the end date to be calculated. However, in my console, it appears as though the function is called correctly, but then the values are stored both as the end date.

Here is where I am calling the function and setting the variables:

const setTimeAndDate = () => {
        let start = formatDate(startTime)
        let end = formatDate(endTime)

        console.log('in set time and date, the start is: ', start)
        console.log('in set time and date, the end is: ', end)
    }

And here is the function to format the date:

const formatDate = (time) => {
        let hour = parseInt(time.substring(0,2)) // 13:51 -> 13
        let minute = parseInt(time.substring(3))
        let d = props.date.date
        d.setHours(hour)
        d.setMinutes(minute)

        console.log('in format date func, the time is: ', d)

        return d;
    }

The console first prints the correct values from the formatDate() function, but when it prints start and end in setTimeAndDate(), they are both the end values. I'm sure this is just a Javascript thing I am misunderstanding, but could someone explain what is happening here?

Is `props.date.date` a `Date` object? If so – it is mutable, so when you call `setHours` you change it. You can clone it in a way described in [this question](https://stackoverflow.com/questions/1090815/how-to-clone-a-date-object) — Shlang, Apr 14 '20 at 14:14
can you console.log the inputs too, i.e. startTime, and endTime at the top of your setTimeAndDate function and the prop.date too in your formatDate function (you should pass this in as an arg, as this is a function) and provided results — developer, Apr 14 '20 at 14:15
you should not update props - clone the date: `var copiedDate = new Date(props.date.date.getTime());` — developer, Apr 14 '20 at 14:21

Dusan Radovanovic · Accepted Answer · 2020-04-14T14:24:00.507

2

With new Date(props.date.date.getTime()) you can make a new date with the same time as original date

const formatDate = (time) => {
        let hour = parseInt(time.substring(0,2)) // 13:51 -> 13
        let minute = parseInt(time.substring(3))
        let d = new Date(props.date.date.getTime());
        d.setHours(hour)
        d.setMinutes(minute)

        console.log('in format date func, the time is: ', d)

        return d;
    }

edited Apr 14 '20 at 14:24

answered Apr 14 '20 at 14:18

Dusan Radovanovic

1,599
12
21

I can't believe I overlooked that. Thank you so much. – keroana Apr 14 '20 at 14:53

HermitCrab · Answer 2 · 2020-04-14T14:23:46.373

You are modifying props.date.date twice, so of course you display the latest value twice. If you want to see the 2 values, do this:

    let start = formatDate(startTime)
    console.log('in set time and date, the start is: ', start)

    let end = formatDate(endTime)
    console.log('in set time and date, the end is: ', end)

Or change your formatDate function:

const formatDate = (time) => {
    let hour = parseInt(time.substring(0,2)) // 13:51 -> 13
    let minute = parseInt(time.substring(3))
    let d = new Date(props.date.date.getTime());
    d.setHours(hour)
    d.setMinutes(minute)

    console.log('in format date func, the time is: ', d)

    return d;
}

score 0 · Answer 3 · answered Apr 14 '20 at 14:24

you are updating props - which is bad.

create a new date from the date in props

var newDate = new Date(props.date.date.getTime());

your function should be:

const formatDate = (time) => {
        let hour = parseInt(time.substring(0,2)) // 13:51 -> 13
        let minute = parseInt(time.substring(3))
        let newDate = new Date(props.date.date.getTime());

        newDate.setHours(hour)
        newDate.setMinutes(minute)

        console.log('in format date func, the time is: ', newDate)

        return newDate;
    }

props and immutability: https://stackoverflow.com/questions/26089532/why-cant-i-update-props-in-react-js — developer, Apr 14 '20 at 14:30

Javascript function call returns same value?

3 Answers3