30 Values & References

Javascript is always pass by value, but when a variable refers to an object (including arrays), the "value" is a reference to the object.

Pass By Value (Primitive Types)

• Primitive data types like String, number, boolean, undefined, null
• When we assign to a variable, these create exact copies and doesn't store the reference
• So if we change anything after copying the variable, it doesn't impact anything
• These primitive data types use stack, and the exact location of the data is stored in variables
• The stack memory has limited space so these small primitive types are stored that require less space in memory.

let fname = "kareena";
console.log(fname);

let sname = fname;
console.log(sname);

fname = "katrina";
console.log(sname);

• This will print 'kareena' 3 times
• Because sname didn't store the reference of fname
• So even fname changes, the value of sname will be same which was copied earlier

Pass By Reference (Non Primitive Types)

• Non primitive data types such as Object and Arrays store reference.
• These data types use Heap memory and meant to store large volume of data
• So when we create the variable, it will create a pointer in memory and store the actual value at different place.
• So variable has the pointer and the pointer has the address of the data
• When we copy the variable, it will create another pointer and assign to the new variable however it will store the same address of the data
• When we change something in the data through variable1, it will reflect in variable2 also because both are pointing to same data

let fperson={
  name:"Anushka",
  age:32,
  hobbies:['sports','cooking']
};
console.log(fperson);

let sperson=fperson;
fperson.name='Ananya';
console.log(sperson);

• This will print print the object once with name 'Anushka'
• But the second time, it will print the name as 'Ananya'
• Though we are changing the name in first object, the value in second object will reflect the same
• Because here sperson variable has the reference of the data of fperson
• So if the data for the object fperson changes, it will reflect the changes on sperson also.

Same Objects

Let's say if we create two objects with same data.

• Even though data is same it will not have value reference.
• The data will be created in two different places in memory
• The reference by value comes only when we assign a object variable to another variable.

let fperson = {
    name: "Anushka",
    age: 32,
    hobbies: ['sports', 'cooking']
};

let sperson = {
    name: "Anushka",
    age: 32,
    hobbies: ['sports', 'cooking']
};

console.log(fperson);
fperson.name = 'Ananya';
console.log(sperson);

• This will print the objects as it is.
• There's no link between fperson & sperson so changes to fperson won't impact sperson

Clone Objects

So how can we copy/clone the objects without having the reference? let's see

• We need to use Object.assign({},existing object)
• The first parameter is empty
• But remember Object.assign doesn't do a deep clone
• If we change the array in first object, it will reflect the changes in second object
• Because Array is also reference types.
• We can use external libraries like loadlash for deep clone

let fperson = {
    name: "Anushka",
    age: 32,
    hobbies: ['sports', 'cooking']
};

let sperson = Object.assign({}, fperson);
fperson.name = "Ayesha";
fperson.hobbies.push('reading');
console.log(sperson);

• This will print the object with name: Anushka because the sperson is a new object
• And there's no reference between fperson & sperson.

Clone Array

We can use slice method if we want to copy the arrays without having reference.

let fperson = {
     name: "Anushka",
     age: 32,
     hobbies: ['sports', 'cooking']
};

let hobbies = fperson.hobbies;
let hobbies1 = fperson.hobbies.slice();
fperson.hobbies.push('reading');
console.log(hobbies);
console.log(hobbies1);

• This will print ['sports', 'cooking','reading'] for hobbies because it has reference.
• And print ['sports', 'cooking'] for hobbies1 because it has created a new array element and there's no reference.