Using arrays as properties in literal objects

Question

Using arrays as properties in literal objects

Attempting to articulate the issue is somewhat challenging, so please refer to the code snippet below.

var test = { 
my_array: [],
my_var: ''
}


var a = Object.create(test);
var b = Object.create(test);


a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';


document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B

What leads to the scenario where both Object b and Object a have the same array value?

javascript

Answer 1

Answer №1

Creating two objects that share a common prototype object means that properties on the object prototypes are accessed during property lookups, rather than being duplicated for each instance.

When you set a value to an object property like this:

a.my_var = 'this is obj A';

The property then becomes a unique "own" property of the object, even if it was originally part of the prototype. Changing the value of a prototype property using this assignment method is not possible.

Answer 2

Creating two objects that share a common prototype object means that properties on the object prototypes are accessed during property lookups, rather than being duplicated for each instance.

When you set a value to an object property like this:

a.my_var = 'this is obj A';

The property then becomes a unique "own" property of the object, even if it was originally part of the prototype. Changing the value of a prototype property using this assignment method is not possible.

Answer 3

Answer №2

Due to the manner in which objects are created, the property my_array will have the same reference in both objects. Below is a modified version that produces the desired outcome.

var sample = function () {
    return { 
  my_array: [],
  my_var: ''
    }
}

var x = Object.create(sample());
var y = Object.create(sample());

x.my_array.push('aaa');
y.my_array.push('bbb');

x.my_var = 'this is object X';
y.my_var = 'this is object Y';

document.write(x.my_array[0]); //output: aaa
document.write('<br>');
document.write(y.my_array[0]); //output: bbb
document.write('<br>');
document.write(x.my_var); //output: this is obj X
document.write('<br>');
document.write(y.my_var); //output: this is obj Y

Answer 4

Due to the manner in which objects are created, the property my_array will have the same reference in both objects. Below is a modified version that produces the desired outcome.

var sample = function () {
    return { 
  my_array: [],
  my_var: ''
    }
}

var x = Object.create(sample());
var y = Object.create(sample());

x.my_array.push('aaa');
y.my_array.push('bbb');

x.my_var = 'this is object X';
y.my_var = 'this is object Y';

document.write(x.my_array[0]); //output: aaa
document.write('<br>');
document.write(y.my_array[0]); //output: bbb
document.write('<br>');
document.write(x.my_var); //output: this is obj X
document.write('<br>');
document.write(y.my_var); //output: this is obj Y

Answer 5

Answer №3

Just remember, you're really only constructing one array object in this situation:

my_array: []

Even when you use Object.create to generate a new object from it, that array won't be copied or recreated. Both instances are essentially pointing to the same array object.

Answer 6

Just remember, you're really only constructing one array object in this situation:

my_array: []

Even when you use Object.create to generate a new object from it, that array won't be copied or recreated. Both instances are essentially pointing to the same array object.

Answer 7

Answer №4

Cloning something is pretty straightforward, but what you really need is a deep cloning. When dealing with deep cloning, it requires different techniques because using Object.create() simply copies the property reference if the assigned property is an object or array.

If your goal is to create a deep copy of an object (meaning a thorough copy of all nested properties by traversing the prototype chain), then you should consider taking a different approach. The following example illustrates one possible method. (Source: MDN)

function clone(objectToBeCloned) {
  // Base case.
  if (!(objectToBeCloned instanceof Object)) {
    return objectToBeCloned;
  }

  var objectClone;
  
  // Exclude special objects.
  var Constructor = objectToBeCloned.constructor;
  switch (Constructor) {
    // Handle other special cases here.
    case RegExp:
      objectClone = new Constructor(objectToBeCloned);
      break;
    case Date:
      objectClone = new Constructor(objectToBeCloned.getTime());
      break;
    default:
      objectClone = new Constructor();
  }
  
  // Clone each property.
  for (var prop in objectToBeCloned) {
    objectClone[prop] = clone(objectToBeCloned[prop]);
  }
  
  return objectClone;
}

var test = { 
my_array: [],
my_var: ''
}


var a = clone(test);
var b = clone(test);


a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';


document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B

Answer 8

Cloning something is pretty straightforward, but what you really need is a deep cloning. When dealing with deep cloning, it requires different techniques because using Object.create() simply copies the property reference if the assigned property is an object or array.

If your goal is to create a deep copy of an object (meaning a thorough copy of all nested properties by traversing the prototype chain), then you should consider taking a different approach. The following example illustrates one possible method. (Source: MDN)

function clone(objectToBeCloned) {
  // Base case.
  if (!(objectToBeCloned instanceof Object)) {
    return objectToBeCloned;
  }

  var objectClone;
  
  // Exclude special objects.
  var Constructor = objectToBeCloned.constructor;
  switch (Constructor) {
    // Handle other special cases here.
    case RegExp:
      objectClone = new Constructor(objectToBeCloned);
      break;
    case Date:
      objectClone = new Constructor(objectToBeCloned.getTime());
      break;
    default:
      objectClone = new Constructor();
  }
  
  // Clone each property.
  for (var prop in objectToBeCloned) {
    objectClone[prop] = clone(objectToBeCloned[prop]);
  }
  
  return objectClone;
}

var test = { 
my_array: [],
my_var: ''
}


var a = clone(test);
var b = clone(test);


a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';


document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B

Answer 9

Answer №5

This specific image provides a clear solution to the question:

https://i.sstatic.net/xyzAb.png

(I simply ran a console.log(a, b))

UPDATE:

An alternative approach to tackle this issue (https://jsfiddle.net/ghijKlmn/):

var example = function() {
  this.data_set = [];
    this.variable_name = '';
} 


var x = new example();
var y = new example();

Answer 10

This specific image provides a clear solution to the question:

https://i.sstatic.net/xyzAb.png

(I simply ran a console.log(a, b))

UPDATE:

An alternative approach to tackle this issue (https://jsfiddle.net/ghijKlmn/):

var example = function() {
  this.data_set = [];
    this.variable_name = '';
} 


var x = new example();
var y = new example();

Using arrays as properties in literal objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Interacting Between PHP and Javascript

Generate a fresh object if the values within the TypeScript object are identical

Utilizing AngularJS, combining ng-repeat and filter functions that can be triggered directly from the controller

Having trouble with the JSON response while implementing AngularJS

Retrieve a comprehensive inventory of all routes within a Vue project and automatically create a sitemap for the website - Vue Project

What is the best method for deactivating a button in discord.js after a 5-second delay?

Steps to set up datetimepicker with varying date ranges for several input fields

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

Several attributes in the JSON object being sent to the MVC controller are missing or have a null

"Limit the display of the b-form-datepicker to only show the month and

Updating the border color in jQuery can be done without affecting the `border-left-color`

Interactive calendar using Php and Javascript/Ajax

Error: Attempting to update the value of 'ordersToDisplay' before it has been initialized in a re-render of React. This results in an Uncaught ReferenceError

Can you confirm if Jquery's $.POST method works asynchronously?

Is there a way to store the JWT response header retrieved with fetch?

Show the user's input on the canvas

I am facing an issue where the code in the content script is not getting injected when the URL tab changes. Is there a way to resolve this problem?

Retrieving the original state value after updating it with data from local storage

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Error: Unable to access the 'name' property of an undefined variable