CODEWITHSUNDEEP
javascript
Sridhar Gudimela
Sridhar Gudimela

Reputation: 584

Understanding Reference in Javascript variables

I have two variables. One is a array and another is a variable which is representing an element from the array.

var arr = ['a', 'b', 'c'];

var elem = arr[1];

I believe elem is a reference of arr[1]; If that is corret, then I am trying to delete that variable from the arr and expecting elem to be undefined something like this...

arr.splice(1,1);

then elem should be undefined.

But somehow this is not happening.

Can anyone please explain me where I understand it wrong or I am doing something wrong? Thanks for your answers.

Upvotes: 2

Views: 66

Answers (6)

choz
choz

Reputation: 17858

In JS, other than undefined, null, boolean, string, and number are object types. They're called primitive types which has fixed sized in memory.

Object types (Reference types) are different. It can be different any of length and do not have any fixed size.

The differences between primitive and object types. Taken from your sample,

var arr = ['a', 'b', 'c']; //Declare and initialize an array.
var elem = arr[1]; //Copy the variable of arr[1] to a new variable
arr.splice(1,1); // Remove the arr[1]
console.log(elem); //Displays arr[1], the copy has not changed.

Now, with the object types,

var arr = ['a', 'b', 'c']; //Declare and initialize an array.
var elem = arr; //Copy the variable of arr to a new variable
arr.splice(1,1); // Remove the arr[1]
console.log(elem); //Displays arr reference. With arr[1] has been removed.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816424

I believe elem is a reference of arr1;

No it's not. Everything in JavaScript is pass by value. Meaning when the an assignment takes place, e.g.

x = y;

the right hand side (y in this case) is evaluated to a value, and that value is "copied" over to x.

In other words, after the evaluation of the left hand side, there is no knowledge of how the value was created in the first place or where it was stored. That's why changing the array later on has no impact on the copy of the value that was assigned to elem.

Here is some ASCII art:

We start with two containers (arr and elem). arr contains a reference to an array (object). elem is empty.

                                  +----------+              
var arr = ['a', 'b', 'c'];        |0: 'a'    |              
var elem;                         |1: 'b'    |              
                                  |2: 'c'    |              
                                  |length: 3 |              
                                  +----------+              
                                       ^                    
                                       |                    
                                       |                    
                                   |       |         |     |
                                   | #obj1 |         |     |
                                   |       |         |     |
                                   +-------+         +-----+
                                      arr             elem

When the assignment takes place, the right hand side, arr[0] is evaluated to a value. The result of the evaluation is the string 'a'. That string is put into elem:

                                  +----------+              
elem = arr[0];                    |0: 'a'    |              
                                  |1: 'b'    |              
                                  |2: 'c'    |              
                                  |length: 3 |              
                                  +----------+              
                                       ^                    
                                       |                    
                                       |                    
                                   |       |         |     |
                                   | #obj1 |         | 'a' |
                                   |       |         |     |
                                   +-------+         +-----+
                                      arr              elem

As you can see, there is no connection between elem and the array.

Later, when the array is spliced, it is mutated to:

                                  +----------+              
arr.splice(1, 1);                 |0: 'b'    |              
                                  |1: 'c'    |              
                                  |length: 2 |                        
                                  +----------+              
                                       ^                    
                                       |                    
                                       |                    
                                   |       |         |     |
                                   | #obj1 |         | 'a' |
                                   |       |         |     |
                                   +-------+         +-----+
                                      arr              elem

Because the is no connection to elem, it didn't change.

Upvotes: 1

Saurin Vala
Saurin Vala

Reputation: 1928

You are assigning the value, not giving a references.

refer below code, this may give some idea.

var elem=function(pos){return arr[pos];}

 elem(0)  //"a"

 elem(1)  //"b"

 arr.splice(1,1);

 elem(1)  //"c"

Upvotes: 0

stalin
stalin

Reputation: 3464

Every element on the array is a memory reference, now just imagin that a,b,c are pointing To the memeory reference 1,2,3 if you set the var x = a actually you are saying that x also point To tha memory reference 1

If you delete the element a from the array you are just deleting a pointer To the memory not the element itself x is still pointing To the memory, if no one is pointing then the real element will be deleted

That assuming that every element is an object. Only object is referenciable primities are just copy

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Splice removes the value from array, it doesn't delete the object itself as long as its value has gone in another reference.

And this is irrespective of the type of value - Primitive or Object reference.

var arr = [{a:'a'}, {a:'b'}, {a:'c'}];
var elem = arr[1];
arr.splice(1,1);

or

var arr = ['a', 'b', 'c'];
var elem = arr[1];
arr.splice(1,1);

In both the cases above, value will be retained inside elem

Upvotes: 0

Alexander
Alexander

Reputation: 112

Only objects has references, primitive values are not. So you just copied element from array

Upvotes: 1

Related Questions