What is the rationale for placing instance variables of reference type in the constructor in Javascript?

After reviewing insights from Google developers, I came across a helpful article on optimizing JavaScript at this link.


The recommendation is to place the declaration and initialization of instance variables with value type on the prototype. This prevents the unnecessary running of initialization code every time the constructor is called. However, this approach may not apply if the initial value of instance variables depends on constructor arguments or other states during construction.

For example, instead of:

foo.Bar = function() {
  this.prop1_ = 4;
  this.prop2_ = true;
  this.prop3_ = [];
  this.prop4_ = 'blah';
};

It is suggested to use:

foo.Bar = function() {
  this.prop3_ = [];
};

foo.Bar.prototype.prop1_ = 4;

foo.Bar.prototype.prop2_ = true;

foo.Bar.prototype.prop4_ = 'blah';

I understand the benefits of placing value type variables in the function prototype. However, my concern is whether initializing reference variables like this.prop3_ = []; (as shown in the Google example) creates a new array with each constructor invocation?

Answer №1

It is important to add instance properties of reference types to the constructor in order to avoid sharing references among instances when added to the prototype. Sharing references may cause issues when modifying the data. Let's consider the example below:

var Test = function () {
    this.foo = [];
};

Test.prototype.bar = [];

var instance1 = new Test();
var instance2 = new Test();

instance1.foo.push(1);
instance1.bar.push(1);
instance2.foo.push(2);
instance2.bar.push(2);

console.log(instance1.foo, instance1.bar); // [1], [1,2]

Even though instance1.bar.push was only called once, the array ends up with two values. This is because instance1.bar and instance2.bar are referencing the same array, resulting in shared data between the two objects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular9: construction involves an additional compilation process

After updating my Angular8 project to Angular9, I noticed a new step in the build process which involves compiling to esm. This additional step has added approximately 1 minute to my build time. A snippet of what this step looks like: Compiling @angular/ ...

How to automatically refresh the idToken in a Firebase http request when the currentUser object is null?

Currently implementing a Custom Auth System with React JS and Firebase for sign-in operations. The Back End generates a custom token, allowing the Front End to execute signInWithCustomToken. After successful sign in, an issue arises when refreshing the pa ...

Text randomly appears on the html page

I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...

Error: Unable to locate Buffer2

I encountered the error Uncaught TypeError: Buffer2 is undefined when trying to import jsonwebtoken into my React project. The errors occur with both import jwt from jsonwebtoken and import {decode} from 'jsonwebtoken'. My versions are jsonwebt ...

What is the reason for the absence of absolutely positioned elements in the render tree?

Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...

Tips for dynamically coloring table cells in Spotfire based on their values

Creating Dynamic Table with HTML After successfully creating a cross table in Spotfire, I now aim to replicate the same table in HTML within a text area. I managed to add values using calculated values, but I'm stuck on how to dynamically set the bac ...

Utilizing React's useState to store data in local storage

I am trying to figure out how to save data from a photos database API into local storage using the useState hook in React. Despite my attempts, I have not been successful with the useState method as the data in local storage gets cleared upon page refres ...

What is the best method for initializing a grid combo box value using JavaScript?

How do I set the value of a combobox in a grid itemtemplate using JavaScript? <telerik:GridTemplateColumn AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%" ...

Error encountered: 'applePaySession.completeMerchantValidation' is not a valid object reference when attempting to process a successful apple pay payment

So, I'm having an issue with the user's payment going through but encountering undefined value when checking compatibility. I've been trying to debug this problem in my code snippet below: setCanDisplayApplePay() { var client = n ...

How can jQuery be used to determine if the number of checked checkboxes is a multiple of three?

Within the ul, I have li tags with checkboxes and I want to create a function that checks, when the submit button is pressed, if the number of checked checkboxes is not a multiple of 3. If it isn't, an alert should be displayed. How can I accomplish t ...

Tips for updating the firebase access_token with the help of the next-auth credentials provider

Can anyone help me with refreshing the Firebase access token when it expires? I need the token for API authentication, but I can't find any information online regarding next-auth and Firebase. Currently, I am able to retrieve the access token but str ...

Encountering a problem with my Solidity map(int,string) function when attempting to use JavaScript to pass values back to HTML

I'm struggling to update my labels using a JavaScript function call to my Solidity smart contract. My goal is to create a map with integer and string values in Solidity, then display these values in HTML upon clicking a button. But for some reason, th ...

Display an HTML file within a modal in Next.js

Recently, I came across an extensive HTML file that resembles the snippet below: <body lang=EN-US style='word-wrap:break-word'> <div class=WordSection1> <p align=center style='margin-top:0in;margin-right:0in;margin-bottom:1 ...

Issue with altering transparency using a JavaScript while loop

I'm attempting to create a blinking effect for an image by continuously fading it in and out. I've implemented two while loops to adjust the opacity attribute of the element - each loop changing the opacity by 10% and pausing for 10ms. Although t ...

NodeJS: The module failed to automatically register itself

Exploring the capabilities of IBM Watson's Speech to Text API, I encountered an issue while running my NodeJS application. To handle the input audio data and utilize IBM Watson's SpeechToText package, I integrated the line-in package for streami ...

Glitches and sudden jumps occur when using the useMediaQuery function in Material UI

Implementing Material UI's useMediaQuery() hook, I have embedded the theme provider and initialized a variable in this way: const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down('sm') ); I am utilizing the isSmall v ...

Using jQuery to create a blinking effect on a specific letter in a string

I'm looking to create a text adventure using Canvas, and I want the parser to blink continuously, similar to the one in a Dos Console. The parser is stored as a global variable. How can I use jQuery to permanently change the character of this global v ...

What is the correct way to inspect the HTTP request body and reject it if it does not adhere to the specified pattern when working with a basic NodeJS server?

I am currently facing a challenge while developing a server using solely nodeJS libraries and methods. I am struggling to validate the request body format and promptly respond with a client error status code type (400-499). Below is the JavaScript code sn ...

Guide on gathering GitHub directories from an external source in order to showcase the contents of a designated folder

How can I retrieve files from a specific folder named "hacks" in a GitHub repository using JavaScript? I don't want to duplicate the files and have to constantly update them. The repository I am referencing is https://github.com/Prodigy-Hacking/Prodig ...

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...