DEV Community

Cover image for Reference vs Literal in JavaScript.
Fahad Khan
Fahad Khan

Posted on

Reference vs Literal in JavaScript.

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,

  1. Data types & a Variable
  2. Primitive type vs reference type
  3. 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 languages have 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 be get confused there are 6 data types in JavaScript in general.

  1. Number > integer, BigInt, floats etc.
  2. String > Array of characters i.e words
  3. Boolean > True/false
  4. Null > no value (technically null is a value)
  5. undefined > not defined at declaration time
  6. 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 tells to the computer about declaring of data not the form of the data.
Alt declaring the variables in JavaScript
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 JavaScriptthat 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 the two reference types are objects and arrays (technically one, since arrays are objects). 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.
Alt primitive type vs reference type in memory process

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 of your data in an object, function, array form, and reference form has already designed a prototype of and can be accessible with new keyword.
Alt literal vs reference in javascript
both codes have the same work but different in structural nature during declaration. In this case, I just create reference object but you can make reference Function and Array also by writting new Function() new Array()
That's all about reference vs literal. If you have any query you can ask me at any time.

Top comments (0)