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 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.

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 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.