Are literals and values the same thing?

Question

My understanding is that variables point to values, and while the same variable can be reassigned to multiple values, the values themselves are immutable. While Learning JavaScript the concept of "literals" seems to come up often, but I haven't found a clear explanation that differentiates between literals and values. In fact, one author equates them.

How would you compare literals to values? Please provide simple examples.

To anyone interested, I found this explanation very helpful. The way I see it now, literals always result in themselves after evaluation, whereas values can be more complex (e.g. expressions) and can evaluate to something different than themselves.

Answer 1

Well, literals are representations of values. But values are not literals.

For example, a numeric literal could be 45. That's a four character followed by a five character. But when the JavaScript interpreter sees this, it knows to turn it into a numeric value -- a JS Number representing the floating-point number 0x4046800000000000 (according to some decimal to IEEE754 binary converter I found online).

A string literal is "something like this" (some characters surrounded by quotation marks). An array literal is [something, like, this] (comma-separate expressions surrounded by square brackets).

"Literals" are syntactic notions. They are ways of identifying values to the JS interpreter. You could get the same array with new Array(something, like, this), but that's not a literal, because it isn't using the literal syntax.

Object literal: {foo: bar}. It would be totally valid to call true and false "boolean literals," but I don't think I've ever heard anyone actually say that.

---

Above is the answer to your question. Below some supporting information that might make your learning process a little less painful:

My understanding is that variables point to values, and while the same variable can be reassigned to multiple values, the values themselves are immutable.

"Point to" is sort of a heavy term that has a precise meaning when you're programming, but that doesn't come up often in JavaScript (because you don't have explicit pointers).

There are mutable and immutable values in JavaScript. Strings, for example, are immutable. So are numbers. You can't change the string "foo". If I say

var x = "foo";
var y = x;

There's nothing I can do to x that will change the value of y. Although internally we know this isn't what's happening, we can pretend that when we assign an immutable type (like a string or a number), it's making a copy of that value each time (it's not actually, because that would be inefficient, but semantically it looks the same to us).

However:

var x = [1, 2, 3];
var y = x;

Now both x and y represent a mutable value, which we can change:

x.push(4);
console.log(y); // [1, 2, 3, 4]
y.push(5);
console.log(x); // [1, 2, 3, 4, 5] 

Both x and y are names for the same array, and whether we're trying to change x or y, we're actually changing the same underlying array. You can say that the variables x and y "point to" the same array, or "hold references to" the same array, or whatever, and you're basically saying the same thing.

Things like numbers and strings can't be changed, so we don't have to worry about this distinction. But arrays and objects are mutable, so we do. Whether or not the variables store pointers to the numbers or strings or actually store the numbers or strings themselves is sort of irrelevant to the programmer, as it behaves as if they store copies of the entire values (but internally the JS engine is going to do whatever it thinks is faster).