Time and Greetings in a JavaScript Function
This post is about one of my first experiences handling time in JavaScript while completing the “Fns as First Class Data: Do Behavior” lab on Learn.co. One of the directives of the lab was to create a function that, given a time entered by a user in 24-hour format, will return a greeting appropriate for the time of day.
The lab also gives us a hint to use the .split() method and parseInt() to process the time entered:
I am going to focus just on the greet function in this blog, as it gave me plenty to think about and work on. In the words of Miracle Legion, “Just say hello. It means a lot to me.”
The Solution I Arrived At
First, here are two solutions that I eventually arrived at (with some code that I will discuss later commented out):
The first solution should work if I do not need an else statement returning something like “TEST” to signal an error.
Before I came to the first solution, I worked on the second one, so the following explains my thought process for that.The parameter the_time would be replaced by an argument like “09:17” or “18:42” (6:42 p.m.) when a user enters the time of day, and this has to be split to remove the colon. It also has to be changed from a string into a number so the if and else statements can be formed with <, >, ≥, etc. operators to indicate what the returned greeting should be for different ranges of time. That is because these operators only work with numbers as far as I know.
The purpose of the split method is to remove the colon, but it also breaks the argument into two separate strings that are put into an array. For example, for “16:00” the resulting array would be [“16”, “00”].
ParseInt() can then convert the strings into integers if you iterate through each number of the array by their index, for example by doing parseInt(this_time[0]) to get 16, and parseInt(this_time[1]) to get 00. Before I used .parseInt(), I used .concat() to join the two strings in the array (this time without the colon sadly separating them!), which gave me 1600. Then I was able to run that integer through the if/else statements to find the appropriate greeting.
Misadventure #1
Now, for some of the discoveries I made before arriving at those solutions!
One of the mistakes I made was saving the first index and the second index of this_time to separate variables, one for the hour and one for the minutes. I thought that I could handle it that way, but it was a path that led to many misadventures. Below is one attempt to make it work.
The “Good Morning” greeting was being returned reliably with this function. the “Good Evening” greeting was working starting at 18:00(it was supposed to be returned starting at 17:01). And between 12:00 and 17:00, “Good Afternoon” was being returned as long as it was on the hour (12:00, 13:00, etc.). For example, passing in “12:05” as an argument led to the result of “TEST”, when it should have returned “Good Afternoon.”
The first “else if” statement was where problems were coming in. If I gave a range between 12 and 17 for the hour and did not include the part of the code involving the minutes, then if a user entered 17:12, the function returned “Good Afternoon”, when it should have returned “Good Evening”.
Though I meant for “the_minutes <01” to limit only the range of time for the hour of 17, it was read as applying to every hour between 12 and 17. At one point, I believe I got a slight variation of this to work somehow. However, even when it worked in my Chrome DevTools console, in the terminal where I was completing the lab it gave me the intriguing error of “legacy octal literals are not allowed in strict mode.” It objected to being asked to process 01, or 00, etc. as a number.
This leads me to one of my other takeaways from the lab related to .parseInt(). I had not used .parseInt() more than a couple times thus far in my learning process, so the notion of a “base” or “radix” mystified me. What I found out about this was that a radix of ten refers to the numeral system based on integers 0–9. When I experimented with this in my console, .parseInt() defaulted to a base of 10 if no argument was given for it — but refer to MDN(link below) or other documentation to get a thorough answer to what happens if you do not specify a radix. I tried changing the base to different values to see what would happen, but I was unable to understand from the output alone how the base resulted in the output it was giving me. Wikipedia gave me a glimpse of the wondrous rabbit-hole that I could have found myself going down if I had had more time to learn about different numeral systems. I encourage you all to take that journey, and I hope to join you there at some point, just not right now.
Misadventure #2
The last couple of things that I reviewed and learned more about thanks to this lab were the importance of variables and the way the .join() method works. Below is the solution I arrived at but without all of the variables in place. When I split the_time, that work was lost without a variable to hold the transformed the_time in, because the .split() method is non-destructive (it does not permanently alter what it operates on). So, none of the following operations and statements in the function work correctly later on if I do not starting saving to variables right away.
Lastly, I tried using the .join() method before I used .concat(). I made the mistake of calling .join() instead of .join(“”). You can see the different results of using one versus the other below. Also refer to the MDN for more information about ways to use this method.
At first I didn’t know why .join() was not working, but testing the code in the console allowed me to see what was happening. The .join() method separates the elements that it brings together by a comma unless you specify some other way to join them in one string. “12,00” was the result of using .join() on an argument of “12:00”, and this interestingly turned into 12 when I used .parseInt() on it, so people were being told “Good Morning” all day long.
However, .join(“”) (with no spaces between the quotation marks) resulted in the same string as when I used .concat(), so I could have done that. But when all else is equal, I generally consider it preferable to use methods with the word “cat” in them. You can decide for yourself.
