Diagnostic Interview Problem: Visualizing state

Setup

• Make a Codestitch pad at codestitch.io.
• Paste the problem statement into the Codestitch pad.
• Make sure they know that they can ask questions of the interviewer.
• Make sure they know that this is "open book". They look stuff up on the Internet (preferably staying on the MDN site).

Problem statement

function reverse(str) {
  if (str.length === 0) {
    return str;
  }
  return reverse(str.slice(1)) + str[0];
}

let output = reverse('happy');
console.log(output);

The term "state" in programming refers to the current values of all the data manipulated by a given program.

Visualizing the current state at any given point in the execution of a program is an important skill for programmers. Let's practice that visualization process in this exercise.

We have provided an implementation of a function called "reverse" that reverses a string. This function calls itself in order to perform its work. Functions that call themselves in general are called "recursive" functions. Recursion itself is not a beginner-level topic, but is easy enough to understand in a simple use case, and it helps us here because it forces you to think very carefully about state.

The calls will look like this:

reverse() // 1st call
  --> reverse() // 2nd call
    --> reverse()  // 3rd call
      --> reverse()  // 4th call, etc
      <-- #4 returns a value to #3
    <-- #3 returns a value to #2
  <-- #2 returns a value to #1
<-- #1 returns a value to the original, outside caller

Your specific goal in this exercise is to fill out this "state table" for any three-letter word being reversed:

Call # | Argument | Return value
1
2
...

Let's say you wanted to reverse the word "cow". We begin filling out this table...

Call # | Argument | Return value
1      | 'cow'    |
2
...

What happens next? And next? And next?

Read the code, envision the execution, and fill in the table! :)

Sample answer

Call # | Argument | str[0] | Return value
1      | 'cow'    | 'c'    | 'woc'
2      | 'ow'     | 'o'    | 'wo'
3      | 'w'      | 'w'    | 'w'
4      | ''       | n/a    | ''

Notes for the interviewer

• No actual code is being written (!)
• They are only filling out the above table.
• Do not allow them to use console.log inside the function.
• Let them play around with the code otherwise though -- run it with different inputs and console.log the output.
• If they freeze up (can't think of what to do), ask them to "be the interpreter"
  • i.e., step through evaluating each bit in succession
• That said, of course, give them time think through it, don't rush to baby-step them.
• If they try to fill in an entire row at a time, point out that they don't know what the return value is until they actually return.
• The reasonable approach is to fill in the last column as you return from each level.
• If need be, draw their attention to the text-diagram of the call tree that we gave them.

More context on this problem

Recursion in itself is obviously a challenging topic for a learner in the earlier stages of their journey toward becoming a professional programmer.

However, as the problem statement says, it really isn't that hard to get going with recursion. A function that calls itself is not too hard to visualize. What is hard to visualize is the state at each level of recursion.

Visualizing the current state at any given point in the execution of a program is an important skill for programmers. It comes up in many ways. In JavaScript we have closures, which are snapshots of surrounding state to make available when the enclosed function is called later. In general, scope is about the subset of overall program state that's available at a given point in program execution. Not being able to understand state means you are flying half-blind as a programmer, needing to constantly run your program to have any sense of what will happen. That's like needing to build a bridge over and over to see what load it can carry... we need to act with more forethought than that.

Thus, this exercise is meant to explore the learner's current ability to grasp the concept of state and apply them to the program at hand.

This is a lot of what "reading code" really means. Just like really reading English text is a lot more than just parsing the vocabulary and grammar, reading code involves envisioning what that code does to mutate state.

Expectations of performance

The learner should be able to...

• Read code
• Understand function parameters
• Understand function return values
• Understand how String.slice() works
• Understand what the array bracket notation does when applied to a string (str[0])
• Deal with a new concept: recursion
• Visualize state of local variables at each stage of program execution

1. If they cannot really get anywhere with this problem at all, they are at a complete-beginner level and are likely to need above-average amount of time in the course.

2. If they can get going without much help, but can't finish, they are likely to need an average amount of time.

3. If they complete this exercise, they are likely to take a less-than-average amount of time in the course, and we are extra-excited to get them into Immersive.