08_PASS BY REFERENCE VS PASS BY VALUE ( PRIMITIVE VS NON_PRIMITIVE / REFERENCE VALUE)

-

  • JavaScript is dynamically typed language which means types are not defined at compile time like other object-oriented languages. JavaScript provides two categories under which the data types are divided.

  1. Primitive Values
  2. Reference Values

Primitive Values:

In JavaScript, a primitive is data that is not an object and has no methods. There are 7 primitive data types: string, number, boolean, null, undefined, symbol, biginit.
Most of the time, a primitive value is represented directly at the lowest level of the language implementation.
All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value cannot be changed in the ways that objects, arrays, and functions can be altered.” - Source - MDN
To break the above definition, it simply means that in case of primitive values, it creates and assigns a fixed location in memory for the defined variable. The primitive values are stored on Stack and the name itself is intuitive enough to understand that it is a stack of data, which has LIFO i.e. last in first operation.
     //Primitive Values..

      let testString = 'Hello World';
      let testString1 = testString;
      console.log('testString:', testString); // Hello World 
      console.log('testNumber:', testString1 ); // Hello World

      testString1  = 123;

      Console.log('testString:', testString); // Hello World
       console.log('testNumber:', testString1 ); // 123
As we can see in the above code snippet, it copies and pastes and assigns a new location on stack.
Stack Representation

Reference Values:

Reference values are objects stored in heap.Heapis a different kind of memory unlike Stack.Heap takes little longer to access and is able to hold bigger amount of data where data changes dynamically. The heap is the memory where the elements are not stored on top each other as it is done in stack but randomly, therefore each element has its own address. Reference values are primarily Objects and Arrays (Which are type of objects). To maintain Arrays and Objects in JavaScript we use both stack and heap together.
Below code snippet shows the object mutability.
// Reference Values ..

   let testObject = {
    name : 'Chandler',
    age: 28,
    address: 'New York'
      }   ;

   let testObject1 = testObject;

   console.log('testObject:', testObject.name);    // Chandler
    console.log('testObject1:', testObject1.name);  // Chandler

    testObject1.name = 'Janice';

    console.log('testObject:', testObject.name);    // Janice
    console.log('testObject1:', testObject1.name); // Janice
what gif
Here, we see both objects contain same values associated with properties, this happens because objects are handled in a special way i.e. the memory block on stack holds memory address (pointer) of this object which is in turn stored in heap.
Heap Representation
Note : As we have heard that everything is object in javascript but is it really true ?? or not.

 if you want to be really correct then , string numbers and soon others are not Real Objects but are dynamically changed to pseudo Objects , you could say something like "name.length"
  • This gives you length of name with dot notation(.) , it kind of implies that we are accessing a property name which in turn implies that  name would an object.
  •  "what happens there is it dynamically transform a string or number , so any primitive values to an object temporarily"

  • Now, all real object are handled differently as they are most expensive to create  like  math object like random function
  
        "they are more complex to manage and therefore creating them takes longer , occupies ore memory". Therefore browser typically stores them in heap , what browser does and important  is variable stores the address of place in memory( only stores a pointer)."-


As we see in the above representation when an object is created by assignment, it does not allocate new memory block but creates a new pointer block and pushes onto the stack and both the pointers are pointing to the same place in the memory, resulting a change for variables pointing to elements place in memory.
Let’s see how arrays behave when altered.
      // lets us check what if we push on Array
  let testObject = {
    name : 'Chandler',
    age: 28,
    address: 'New York',
    friends: ['Monica', 'Ross', 'Joey']
};
   let testObject1 = testObject;


    testObject1.friends.push('Racheal');

     console.log('testObject:', testObject.friends);  
    // ['Monica', 'Ross', 'Joey', 'Racheal']
     console.log('testObject1:', testObject1.friends); 
   // ['Monica', 'Ross', 'Joey', 'Racheal']
         
       Some usecases you must know as javascript developer:

  • Lets talk about Usecase Where you have a person object and age :30 and Let us create new object person1 with same value in age property
               Its seems like they are exactly same object (So let test it). I will do boolean comparision here:

     person  === person1 // false
     person  == person1 // false 

  • Well , now this makes a lot of sense , keep in mind that what we actually stored in person and person 1 is a pointer at a place in memory and these are totally two different objects.
  "even though they hold same data but they are two different  distinct object stored in two different places , so at different memory address ."

 "this is why we got false result here because of Reference type thing and it is same for comparing Arrays"
   
  
 Another implication is :

  •  Previously I created object with Let keyword ,Now here i will create object with Const keyword, 
        const hobbies = ['sports']
         hobbies.push('cooking') // push or updates something to hobbies

       
    "What do you except this works fine or not " ?
  
  •  "KEEP IN MIND" that This is a Const Keyword So, we can't change the value after it has been created . obviously you thought this will gives you a error.    
           IF we just get its output somewhere in console let say ,  We get no error but how it is possible 

                  wait what,you kidding me? 

  • keep in mind that , this array gets created somewhere in memory and what getting stored in hobbies is that the address of the array or of that objects , the address is stored in the constant. 

  • Now , when we call push , we certainly do manipulate the data in memory but what we not manipulate is "The Address" : The data in memory gets changed but is still in the same memory .           
                  But what if we do ??

       hobbies = ['sports','movies'] // Type error , Assignment to Const Variable

            "we got error here because we used equal sign here which creates a brand new address here"
   



