Tuesday, March 13, 2012

Is Javascript Pass By Reference or Pass By Value?

Javascript - Pass By Reference or Value?
Javascript Types:
string, number, boolean, null, undefined are javascript primitive types.
functions, objects, arrays are javascript reference types.

Difference?
One of them is pass by reference and value.

I'm Considering string from primitive type and object from reference type for explanation.

Try guessing the alerts in the following examples yourself before reaching the answers

//Example 1
function test(student) {
    student = 'XYZ';
    alert(student);
}

var a = 'ABC';
test(a);
alert(a); 

//Example 2
function test(student) {
    alert(student.name);
    student.marks = 10;
    student.name = 'XYZ';
}

var a = {name:'ABC'};
test(a);
alert(a.name);

//Example 3
function test() {
    var student;
    return {
     setter: function (a) {
         student = a;   
     },
     getter: function () {
         return student;
     },
     change: function () {
         student.name = 'XYZ';
     }
   }
}


var a = {name:'ABC'};
var b = test();
b.setter(a);
a.name = 'DEF';
alert(b.getter().name);
b.change();
alert(a.name);

//Example 4
function test() {
    var student;
    return {
     setter: function (a) {
         student = a;   
     },
     getter: function () {
         return student;
     },
     change: function () {
         student.name = 'XYZ';
     }
   }
}

var a = {name:'ABC'};
var b = test();
b.setter(a);
a = {name:'DEF'};
alert(b.getter().name);
b.change();
alert(a.name);

Try reasoning why are they so if you are wrong, before reaching the explanation

//Example 1
alert 1: XYZ
alert 2: ABC

//Example 2
alert 1: ABC
alert 2: XYZ

//Example 3
alert 1: DEF
alert 2: XYZ

//Example 4
alert 1: ABC
alert 2: DEF

Reason

Example 1:
string is a primitive type & variables hold the values for primitive types.
Primitives are passed by value in javascript.
So, change in 'student' will never affect 'a' and vice versa

Example 2:
object is a reference type & variables hold the reference rather value for reference types
Reference types are passed by reference in javascript
Both a & student refer to the same object. Hence change in 'student' reflects over 'a'.
**Remember reference of 'student' never points to 'a', it follows the reference chain of 'a' and starts referring to the core object.

Example 3:
Reason same as Example 2
Created this example to show that change made in 'a' too reflects back in 'student'

Example 4:
This example tests your real understanding.
If you can reason this out now, then you can grade your self good in this topic

Although a's reference has changed to new object, it didn't affect student's reference.
Reason: point to remember mentioned in Example 2.
You have to understand this clearly :)

Hope I had done some justice. The same can be proved for other primitive and reference types :)

You actually don't need function calls to prove these concepts.

//Equivalent to Example 1
var a = 10;
var b = a;
a = 20;
console.log(a, b);

//Equivalent to Example 2 & 3
var a = {value:1};
var b = a;
a.name = 'xyz';
b.value = 10;
console.log(a, b, a===b);

//Equivalent to Example 4
var a = [1,2,3];
var b = a;
b[0] = 10;
console.log(a, b, a===b);
a = [5,6,7];
console.log(a, b, a===b);

But I used to function to explain the effects over 'passing' rather 'assignment|copying' :)