Please explain this Javascript tutorial

Question

I'm a total newbie and I'm confused about this tutorial. I know (at least I think I know) that the functions getDate and get Month and getFullYear are pre-set functions determined by JavaScript.

Why are those preset functions necessary for this tutorial if a new Date (2000,0,1) is being submitted as an argument to formatDate? Does getDate clash somehow with the numbers submitted as an argument?

In function pad, I understand that "number" checks to see whether a number is less than 10 and, if so, adds a zero, but what is the argument submitted to function pad? How does it get the numbers to check?

Can you please take me through (using plain language) this tutorial step by step...thank you in advance

function formatDate(date) {
  function pad(number) {
    if (number < 10)
      return "0" + number;
    else
      return number;
  }
  return pad(date.getDate()) + "/" + pad(date.getMonth() + 1) +
             "/" + date.getFullYear();
}
print(formatDate(new Date(2000, 0, 1)));

I couldn't get, in which point you have confused? The purpose of the above function is to format the submitted date to dd/MM/yyyy — Jith
– Jith, Commented Feb 24, 2011 at 4:49

eapen · Accepted Answer · 2011-02-24 04:53:34Z

6

This function formats and prints the date.

The pad function is to add a "0" (not to add 10 as you noted) in front of a number that is less than 10.

This allows you to print a date in the dd/mm/yyyy format. Eg. Feb 3, 2011 will be printed as 03/02/2011 instead of 3/2/2011

Within the formatDate function, the last line is return pad(.... the "pad" function in the "formatDate" function takes each date part and sends it to the padding function to prepend a "0" to ensure the mm/dd is followed instead of possibly sending a single digit variable - such as 3/2/2011

function formatDate(date) { // date is passed here
  function pad(number) {    // note that this function is defined within the outer function
    if (number < 10)
      return "0" + number; // prepend a 0 if number is less than 10
    else
      return number; // if number is greater than 10, no prepending necessary
  }  // the pad function ends here 
  return pad(date.getDate()) + "/" + pad(date.getMonth() + 1) +
             "/" + date.getFullYear(); // note how the pad is used around the "date" and "month" only 
} // the formatDate function ends here
print(formatDate(new Date(2000, 0, 1)));

Hope that helps clarify things.

This line:

 return pad(date.getDate()) + "/" + pad(date.getMonth() + 1) +
                 "/" + date.getFullYear();

gets converted to (assuming a date of 23/2/2011)

 return pad(23) + "/" + pad(1 + 1) +  "/" + 2011;

This calls pad(23) - and the 23 is substituted into the "number" variable in the pad function. No change is required and 23 is returned.

pad(1+1) = pad(2) - and 2 is substituted into the "number" variable in the pad function. It appends a "0" and returns "02"

So, the final conversion is

return 23 + "/" + 02 + "/" + 2011;

and it ends up printing "23/02/2011".

edited Feb 24, 2011 at 4:53

answered Feb 24, 2011 at 4:40

eapen

5796 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mjmitche Over a year ago

sorry, I know it adds a zero, that was just a typo. But I don`t know how the function works. Why does it use getDate get Month and getFullYear if the date is already submitted in the argument. Also, how does "number" know to compare the month and date with 10. Does "number" automatically recognize numbers?

eapen Over a year ago

The last line in the formatDate calls pad(date.getDate()) date.getDate() returns "2" This "2" is the variable passed into the pad function and is stored in the "number" variable pad is called twice - once for the month and once for the date. Hope that makes sense.

mjmitche Over a year ago

thanks for trying but you don`t explain the questions I had in the OP or the comment. re: getDate/getMonth and getFullYear and what is the argument for pad?

mjmitche Over a year ago

thanks, it helps a bit. can you please explain how the getDate interacts with the last line of the program print(formatDate(newDate(2000,0,1))); Doesn`t getDate automatically generate the date, if so, how does that interact with the dates in the last line of the program?

eapen Over a year ago

I added some more clarification - let me know if that makes sense.

|

Dave Shepard · Accepted Answer · 2011-02-24 04:46:57Z

2

This is a tutorial about how to display a date in DD/MM/YYYY format. It creates a date, then submits it to the function formatDate which returns it in that format, and then prints it to the screen.

formatDate has an internal function called "pad." This makes sure that there are a sufficient number of zeroes at the beginning of each item. For example, if the day is Jan 1, 2000, then the programmer wants 01/01/2000. pad adds the zeroes to the month and day because they're both less than 10. It adds 1 to getMonth because months are zero-indexed in Javascript date objects: 0 is January, 1 is February, etc.

getDate, getMonth, and getFullYear are object methods of the Date class. If you're new to object-oriented programming, I'd suggest you start by exploring that to understand objects. Roughly, an object is a datatype that also has methods for manipulating that data. Date objects have getDate, getMonth, and getFullYear object methods for returning those parts of the date.

This code is fine as is, but if you're trying to do more sophisticated date parsing, you might want to check out the date.js library.

answered Feb 24, 2011 at 4:46

Dave Shepard

5272 silver badges12 bronze badges

2 Comments

mjmitche Over a year ago

thanks, it helps a bit. can you please explain how the getDate interacts with the last line of the program print(formatDate(newDate(2000,0,1))); Doesn

t getDate automatically generate the date, if so, how does that interact with the dates in the last line of the program?  note: it was from a tutorial that

s trying to teach me the things you recommend but it`s not explained clearly enough for me, unfortunately:)

Dave Shepard Over a year ago

No, getDate returns the day of the month, in this case, 1. Confusing, I know--it would be clearer if it were getDay--but getDay returns the day of the week.

Michael Dillon · Accepted Answer · 2011-02-24 05:46:26Z

0

The last line says this:

print(formatDate(new Date(2000, 0, 1)));

It has parentheses so you need to read it backwards like so:

(2000, 0, 1) // make a list of 3 numbers to pass to a function
Date(2000, 0, 1) // call the Date function
new Date(2000, 0, 1) // since Date is a builtin object, tell it that is is constructing a new object or you risk hard to find bugs
(new Date(2000, 0, 1)) // pass the new Date object to the formatDate function
print(formatDate(new Date(2000, 0, 1))); // pass the result of formatDate, a String object, to the print function

You will notice that the formatDate function never sees the three numbers therefore it has to use things like getMonth to decode the parts.

answered Feb 24, 2011 at 5:46

Michael Dillon

32.5k7 gold badges76 silver badges107 bronze badges

Collectives™ on Stack Overflow

Please explain this Javascript tutorial

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related