Understanding Reference in Javascript variables

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

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.

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

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

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"

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.