Categories
javascript web development

Understanding Primitives and Reference Types in JavaScript

Hey guys 👋🏻,
In this article, let us cover the topic of Understanding Primitives and Reference Types in JavaScript.

Image description

Primitive value is stored directly in the location that the variable accesses. And the Reference values are objects that are stored in the heap. Reference value stored in the variable location is a pointer to a location in memory where the object is stored. This is something that I will demonstrate just a bit later. So stay with me.

Basic Primitive Types and Reference Types

JavaScript supports 5 primitive data types: number, string, Boolean, undefined, and null.

These types are referred to as primitive types because they are the basic building blocks from which more complex types can be built. Of these five, only number, string, and boolean are real data types in the sense of actually storing data.

Undefined and null are types that arise under special circumstances. The primitive type has a fixed size in memory. For example, a number occupies eight bytes of memory, and a boolean value can be represented with only one bit.

Contrary to this, reference types can be of any length. They don’t have a fixed size.

For primitives, they are always copied as a whole value whereas for reference types they are copied by reference.

For variables that hold values we only compare their values whereas in case of reference types like objects, it is not the case.

Consider this example :

Image description
Image description

The above log gives true because both a and b are referencing to the exact same memory location. So let us say the memory for the arrow was allocated at some memory address of say 4k. So a is a reference that will point to the array object that is sitting at memory address 4k. So if you then assign a to b like we do above, then we have a new reference that points to the exact same object in the memory. So therefore since both the references point to the exact same object in the memory that is why it gives true for the strictly equality comparison between a and b (for the above log).

But if I declare another array with the exact same content say c.

and then do this :

Image description

Then the above log will resolve to false because this new array will get allocated at a different memory location say 5k. So if we compare a and c using a strict equality comparison, then it will resolve to false because both the references a and c point to different memory locations namely 4k and 5k respectively and hence you get false.

Now consider example for primitives. For this case you just compare the values. So if we have :

and then we say :

Then for the above log we make sure that both the type and the value are equal for the things (primitives under comparison). Both are 3 and both are numbers so hence we get true for this.

Next if we say

This will resolve to false because 3 and 4 are not equal.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript

Beginner JavaScript – 7 – Introduction to Data Types

✨Beginner JavaScript – 7 -Introduction to Data Types 

Hey everyone 👋🏻,

In this article, let us discuss about the basic introduction to Data Types in JavaScript. This is the seventh part of my Beginner JavaScript Series on Dev.

Data Types in JavaScript – A complete picture

Alt Text

Any variable that we define in JavaScript has a data type.

For example, if you have a sentence then that sentence is a series of characters so in the programming language, it is referred as a string of characters. A word itself is a string as well because it is composed of several characters like ‘cricket’, ‘javascript’ etc. Any numerical figure will be of number data type.

So these are the data types that we have in JavaScript and we will understand briefly about them in this post.

  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. Symbols
  7. Objects

Numbers

In JavaScript, numbers are primitive data types. For example,

const a = 4;
const b = 34.44;

Unlike other programming languages, here you don’t have to specifically declared for integer or floating values using int, float as we do in C++, Java etc. With the variables of this data type, you can perform operations like addition, subtraction, multiplication, exponentiation etc.

String

A JavaScript string represents a series of characters like “Good Morning”. A string can be any text inside double or single quotes:

const stringOne = "Good Morning";
console.log(stringOne); // logs "Good Morning" to the console

We will learn more about strings in a separate post.

Boolean

A JavaScript Boolean represents one of two values: true or false.
So using a boolean, you can check the truthiness or false state of some expression. We will learn more on Booleans in a separate post. But let us see a real quick example to understand a boolean in a nutshell.

const day = "Monday";
const isMonday = day === "Monday"; // If day is Monday, this expression will resolve to true else it will resolve to false. 
console.log(isMonday); 

Null

The value null represents the intentional absence of any object value. The meaning of the word null is void or absence of something It is one of JavaScript’s primitive values and is treated as false for boolean operations. There is a little quirk here despite null representing the absence of a value yet the data type for it is object in JavaScript.
You can assign null to a variable to denote that currently that variable does not have any value but it will have later on. A null means absence of a value.

console.log(typeof null);          
// "object" (not "null" for legacy reasons)
let someVariable = null;
console.log(someVariable); // null 

Undefined

It is the default value of a variable when it is just declared but not assigned an initial value.

let name; 
console.log(name); // logs undefined to the console 

let age = 21;
age = undefined; 
console.log(age); // logs undefined to the console.

Comparing null and undefined

When comparing null and undefined using ==, they are considered equal. For example,

console.log(null == undefined); // logs true to the console.

The reason for getting true in the console for the above code snippet is that , == compares values by performing type conversion. Both null and undefined return false. Hence, null and undefined are considered equal.

However, when comparing null and undefined with strict equality comparison using ===, the result is false.

console.log(null === undefined); // logs false to the console

Symbols

A symbol represents a unique identifier.
A value of this type can be created using Symbol():

const newId = Symbol();
console.log(newId); 

You could optionally also pass an argument to the Symbol to provide it some description.

Symbols are guaranteed to be unique. So even if you create many symbols with the exact same description, they are still considered as different values. The description is kind of a label and it does not affect anything.

Object

It is also one of the data types that we have in JavaScript. An object is a collection of key-value pairs. So each object that you and I create can be represented using the Object Literal Notation and it takes on property names along with their corresponding values. So let us see an example for objects as well.

const user = {
  firstName: "Alex",
  lastName:"Jones",
  age: 21,
  eyeColor: "blue",
  programmingLanguages: ['Java','Python','JavaScript','Ruby'],
  isDeveloper: true
};

Check my video on Introduction to Data Types to get more understanding on these:

So this is it for this one. Thanks for reading !