App Lab/JS confusion between strings and variables

Question

In my APCSP class (using app lab, which is javascript based), I noticed that there are many students who struggle with the difference between a string ("foo") and a variable (foo). I've explained that strings are surrounded by quotes while variables are not, but this is still one of the most common mistakes I see. For example, a programming task could be:

Create a prompt for a persons first and last names, and then print out a greeting (stored in a variable) followed by the name (last name, first name).

and a student will write the following code:

var greeting = "Hello ";
var first_name = prompt("What's your first name?");
var last_name = prompt("What's your last name?");

var reply = greeting+" "+last_name+", "+first_name;
console.log("reply"); // <-- Here's the problem

I typically see this issue when a student is trying to output information, either to the console or set a GUI element to have that text content. I also see it occasionally in other contexts, such as conditional statements.

What can I do to help students better avoid this mistake?

Answer 1

Don't imagine that this problem is rare or that it is caused because the students don't "get it." Often they get it all too well. It is common in learning a new thing to base your understanding on what you already know about other things. This is just the sort of error I made myself as a beginning programmer, basing Fortran stuff on what I already knew about math (a lot, as a new PhD in math). The students who make this kind of error may, in fact, be very adept at using analogy to put the new information into a coherent framework.

I think your solution is to first give them a good understanding of symbol. You can start with math symbols like + etc. A symbol "stands for" something, in this case addition. The symbol isn't itself addition, but "stands for" addition. Language punctuation symbols can be likewise shown as "standing for" something. For example semicolon usually stands for statement termination (or separation, depending on the language). In Python, spaces are actually symbols.

From that you can progress to word symbols, such as foo. It is just a symbol, but is spelled out using some alphabet. It "stands for" something; perhaps a function.

Now, you can introduce variable names as word symbols that "stand for" values.

However literals, such as 5 and "foo" aren't symbols in the sense that they "stand for" something else. They stand for only themselves. So foo is a word symbol but "foo" is a literal. The former could stand for lots of different things, but the latter only for itself.

Once they start to study languages in general, the concept of a word symbol will be important to them in any case, so this early introduction is good in a larger context.

Answer 2

As always with javascript, show the right&wrong:

Show them, using the exact piece of code from your example, but add another line:

var greeting = "Hello ";
var first_name = prompt("What's your first name?");
var last_name = prompt("What's your last name?");

var reply = greeting+" "+last_name+", "+first_name;
console.log("reply");
console.log(reply);

And run it.

Then they see that when they log something with " ", the output is literally what's inside the quotes.

However, if they have a variable (this is important to note that reply is defined with var), the output is the contents of the variable. Truth be told, the output is the string representation of the object, but I fear that's too advanced at this point.

Further explaining that when they use the word var (or const etc.), you create a something that holds information. On the other hand, using quotes "", you are simply representing that information.

But no matter how well you explain it, it's still far more effective to show examples like the one above, and to give the students exercises that will allow them to experience the point you try to teach.

For example, let them try to do that with a Date object:

As an exercise, teach them about Date in JS:

var d = new Date()

and then explain that d holds info about the date and time that the line was executed.

Once the students understand the very basics of the date object, ask them to print it. The difference between

console.log(d)

and

console.log("d")

are very, very big.