Primitive value vs Reference value

Okay, imagine your variable to be a piece of paper – a sticky note.

Note 1: A variable is a sticky note.

Now, a sticky note is very small. You can only write a little bit of information on it. If you want to write more information you need more sticky notes, but that’s not a problem. Imagine you have an endless supply of sticky notes.

Note 2: You have an endless supply of sticky notes, which store small amounts of information.

Great, what can you write on your sticky note? I can write:

1. Yes or no (a boolean).
2. My age (a number).
3. My name (a string).
4. Nothing at all (undefined).
5. A doodle or anything else which means nothing to me at all (null).

So we can write simple things (let’s be condescending and call them primitive things) on our sticky notes.

Note 3: You can write primitive things on your sticky notes.

So say I write 30 on a sticky note to remind myself to buy 30 slices of cheese for the little party I’m throwing at my place tonight (I have very few friends).

When I go to put my sticky note on the fridge I see that my wife has put another sticky note on the fridge which also says 30 (to remind me that her birthday is on the 30th of this month).

Q: Do both the sticky notes convey the same information?

A: Yes, they both say 30. We don’t know if it’s 30 slices of cheese or the 30th day of the month, and frankly, we don’t care. For a person who didn’t know any better, it’s all the same.

var slicesOfCheese = 30;
var wifesBirthdate = 30;

alert(slicesOfCheese === wifesBirthdate); // true

Note 4: Two sticky notes which have the same thing written on them convey the same information, even though they are two different sticky notes.

I’m really excited about tonight – hanging out with old friends, having a great time. Then some of my friends call me and say that they won’t be able to make it to the party.

So I go to my fridge and erase the 30 on my sticky note (not my wife’s sticky note – that would make her very angry) and make it a 20.

Note 5: You can erase what’s written on a sticky note and write something else.

Q: That’s all good and fine, but what if my wife wanted to make write a list of groceries for me to pick up while I was out to get some cheese. Would she need to write a sticky note for every item?

A: No, she would take a long list of paper and write the list of groceries on that paper. Then she would write a sticky note telling me where to find the list of groceries.

So what’s happening here?

1. A list of groceries is obviously not simple (erm… primitive) data.
2. My wife wrote it on a longer piece of paper.
3. She wrote where to find it in a sticky note.

Honey, the list of groceries is under your keyboard.

To recap:

1. The actual object (the list of groceries) is under my keyboard.
2. The sticky note tells me where to find it (the address of the object).

Note 6: Reference values are references to objects (addresses where they will be found).

Q: How do we know when two sticky notes say the same thing? Say my wife made another grocery list in case I misplaced the first, and wrote another sticky note for it. Both the lists say the same thing, but do the sticky notes say the same thing?

A: No. The first sticky note tells us where to find the first list. The second one tells us where to find the second list. It doesn’t matter whether the two lists say the same thing. They are two different lists.

var groceryList1 = ["1 dozen apples", "2 loaves of bread", "3 bottles of milk"];
var groceryList2 = ["1 dozen apples", "2 loaves of bread", "3 bottles of milk"];

alert(groceryList1 === groceryList2); // false

Note 7: Two sticky notes convey the same information only if they refer to the same object.

This means if my wife made two sticky notes reminding me where the grocery list is, then the two sticky notes contain the same information. So this:

Honey, the list of groceries is under your keyboard.

Contains the same information as:

Don’t forget that the list of groceries is under your keyboard.

In programming terms:

var groceryList1 = ["1 dozen apples", "2 loaves of bread", "3 bottles of milk"];
var groceryList2 = groceryList1;

alert(groceryList1 === groceryList2); // true

So that’s all that you need to know about primitives and references in JavaScript. No need to get into things like heap and dynamic memory allocation. That’s important if you’re programming in C/C++.

Edit 1: Oh, and the important thing is that when you pass variables around you’re essentially passing primitive values by value and reference values by reference.

This is just an elaborate way of saying that you’re copying everything written on one sticky note to another (it doesn’t matter whether you’re copying a primitive value or a reference).

When copying references, the object being referenced doesn’t move (e.g. my wife’s grocery list will always stay under my keyboard, but I can take the sticky note I copied anywhere I want – the original sticky note will still be on the fridge).

Edit 2: In response to the comment posted by @LacViet:

Well for starters we’re talking about JavaScript, and JavaScript doesn’t have a stack or a heap. It’s a dynamic language and all the variables in JavaScript are dynamic. To explain the difference I’ll compare it to C.

Consider the following C program:

#include <stdio.h>

int main() {
    int a = 10;
    int b = 20;
    int c = a + b;
    printf("%d", c);
    return 0;
}

When we compile this program we get an executable file. The executable file is divided into multiple segments (or sections). These segments include the stack segment, the code segment, the data segment, the extra segment, etc.

1. The stack segment is used to store the state of the program when a function or interrupt handler is called. For example, when function f calls function g then the state of function f (all the values in the registers at that time) are saved in a stack. When g returns control to f then these values are restored.
2. The code segment holds the actual code to be executed by the processor. It contains a bunch of instructions the processor must execute like add eax, ebx (where add is the opcode, and eax & ebx are arguments). This instruction adds the contents of registers eax and ebx and stores the result in the register eax.
3. The data segment is used to reserve space for variables. For example, in the above program, we need to reserve space for the integers a, b and c. In addition, we also need to reserve space for the string constant "%d". Variables reserved thus have a fixed address in memory (after linking and loading).
4. In addition to all of these, you’re also give a little bit of extra space by the Operating System. This is called the heap. Any extra memory you need is allocated from this space. Memory allocated in this way is called dynamic memory.

Let’s see a program with dynamic memory:

#include <stdio.h>
#include <malloc.h>

int main() {
    int * a = malloc(3 * sizeof(int));

    a[0] = 3;
    a[1] = 5;
    a[2] = 7;

    printf("a: %d\nb: %d\nc: %d\n", a[0], a[1], a[2]);

    return 0;
}

Because we want to allocate memory dynamically we need to use pointers. This is because we want to use the same variable to point to an arbitrary memory location (not necessarily the same memory location every time).

So we create an int pointer (int *) called a. The space for a is allocated from the data segment (i.e. it’s not dynamic). Then we call malloc to allocate the contiguous space for 3 integers from the heap. The memory address of the first int is returned and stored in the pointer a.

Q: What did we learn?

A: A fixed amount of space is allocated for all variables. Each variable has a fixed address. We may also allocate extra memory from the heap and store the address of this extra memory in a pointer. This is called a dynamic memory scheme.

Conceptually this is similar to what I explained about variables being sticky notes. All variables (including pointers are sticky notes). However, pointers are special because they reference a memory location (which is like referencing an object in JavaScript).

However, this is where the similarities end. Here are the differences:

1. In C everything is passed by value (including addresses in pointers). To pass a reference you need to use indirection via pointers. JavaScript only passes primitives by value. Passing references is handled transparently by the engine and is just like passing any other variable.
2. In C you can create a pointer to a primitive data type like int. In JavaScript, you cannot create a reference to a primitive value like number. All primitives are always stored by value.
3. In C you may perform various operations on pointers. This is called pointer arithmetic. JavaScript doesn’t have pointers. It only has references. Thus you can’t perform any pointer arithmetic.

Besides these three the biggest difference between C and JavaScript is that all variables in JavaScript actually pointers. Because JavaScript is a dynamic language the same variable may be used to store a number and a string at different points of time.

JavaScript is an interpreted language, and the interpreter is usually written in C++. Thus all variables in JavaScript are mapped to objects in the host language (even primitives).

When we declare a variable in JavaScript the interpreter creates a new generic variable for it. Then when we assign it a value (be it a primitive or a reference) the interpreter simply assigns a new object to it. Internally it knows which objects are primitive and which are actually objects.

Conceptually it’s like doing something like this:

JSGenericObject ten = new JSNumber(10); // var ten = 10;

Q: What does this mean?

A: It means that all the values (primitives and objects) in JavaScript are allocated from the heap. Even the variables themselves are allocated from the heap. It’s wrong to state that primitives are allocated from the stack and only objects are allocated from the heap. This is the biggest difference between C and JavaScript.