My Assistant explainer


#1

The aim of this puzzle: Use a callback function to change what task myAssistant does.

Walkthrough of the solution: myAssistant is a function that takes 2 inputs: a string that will be stored in the time parameter, and another function that will be stored in the aFunction parameter.

When you use a function as the input of another function, it’s called a “callback function” or just a “callback”. This is different from nesting functions like you did with print(pickRandom(10)) or drawBox(pickrandom(color)) becuase the print() and drawBox() are really only using the final output of the pickRandom() call. The assistant is taking the name of the function so that it can run that function inside itself.

The starter code has the command myAssistant('6pm', recordShow). recordShow is the name of a function that’s created in some additional hidden code. '6pm' will be stored in the time parameter, and recordShow will be stored in the aFunction parameter.

When myAssistant() runs, it logs a message letting you know it’s started. Then it uses its parameters, time and aFunction, to run the command aFunction(time). Since we know what’s stored in each of those parameters, the command is the same as recordShow('6pm'). This will call the recordShow() function with the argument '6pm'.

At the bottom of your code, you can make the assistant “set an alarm” or “turn on the lights” by using setAlarm or turnOnLights as the callback function. Just remember that the 1st argument of myAssistant() should be the time (a string) and the 2nd argument is the name of a function (either setAlarm or turnOnLights)

Sample code solution:
(Tap below to reveal)

function myAssistant (time, aFunction) {
  console.log('I am your personal assistant, and I am happy to help with your request');
  aFunction(time);
}
myAssistant('6pm', recordShow);
myAssistant('10am', setAlarm);

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

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

function setAlarm(time) {
  console.log('Your alarm has been set for ' + time);
}
function turnOnLights(time) {
  console.log('Your lights will be turned on at ' + time);
}
function recordShow(time) {
  console.log('Your show will be recorded at ' + time);
}

#3

Did the tutorial, but none of it made sense. Honestly, none of the function tutorials have made any sense so far. I’ve just been filling in answers as expected.

I don’t get recursive gunctions, I don’t understand the idea of calling one function with another function like in the tutorial.

Is just frustrating.

What does this even mean? :frowning:


#4

This puzzle actually doesn’t have recursion, but it does use a callback (using a function name as an argument).

“The assistantmyAssistant function is taking the name of the functionsetAlarm, turnOnLights, or recordShow so that it can run that functionsetAlarm, turnOnLights, or recordShow inside itselfthe myAssistant function.”


When you create a function:

function sayThings() {
  print('hi');
}

It can be used in 2 ways:

  1. sayThings() : Normal function call. It will run all the code inside the block {} of the sayThings() function definition
  2. sayThings : Used as a callback. Without the parentheses, the sayThings is used like a variable that stores all the information about the function, but doesn’t run it. You want a function in its “variable form” when it’s being used an an argument in some other function.

In this puzzle, setAlarm, turnOnLights, and recordShow are all functions. They could be used directly if you put parentheses after them: setAlarm('1pm') will output 'Your alarm has been set for 1pm'.



Extra info about different ways to combine functions:


drawBox(pickRandom(color))

The pickRandom() function will use the color variable as input, and then output some color as a string. That string is fed directly into drawBox() as input, and then drawBox() outputs a colored box.


function twoBoxes() {
  drawBox('black');
  drawBox('white');
}
twoBoxes();

The twoBoxes() function doesn’t use any inputs, but when you run it using twoBoxes() it will call drawBox() twice. You can imagine replacing twoBoxes(); with the code inside the block {}


function twoSpecificBoxes(color1, color2) {
  drawBox(color1);
  drawBox(color2);
}
twoSpecificBoxes('red','blue');

The twoSpecificBoxes() function will take in 2 values and store them in the parameters: color1 and color2. Those values will be used in the 2 drawBox() calls, so that the final output is a box with the 1st color ('red') and a box with the 2nd color ('blue'). Again, you could imagine replacing the function call with the code inside the block. But this time, you also need to replace the parameter names with the argument values. Parameters are just placeholders for the argument values.


function oneThing(typeOfThing, valueForTheThing) {
  typeOfThing(valueForTheThing);
}
oneThing(print, 'hello');

The oneThing() function takes in 2 arguments: the name of another function, and a value to use as the arugment for that other function. The “other function” is called a callback. Imagine replacing the function call oneThing(print, 'hello'); with the code block {}, and remember to change all the parameters with the aguments. You end up with print('hello'). The cool thing about the oneThing() function is that it can use different callback functions. If you wanted to make a yellow box, you could do oneThing(drawBox, 'yellow').


function decrease(value) {
  if (value > 0) {
    decrease(value-1);
  }
  print(value);
}
decrease(2);

The decrease() function here is recursive. Inside of its code block {}, there is a decrease() call. Let’s replace the function call with the code block to expand out the code.

Starting with the function call:

decrease(2);

Substitute with the code block, and change the value parameter to be the argument

if (2 > 0) {
  decrease(2-1);
}
print(2);

Notice how there’s still a decrease() call. We can expand that out again, but be careful to use the right argument: (2-1) or just 1.

if (2 > 0) {

  if (1 > 0) {
    decrease(1-1);
  }
  print(1);

}
print(2);

There’s still a decrease() in there. We can replace it again, and use (1-1) as the argument value. 1-1===0

if (2 > 0) {
  if (1 > 0) {

    if (0 > 0) {
      decrease(0 - 1);
    }
    print(0);

  }
  print(1);
}
print(2);

There’s still a decrease() call, but look at where it is. It’s inside of an If Statement that is false, because 0 is not greater than 0, it’s equal. Since the If Statement is false, the code inside its block won’t run. Let’s remove it.

if (2 > 0) {
  if (1 > 0) {
    
    print(0);
  }
  print(1);
}
print(2);

No more decrease() calls! We can finish running our code now. It will print out 0, then 1, then 2, and then it’s done.


–Frankie