Strings, Objects, and REPL, Oh My!

 
So I thought I’d get going again doing algorithms. I’d start simple and go from there.

But alas REPL had other plans for me.

I did a couple of algorithms then got to Reverse Integer. This problem to be exact:
 
“Given an integer, return an integer that is the reverse ordering of numbers.”

function reverseInt(n) {

 

}

 

I like to use repl.it so I got it going on that platform entering:
 

let int = 12345;
let intStr = int.toString();
console.log(int);
console.log(intStr);

 

When it was run the result was:
12345
12345

 

intStr was not a string. Interesting, after checking for typos I enter:

 

console.log(int.toString());
Still a number. 12345.

 
 

I try:

 

console.log((12345).toString());

 

Run in repl:
12345

 

…Ok instead of the toString method I go to the String object:

 

let int = 12345;
let intStr = String(12345);
console.log(int);
console.log(intStr);

 

Still:

 

12345
12345

 
 

Next tried:

 

let intStr = String(int);

 

Then:
String(12345);

 

Then:
console.log(String(int))

 

12345
12345
12345

 
 

Now the investigation begins! There must be some reason both the toString method and the String object are not turning this number to a string! There must be something I’m missing about REPL…

 

I copy/paste my exact code into codepen.io:

 

let int = 12345;
let intStr = int.toString();
console.log(int);
console.log(intStr);

 

Result:

 

12345
“12345”

 

Finally!

 
 

Which means there IS something I’m missing about REPL. Numbers and/or strings or their conversion (at least in JavaScript) may behave differently in a REPL environment. The investigation continues…

 

I review Number.prototype.toString()
Then review the String object.

 

I discover that there are String primitives and String objects. And that JavaScript automatically gives primitive strings a wrapper to convert them to String objects, so String object methods can be used on primitive strings. String literals and strings returned from String calls, called without using the new keyword, are primitive strings.

 

In JavaScript, a primitive is data that is NOT an object and HAS NO METHODS. And all primitives are immutable, meaning they cannot be altered.

 
 

From MDN on primitives in JavaScript:

 

“It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

 

// Assignment gives the primitive a new (not a mutated) value
bar = bar.toUpperCase();       // BAZ

 

A primitive can be replaced, but it can’t be directly altered.”

 
 

Interestingly String primitives and String objects give different results when using eval().

 

 
“Primitives passed to eval are treated as source code; String objects are treated as all other objects are, by returning the object…For these reasons, the code may break when it encounters String objects when it expects a primitive string instead…
 
String object can always be converted to its primitive counterpart with the valueOf() method.”
 
 
According to the eval() docs, “The eval() function evaluates JavaScript code represented as a string.” The return value is “the completion value of evaluating the given code.
 
eval() is a function property of the global object.
 
The argument of the eval() function is a string. If the string represents an expression, eval() evaluates the expression. If the argument represents one or more JavaScript statements, eval() evaluates the statements…
 
If the argument of eval() is not a string, eval() returns the argument unchanged.”
 
 
Which brings us back to REPL.
 
If we recall, or aren’t aware, REPL stands for Read-Eval-Print-Loop.
 
 
Wiki:
 
“In a REPL, the user enters one or more expressions… and the REPL evaluates them and displays the results.
 
The read function accepts an expression from the user, and parses it into a data structure in memory.
 
The eval function takes this internal data structure and evaluates it.
 
The print function takes the result yielded by eval, and prints it out to the user.
 
The development environment then returns to the read state, creating a loop.”
 
 
The value of int, which is 12345, was output in red in repl.it. And the string was output in white, without quotations. So to get deeper insight, to check if numbers are printed in red, maybe strings are white, or maybe something else under the hood, I used the typeof operator:
 

let int = 12345;
let intStr = int.toString();

 

console.log(int);
console.log(intStr);

 

console.log(typeof int);
console.log(typeof intStr)

 

Output:
12345 (red)
12345 (white)
number
string

 

Ok so repl knows that intStr is a STRING. But there’s no quotes. Is this a JavaScript quirk of primitive strings vs. String objects? I ask.
Is it (eval)uating, eval() in r-E-p-l, the string to not really be a string? But a number? Or it encountered a String object when it expected it to be a primitive string?

 
 
 
 

scene from film Indiana Jones

 
 
 
 

Then I looked into how repl.it prints strings.
Then how console.log prints strings in general.  Maybe there’s something I’ve forgotten or maybe something new.
Also the differences between codepen and repl.it.

 

Then I came across this article:

 
“The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.
 
Parameters: It accepts a parameter which can be an array, an object or any message.
Return value: It returns the value of the parameter given.”
 

Notice it did not include a “string” as an accepted parameter. It said a message. And it says it returns the value of the parameter given. Which means the quotes can be removed in order to just display the “message.” Which would be the contents of a string, not including the quotes.

 
 

I experiment with the Chrome console:

 

let num = “12345”;
undefined
num
“12345”
let Str = “12345”;
console.log(Str);
12345
undefined
let Str = “12345”;
undefined
console.log(Str);
12345
undefined
Str.valueOf();
“12345”
typeof Str
“string”
Str
“12345”
console.log(Str);
12345
undefined

 

The a couple of more IDEs that basically did the same thing.

 

But still there are other IDEs like codepen that print the way I remember, and the way I remember the Chrome console printing console.log’s previously:

 

let int = 12345;
let intStr = int.toString();

 

console.log(int);
console.log(intStr);

 

Console:
12345
“12345”

 
 

It appears console.log is not consistent across browsers and IDEs.

 
 
So like I’ve mentioned in my newer videos, it’s been quite some time since I’ve programmed last. So I’m accustomed to how things were outputting in some IDEs and Chrome several years ago. And after searching high and low, and going around the world and back, little did I know that some IDEs are now removing the quotations from a string output from console.log. I don’t recall repl.it doing this, so this may be new. And the Chrome console now does this.
 
 
That’s it.
 
-_-
 
 
I’m still going to publish this because most likely someone else somewhere is experiencing the same confusion. Especially someone like me who hasn’t used these tools in a while. Maybe this can be the quicker answer for someone else that I couldn’t find.
 
On that note, I’m doing a TikTok about this.
 
😏
 
 

Much Love & Peace,

 

Danielle