Night and Day explainer

The aim of this puzzle: Filter the departures to get the evening times and store it in pmTimes

Walkthrough of the solution: The departures is an array of strings. Each string is a number with followed by either 'am' or 'pm'. The morning and evening functions can be used as callbacks in the .filter() method. The .filter() uses a callback function as a check. If the check is true then it passes the filter. If the check is false then it doesn’t pass the filter. When .filter(morning) is applied to the departures array, only the elements that include 'am' will pass the filter.

To filter the departures array and get the 'pm' times, you can use .filter(evening) on the array. It’s important to know that the .filter() doesn’t change the contents of the array; it just returns a modified copy, in this case, a copy with only the elements with 'pm'.

Sample code solution:
(Tap below to reveal)

import { departures } from 'grasshopper.travel';

function morning(time) {
  return time.includes('am');
}

function evening(time) {
  return time.includes('pm');
}

let amTimes = departures.filter(morning);
let pmTimes = departures.filter(evening);

console.log('Day times: ' + amTimes);
console.log('Night times: ' + pmTimes);

JavaScript Concepts: Callback Functions, Calling Functions, Code Block (function), console.log(), .filter(), import

Additional Code (hidden code that runs before the puzzle’s code):

let departures = ['8am', '12pm', '6am', '7pm', '11am', '3pm', '10am', '2pm', '4pm'];
1 Like

what I don’t get is shouldn’t the function morning in the “… departures.filter(morning)” show its argument (time) as well? So shouldn’t it be “… departures.filter(morning(time))”? Or does this mean the function morning will only work with the argument “time” on this code? Since I don’t know much about function I think I am getting confused whether a function should always have ( ) ready for an argument to be passed.

3 Likes

Can you please anyone help me to understand the concept of using the function without an argument. departures.filter(morning) ?. It should be departures.filter(morning(time)) right ?

Hello!

departures.filter(morning);

Says

“Only return the values of ‘departures’ array that are ‘true’ when they run through the test of the function inside the parentheses of .filter Statement”

That means .filter will print the truthy values of

morning(departures)

And hence you don’t need to type
departures.filter(morning(departures));

Enlighten me if you think I am wrong. Hope that helps.

4 Likes

Good question. Perhaps @Grasshopper_Ben can clarify?

@Grasshopper_Ben another question from me would be why this line isn’t enough to produce the list we want:
return time . includes ( 'am' ) ;

Why do we need the filter as well?

Good questions!

  1. This might be a little tricky to explain, so feel free to ask any questions:

morning is the identifier for the morning() function, and it’s being used as the callback function for .filter(). It tells the computer, “Hey, in the computer memory, you are storing a function named morning. You don’t need to call the function right this second, but you’ll need to use it in this .filter() function.”

Then, when .filter() runs, it will automatically pass each element in amTimes or pmTimes into morning().

If we were to add parentheses to the end of morning, like this: morning(), that would immediately call the function, which isn’t what we want in a callback function.

Hope that makes sense. You can read more about callback functions here.

  1. In this puzzle, each time is a string like this: '7am' or '8pm', and departures is an array containing many of these strings.

.includes('am') will look at this string and return true if the string has the substring 'am' or false if it does not.

.filter() is used to get only certain elements from an array and store them in a different array, so we call it like this: departures.filter(morning), and it will get only the strings where .includes() returned true.

.includes() by itself just returns true or false, saying, “Yes, this string has 'am' inside of it”, or “No, it does not”. It won’t actually do anything with the data, such as make a list.

Let me know if you have any questions!
Ben

6 Likes

Thanks a lot! Just looking at your second answer for now. I am realising that, the two- line function morning() is built, but is not applied to the array departures until it is called as an argument in departures.filter(morning)

So now I understand why all the lines of code are necessary.

However, looking at the code again, I am scratching my head as to where (time) comes from. How would you explain that?

time is the parameter for the function. When the function is called with an argument, for example, the string '7am', this value is stored in time. Let’s look at a simpler example:

function square(num) { // num is the parameter
    return num * num
}
square(5)  // 5 is the argument

Hope this helps! Let me know if you have any other questions.
Ben

3 Likes

I need to do code on code playground but the last 3programs have “import” key on its first line but I don’t know how to put “import” on code playground or is there any other options that replacing the import function

Hey there, you won’t be able to use the import key in the code playground. In its place, think about what you’re importing, and then just declare it as a variable inside the playground.

For example, in this puzzle, departures is an array of strings like this:

['8am', '12pm', '6am', '7pm', '11am', '3pm', '10am', '2pm', '4pm']

Try declaring a new variable named departures, and giving it the same value, like this:

let departures = ['8am', '12pm', '6am', '7pm', '11am', '3pm', '10am', '2pm', '4pm'];

Hope this helps!
Ben

Some one make me understand that how is console log. Different than print.

Print and console.log does the same thing. Both are used to show something on the console.
However ‘‘print’’ is used in the app instead of console.log at the begining(I think it’s to facilitate our lessons). The real JavaScript code is ‘‘console.log’’. ‘‘print’’ is just a function that does the same thing as ‘‘console.log’’.

I hope I’m clear.

1 Like

Thankyou.

Is java and javascript different from each other

Yeah, they are different from each other indeed.

1 Like

Can anyone please help.
Why doesn’t this code work


Also how can I write morning without the parenthesis in the filter
Please help I’m stuck and getting frustrated
When I use time as a parameter it says time is not defined
Also I can’t write morning as a variable without parenthesis

Hey there, in the code playground, the key for a function’s identifier without the parentheses won’t appear. Only the function call with () will appear on the keyboard.

There’s a wonky workaround:

Create a variable with the let key. Name this variable morning, like this:

let morning = _____

A key named morning will then appear on the code keyboard. Use this key elsewhere in your code, then finally delete the morning variable you created.

Hope this helps!
Ben

Thank you. It helped