What Is The Difference Between Reference And Literal In JavaScript?
What you will learn?
Fahad Khan
Before reading this article, you must have intermediate knowledge of JavaScript
like a little bit OPP
concepts, Arrays
Objects
& functions
.
What you will learn?
Here we will see about,
- Data types & a Variable
- Primitive type vs reference type
- Literal vs reference (Object, Function, Array)
1. Data types & a Variable
Data types
If you are familiar with programming languages like, C
C#
C++
Java
etc. You have noticed that every programming language has their own data types and declaration of variables & same case with JavaScript. But if you search about data types of JavaScript you will find varieties of answers about it, some resources will say there are 8 data types and some will say 6 and so on. But don't get confused there are 6 data types in JavaScript in general.
- Number > integer, BigInt, floats etc.
- String > Array of characters i.e words
- Boolean > True/false
- Null > no value (technically null is a value)
- undefined > not defined at declaration time
- symbol > a unique value that is not equal to another value
You Must have to know, these are the types of data or forms of data in other words. The above 6 types can be modified in more detail like in sub-categories. As JavaScript is a loosely and dynamic type language which means there is no force to write the form of data eg. int
string
boolean
you just simply tell computer about declaring of data not the form of the data.
eg.

We just declare our variables by not telling the machine what type of our declared data. It is the JavaScript job to find the type of data. For assurance, we can ask from JavaScript that what type of data we have declared by typeof
keyword/operator. let's break here about types of data because this is not our main topic.
A Variable
In the above visual piece of code, we have covered the variable also. Furthermore, a variable is the part of the memory for storing some kind of data. eg. let name = 'Hawking';
now variable name
has space in memory containing data Hawking
2. Primitive type vs reference type
Whatever we saw above Data Types & a Variable
these were primitive type of data which means whenever memory stores, this data will save an unordered way (where ever memory sees space put there) but in reference case memory store whole data in sequence order (with memory reference) you know why? because reference type of variables are Array
Function
and an Object
.
So, these types store in memory with sequence and generate reference (address) in the memory cell. This is the fundamental difference between primitive and reference data types.
In other words, reference type means when you create an object, that value is not directly assigned to the variable. Instead, a reference to that value is what gets set. All that variable knows about is the location of the object in memory, not the object itself.
Now see how primitive and reference works on memory side.

3. Literal vs reference
(Object, Function, Array)
somehow both literal vs reference are the same thing but literal is a way to make a prototype (blue print) of your data in an object. While function, array and reference form has already designed in JavaScript with a constructor and can be accessible with new
keyword.
Basically, constructor is the part of “OOP” approach! don’t think over about it if you’re beginner.
See code below how literal and reference look in real.
eg.

both let person = {} , let person = new Object()
has same work but different in structural nature while declaration. In this case, I just create reference object but you can make reference Function
and Array
with new Function()
new Array() .
That's all about reference vs literal. If you have any query you can ask me at any time.
Upvote
Fahad Khan

Related Articles