Introduction to reference types in JavaScript

Introduction to reference types in JavaScript:

 The basic difference between primitive and reference types is that in primitive types the values are stored in the variable whereas in reference types the reference/address to that variable is stored in the variable. Let us understand the difference between both using an example.

Example:


// primitive

let x = "JS";
let y = x;

console.log(y);  // "JS"

x = "Java";

console.log(x);  // "Java"
console.log(y);  // "JS"


// reference

let a = {language:"JavaScript"};
let b = a;

console.log(b);  // {language:"JavaScript"}

a.language = "Java";

console.log(a);  // {name:"Java"}
console.log(b);  // {name:"Java"}

Enter fullscreen mode Exit fullscreen mode

primitive

reference

Another difference between primitive and reference types is that primitive types are stored in the stack whereas reference types are stored in a heap as their size varies dynamically.

In primitive types we use typeof operator to find whether a given datatype is primitive or not, whereas in reference types we use instanceof operator to find whether the given type is a reference type or not.

JavaScript has 3 reference data types, we will understand each one with an example.

1. Arrays
2. Functions
3. Objects

Arrays

In JavaScript, if you assign an array to a variable it is the reference to the array that the variable holds not the value so any changes to the array will reflect on the original array lets us look at an example to understand better

Example


let languages = ["c","c++","java"];
let lang = languages;

languages[2] = "javascript";


console.log(lang);  // ["c","c++","javascript"]


Enter fullscreen mode Exit fullscreen mode

Functions

In functions when you pass primitive type data, any changes only happen to formal arguments but doesn’t reflect on actual arguments. Let us look at an example.


function foo(val){
  val+="script";
}

let lang = "java";
let result = foo(lang);

console.log(lang);  // java
console.log(result); // javascript

Enter fullscreen mode Exit fullscreen mode

In the above example, you can see that changes in the formal arguments are not reflected in actual arguments.

However, in reference types when you can pass an object to a function you can modify its properties but not the object. Look at the example below to understand better

// Example 1
function modifyProperty(obj){
   obj.value = 10;
}


let x = {
   value : 1;
  }

modifyProperty(x);
console.log(x); // { value : 10}


// Example 2
function modifyObject(obj){
   obj = {
      value = 20;
    }
}

ley y = { value: 2 };
modifyObject(y);


console.log(y);  // {value:2}


Enter fullscreen mode Exit fullscreen mode

Objects

In JavaScript, a variable that stores an object is accessed by its reference instead of value.

Refer to the first example to get a better understanding.

Thank you for reading the article please give your feedback and suggestions below in the comments.

from Tumblr https://generouspiratequeen.tumblr.com/post/635222901917974528

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s