Reference vs Literal in JavaScript.
Tags: javascript, webdev, oop
Published: 2020-09-09 23:39:02

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.
eg.
![Alt declaring the variables in JavaScript](https://dev-to-uploads.s3.amazonaws.com/i/kj2175nqrvipwjpv5h8s.png)
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 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](https://dev-to-uploads.s3.amazonaws.com/i/3d4oeb9fn1ccq7xuyojk.png)
##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.
eg.
![Alt literal vs reference in javascript](https://dev-to-uploads.s3.amazonaws.com/i/nog51p01uaezxit31ex7.png)
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.