Over using 'this' in typescript

  • A+
Category:Languages

I am just starting to learn typescript/Angular having come from a c++/java background having never touched any web development stuff before. I wrote a small piece of code with some FormControls and someone made a suggested improvement that I don't understand.

The code is as follows:

this.myFormData = { ...data };     this.myForm.controls['name'].setValue(this.myFormData.name); this.myForm.controls['address'].setValue(this.myFormData.address); this.myForm.controls['age'].setValue(this.myFormData.age); this.myForm.controls['gender'].setValue(this.myFormData.gender); this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list); 

I've been told that I should change it to:

this.myFormData = { ...data }; const formControls = this.myForm.controls; formControls['name'].setValue(this.myFormData.name); formControls['address'].setValue(this.myFormData.address); formControls['age'].setValue(this.myFormData.age); formControls['gender'].setValue(this.myFormData.gender); formControls['mailing_list'].setValue(this.myFormData.mailing_list); 

with the reason being it would save memory. I questioned this point thinking it was maybe some premature optimization but the peer reviewer is sure that accessing 'this' and searching for 'myForm' and getting 'controls' each time is bad practice stating the DRY principle of software development.

I am still learning so I guess I should just take the reviewers word for it but I really do want to understand the difference in the example posted and why one was better than the other. I have searched online for an answer but i'm not having any success (maybe due to not knowing the technical terms to search for?).

An explanation for a novice would be great or links to where I could find an answer would help too.

 


Angular uses Uglify which will rewrite the following code.

Before Uglify

this.myFormData = { ...data };     this.myForm.controls['name'].setValue(this.myFormData.name); this.myForm.controls['address'].setValue(this.myFormData.address); this.myForm.controls['age'].setValue(this.myFormData.age); this.myForm.controls['gender'].setValue(this.myFormData.gender); this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list); 

After Uglify

this.a={ ...data };this.b.controls['name'].setValue(this.a.name);this.b.controls['address'].setValue(this.a.address);this.b.controls['age'].setValue(this.a.age);this.b.controls['gender'].setValue(this.a.gender);this.b.controls['mailing_list'].setValue(this.a.mailing_list); 

This happens automatically for you in Angular and it accounts for far more performance gains than you can get from minimizing your use of this, but the problem here isn't the references to memory. It's the larger files the source code generates.

Let's rewrite the source code to favor minification instead.

const data = { ...data };     const controls = this.myForm.controls; controls['name'].setValue(data.name); controls['address'].setValue(data.address); controls['age'].setValue(data.age); controls['gender'].setValue(data.gender); controls['mailing_list'].setValue(data.mailing_list); 

This will minify like this:

const a={ ...data };const b=this.myForm.controls;b['name'].setValue(a.name);b['address'].setValue(a.address);b['age'].setValue(a.age);b['gender'].setValue(a.gender);b['mailing_list'].setValue(a.mailing_list); 

From a CPU performance perspective there is no difference in measurable speed between your two source code examples.

From a file size perspective there would be a gain that can be measure in bytes. It's something you gain when you write the source code, and most people don't have time to go back later and rewrite lines of code just to get a few bytes in minification.

Reducing a large project just by 100kb can make a big difference on how long it takes for the application to start up.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: