Values Types, Variables, Identifiers, Pointers, and Memory Addresses in JavaScript

Some Basic JavaScript Terminologies That May Get You Confused

The first thing one has to deal with while learning JavaScript (even programming as a whole) is the technical terms surrounding it. There is a whole lot of them! Meanwhile, everyone wants to be up and running (building stuff) immediately they start learning coding. Yes, the best way to learn coding is by getting your hands dirty. But what happens to the fundamental terms? And without a convincing understanding of these terms, I'm afraid the foundation is still weak, and understanding the language can be a myth. I've seen many developers who have successfully gone above beginner's stage, without a proper understanding of some of these terminologies and how they work. The truth is that this kind of people continually pay for it whenever it's time to study code's behaviour or debug. Below are few of these terminologies and how they function:

Variables, Identifiers, and Values

In oftentimes, variables and identifiers are mistaken for each other. Yes, non-exclusively, they're the same, but technically, they're different. A variable is a user-defined word or combination of alpha-numeric characters (possibly with some symbols), that's used to point to a memory location and contain the value in the memory. This is what I'm talking about, when you do:

1const phoneNumber = "+2348146931607";
2

You're saving the string "+2348146931607" into a memory stack and you're using the word phoneNumber to point at that location in the memory.

Meanwhile, an identifier is also that word, or combination of alpha-numeric characters and symbols that is used to identify variables, functions, arrays, and the likes. Now you must be confused, but wait a moment. Have it at the back of your mind that all variables are identifiers but not all identifiers are variables because some identifiers are just the names given to some entities such as a function,, and an object. In the example above, the word "phoneNumber" is both a variable and an identifier, but look at it in the following example:

1const employee = {
2name: "Olasunkanmi Ajibola",
3phoneNumber: 2348146931607
4}
5

The identifier "employee" is technically not a variable, it's only used to identify an object that contains some properties. However, the data contained in variables are referred to as values, and can either be of primitive type or reference type. The primitive values as the basic value types in JavaScript such as string, number, and boolean; while the reference value is a collection of primitive values or properties. E.g "+2348146931607" as a primitive value, and {name: "Olasunkanmi Ajibola", phoneNumber: "+2348146931607"} as a reference value. It's OK if you don't understand this yet, you'll get it soon.

Memories, Pointers, and Value Access

I'm starting from Memories because we'll need it while explaining others. In saving values to memory, JavaScript uses two kinds of memory - the stack and the heap. These terms are two thick Computer Science topics so I won't go deep into them here, I'll just briefly introduce them.

The stack is like a frequently accessed memory where majorly the primitive values and pointers are kept. For a technical reason, only the values whose size can be pre-calculated are stored in the stack memory (string, number, boolean, null, undefined), and they are saved as a stack i.e Last In First Out (LIFO). The heap on the other hand saves the values whose sizes can't be pre-determined, such as objects and arrays, then keep their pointers in the stack memory for easier access. Like I said earlier, this is deeper than this short explanation, but we can hold on to that for the later part of this article.

The Stack and Heap Memories

Pic Credit to Maximilian Schwarzmüller

Let me introduce you to Pointers and Values Access with a code sample:

1
2var newStudent = {
3    name: "Ewatomi", 
4    phone: "2348146931607"
5    };
6var favStudent = newStudent;
7favStudent.phone = "2347069426383"
8console.log(newStudent.phone)
9

Without reading further or trying it, can you guess what will be printed to console? Think. You'll see 2347069426383 logged in the console, but why? This is where Value Access, Memories, and the Pointers come in.

When the newStudent was saved to the memory, the value made it to the heap memory while a pointer to the heap memory location got saved to the stack memory. When the newStudent was assigned to the variable favStudent, it didn't copy the value of newStudent, it only assigned the pointer to its memory location which means new value wasn't given to favStudent, its value still points to what's saved in newStudent memory location. So, when favStudent.phone was manipulated, the property changed in the newStudent.

How then can we get the values of newStudent into favStudent without it manipulating newStudent when changed? There are different ways to achieve this, I'll only share the one which is the most recently introduced method - Spread Operator.

When you have

1 var newStudent = { 
2     name: "Ewatomi", 
3     phone: "2348146931607" 
4     };
5
6

and you want to copy it's value into say favStudent, you can do:

1var newStudent = {
2    name: "Ewatomi",
3     phone: "2348146931607"
4     };
5var favStudent = {...newStudent};
6favStudent.name = "Ola"
7console.log(newStudent.name)
8
9

This will simply log "Ewatomi" to the console because using the Spread Operator "..." to copy the properties of newStudent, we're not pointing at the memory location, we created another memory location and saved the properties there almost independently. I hope this is clearer now.

---

If you learned anything, kindly hit the clap button and share the article with your friends. If you have anything to add, use the comment box below. If there is any suggestion concerning the blog, use the Feedback button at the top. If you want to hire me for Web Dev or writing gig, use any of the platforms at the end of the page.