JavaScript: Primitive vs Reference Values

How and when to use on your daily development

Sometime the misconception of disregarding on learning how Primitive and Reference value works on JavaScript is very common on new developers. Sometimes this is just a simple practice that sometimes causes Accidental Complexity on the development on as long run.

Primitive Values

Primitive Values: are values that has a dedicated memory address values on the Stack Memory. They are values and doesn’t have properties.

Every programming languages has its own way to manage primitive values. Commonly primitive values are more special in terms of storage. It has a fixed address allocated on the stack memory.

List of JavaScript primitive value types are string, Number, Boolean, undefined, null. But they have also have a Primitive methods that they can use.

JavaScript primitive global methods: ( String, Boolean, Number )

123 and Number(123) are the same. Global primitive methods are commonly used to return the primitive value of the global object.

EXAMPLE: Let’s have an example for the primitive method Number()

Different implementation but the same values

Number() is used to return An object that represents a number of its kind or it will return a NaN also known as “Not a Number”. It’s also the same as String, and Boolean. They return the same thing based on their kind except handling an outlier.

I use Primitive class to check if the value that is passed on my class or function is the same as what needed.

Number(age) checks if the given parameter is a number or not. If not; it will return a “NaN” value or also known as “Not A Number”

ANOTHER EXAMPLE USING String()

In this scenario is if you wan’t to save a certain value to be the same as the database column type expected. You can convert the parameter that represents a value before saving to the database to make sure that the requirements are met.

saveName(234) supposed to be invalid since the SQL expects a string name value. But since we put a String method within the name value. any parameter before its been saved is converted to a string type.

This states the value is a number given from the function saveName(). 234 is a primitive type of number and it can cause an error in the database IF the expected column to be save is a type of string; Yes value 234 is not a real name but let’s just say that it’s really a name.

JavaScript is loosely type. In order to have constraints at least by type. we can use these Global Primitive methods to convert the values.

Reference Values

Reference Values: are values that are stored dynamically on the Heap Memory or A.K.A free store.

They are defined by properties. There properties are either default properties or added properties

HEAP MEMORY: Dynamic storing on free storage means that the data are stored in a pool of memory with a random memory address.

Reference values are commonly used on large amount of data. They are group as JavaScript Object Notation or JSON, Function, or Class. At least on my case.

EXAMPLE:

A variable profile is assigned by an object with a property of firstName, lastName, and birthDate

Properties ( firstName, lastName, birthDate ) are allocated to the HEAP MEMORY and sends back the allocated address to var profile.

The Properties are not passed back to var profile but only the allocated address from the HEAP MEMORY

DISADVANTAGE: The disadvantage of having reference type is if you assign it to another value and change it even if you change it to the next assigned value. the first declared value will also changed. Reference values works where the assigned value are not the exact value but only the address are assigned.

EXAMPLE:

var profile is assigned to var jane now has the REFERENCE value of var profile.

what happens is when before saving it to the var profile. It is allocated to the HEAP MEMORY and creates a snapshot with the address and returns the object address to the var profile.

And when var profile is assigned to var jane. Ideally the address saved from var profile is also passed to var jane.

Therefore the reference is the address passed from var profile to var jane.

Now we modify the firstName property of var jane. What happens is since the value is not really COPIED but REFERENCED. the var profile’s property firstName is also changed.

Example below is to check using the Object.is method from ES6 to check if var profile and var jane share the same reference

Therefore be careful of data altering if both object are on the same scope.