Pass by Value and Pass by Reference in Angular

Concept of Pass by Value and Pass by Reference is present in every programming language, but we don’t realize it often.

Let’s go straight into explanation.

var a = 5
var b = ["Mumbai","Bangalore"];

In above example variable “a” contains the literal value i.e. 5 whereas in variable “b” address of the location/memory where array is present is saved. This array contains 2 strings Mumbai and Bangalore.

So far so good, but what is its significance?

Open console of browser i.e. Right on browser and click on Inspect and go to Console tab in Google Chrome or Firefox and copy below code and hit enter.

var a = 5
var b = ["Mumbai","Bangalore"];
var c = a;
var d = b;
console.log('a:'+a);
console.log('c:'+c);
console.log('b:'+b);
console.log('d:'+d);

Output in the console will be

a:5
c:5
b:Mumbai,Bangalore
d:Mumbai,Bangalore

What the snippet did was, it copied content of “a” into “c” . Variable “a” contained literal value 5 which was copied to variable “c”, thus output of “c” was 5

It did the same thing for variable “d” , it copied the content of variable “b” into variable “d” , however “b” stored the address of the place where array is present and thus now “d” also points to the same memory location.

Since both b and d points to the same memory location any change that we make to “b” or “d” will affect in both the place.

Return back to your console window and copy below code and hit enter.

a = 10
b.push("Delhi");
console.log('a:'+a);
console.log('c:'+c);
console.log('b:'+b);
console.log('d:'+d);

Output in the console will be

a:10
c:5
b:Mumbai,Bangalore,Delhi
d:Mumbai,Bangalore,Delhi

Even though value of “c” didn’t change when value of “a” was changed, value of “d” was changed as when we pushed content into “b” as both pointed to the same location and thus changes made to either “b” or “d” affects both.

Note- In above code we used b.push. If we use any other functions like filter it creates new array altogether and returns its reference and in that case “b” will store difference as compared to “d”.

Note- Whenever we assign array to a variable we assign reference of the place where the array is saved. The same is applied to any objects.

Now let’s see this in action in Angular application.

Create an angular application with name parentchild

ng new parentchild

and now create a child component in it

ng g c child

Code structure should look as follows

Open app.component.ts and replace its content with below

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'parentchild';
  parentName = "Passed data";
  parentArr = ["Bangalore","Delhi"];
}

Open app.component.html and replace its content with below code.

<p>parent works</p>
Variable in parent: {{parentName}}
<div *ngFor="let element of parentArr">
    <p>Array values in parent: {{element}}</p>
</div>
<app-child [name] = "parentName" [arr]="parentArr"></app-child>

What we did so far is we created variables in Parent component i.e. AppComponent with names parentName and parentArr.

In Parent html i.e. app-component.html we printed those variables and we called the child component using the selector <app-child> and passed those variables parentName and parentArr.

Per theory when we pass parentArr , we are passing not the value but the reference of the place where array is saved.

Let’s modify the child component to receive these values.

Update child.component.ts and replace its code with below values.

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input()
  name: string;
@Input()
  arr: any;
constructor() { }
ngOnInit() {}
btnClicked(evtData){
    this.name = 'Changed '+ this.name;
    this.arr.push("Mumbai");
  }
}

Update child.component.html and replace its content

<p>child works!</p>
Variable in child: {{name}}
<div *ngFor="let element of arr">
    <p>Array values in child: {{element}}</p> 
</div>
<button (click)="btnClicked($event)">Click Me!</button>

We received the data passed from parent using Input decorators and added a button that add values to the array when clicked.

Run the application. It should show below output.

Click on the button now and see the magic.

As we click the button, it updates the value of variable in child and pushes content to the array. (Check button click code in child.component.ts). However since the variable arr had the reference and not just the value , changes made to the child was also reflected in the parent.

I hope you have enjoyed reading the article. Please provide your comments and feedback.