We can achieve immutability in multiple ways
  • ES5 Object.assign :
This method is used to copy the values of all enumerable own properties
from one or more source objects to a target object.
    const testObject2 = Object.assign({}, testObject);
    testObject2.name = 'Paul';
    console.log(testObject.name); // Janice
    console.log(testObject2.name); // Paul
  • ES5 Array slice():
The slice() method returns a shallow copy of a portion of an array into
a new array object selected from begin to end (end not included) where
begin and end represent the index of items in that array. The original
array will not be modified.
  const testObject2 = Object.assign({}, testObject);
  testObject2.friends = testObject.friends.slice();
  testObject2.friends.push('George');
  console.log(testObject.friends); 
  // [ 'Monica', 'Ross', 'Joey', 'Racheal' ]
  console.log(testObject2.friends); 
  // [ 'Monica', 'Ross', 'Joey', 'Racheal', 'George' ]
This method copies own enumerable properties from a provided object into
a new object.


     // ES6 spread operator for Objects.
 let testObject = {
     name : 'Chandler',
     age: 28,
     address: 'New York'
 };
 const testObject2 = {...testObject};
 testObject2.name = 'Paul';
 console.log('testObject:', testObject.name);    // Janice
 console.log('testObject1:', testObject2.name); // Paul

 // ES6 operator for Arrays.
 const testObject2 = {...testObject};
 testObject2.friends = [...testObject.friends];
 testObject2.friends.push('George');
 console.log(testObject.friends);
 //[ 'Monica', 'Ross', 'Joey', 'Racheal' ]
 console.log(testObject2.friends);
 //[ 'Monica', 'Ross', 'Joey', 'Racheal', 'George']

    Comments

    Post a Comment

    Popular posts from this blog

    JavaScript — Double Equals vs. Triple Equals - weird things on JavaScript

    -
    The Problem JavaScript has two  visually  similar, yet  very different , ways to test equality. You can test equality with  ==  or  === . Here are the differences: Triple Equals When using triple equals  ===  in JavaScript, we are testing for  strict  equality. This means both the  type  and the  value  we are comparing have to be the same. Lets look at a couple examples of strict equality. In this first example we’re comparing the  number  5 with the  number  5. As expected,  true  is returned. Both are  numbers , and both share the same  value  of 5. 5 === 5 // true With this in mind, we can look at two more examples that will return  true : 'hello world' === 'hello world' // true (Both Strings , equal values ) true === true // true (Both Booleans , equal values ) Awesome. Now lets take a look at some examples that will return  false : In this example we’ll comp...
    Read more

    06_Understanding Execution Context and Execution Stack in Javascript

    -
    Image
    Let look inside js engine the things that execute our code and in the end ,it is all about our memory management and execution steps. For this we have two important concept: The heap memory is our long term memory , it is all about memory allocation , stores data in your system and manages access to it. " i mean browser does that , browser manages heap things, browser taps into our system memory and of course   OS , it allocates memory to the browser app. There the data gets stored which we work in our program and most importantly long term data. There is then Stack thing , is end important for execution of code. Stack is kind of short term memory means Stack control over which function is currently executing.                 "  Heap memory  is used by all the parts of the application whereas  stack memory  is used only by one thread of execution. Whenever an object is created, it's always stored  in...
    Read more

    Creating and inserting element- part-2

    -
    createElement() : creating a new array and appending to end of node  <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Arrays & Iterables </ title > < script src = "app.js" defer></ script > </ head > < body > < ul > < li > Item 1 </ li > < li > Item 2 </ li > < li > Item 4 </ li > < li > Item 3 </ li > </ ul > < script > const list = document . querySelector ( 'ul' ) const newLi = document . createElement ( 'li' ) // it just create a <Li> element // but still not attache...
    Read more