JS as Array property in Object single instance

3

Been searching for a while to fully understand how arrays works in object. I am familiar with other languages but this causes a lot of confusion for me.
Having an object

var Test = {

    TestArray: ,

}

var a = Object.create(Test);

var b = Object.create(Test);

From my expectation this should create 2 instances of the object and having 2 different arrays however having an array inside behave like 1 instance adding values to the array affects both instances could anyone explain why?

javascript arrays

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.
  
  – Patrick Roberts
  Nov 21 '18 at 20:30
  

  
  
  
  

add a comment | 

3

Been searching for a while to fully understand how arrays works in object. I am familiar with other languages but this causes a lot of confusion for me.
Having an object

var Test = {

    TestArray: ,

}

var a = Object.create(Test);

var b = Object.create(Test);

From my expectation this should create 2 instances of the object and having 2 different arrays however having an array inside behave like 1 instance adding values to the array affects both instances could anyone explain why?

javascript arrays

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.
  
  – Patrick Roberts
  Nov 21 '18 at 20:30
  

  
  
  
  

add a comment | 

3

3

3

1

Been searching for a while to fully understand how arrays works in object. I am familiar with other languages but this causes a lot of confusion for me.
Having an object

var Test = {

    TestArray: ,

}

var a = Object.create(Test);

var b = Object.create(Test);

From my expectation this should create 2 instances of the object and having 2 different arrays however having an array inside behave like 1 instance adding values to the array affects both instances could anyone explain why?

javascript arrays

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

Been searching for a while to fully understand how arrays works in object. I am familiar with other languages but this causes a lot of confusion for me.
Having an object

var Test = {

    TestArray: ,

}

var a = Object.create(Test);

var b = Object.create(Test);

From my expectation this should create 2 instances of the object and having 2 different arrays however having an array inside behave like 1 instance adding values to the array affects both instances could anyone explain why?

javascript arrays

javascript arrays

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

share|improve this question

share|improve this question

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

asked Nov 21 '18 at 20:18

Robert PavlovicRobert Pavlovic

182

182

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.
  
  – Patrick Roberts
  Nov 21 '18 at 20:30
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.
  
  – Patrick Roberts
  Nov 21 '18 at 20:30
  

  
  
  
  

2

2

Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.

– Patrick Roberts
Nov 21 '18 at 20:30

Test isn't a class, it's an object. All you're doing is creating two objects a and b with the same shared prototype Test.

– Patrick Roberts
Nov 21 '18 at 20:30

add a comment | 

2 Answers
2

active

oldest

votes

1

You're right about 2 instances of the object, but inside they have the same array reference, therefore mutating it in one place will mutate it in another place.

var Test = {

    TestArray: ,

}



var a = Object.create(Test);

var b = Object.create(Test);



a === b // false

a.TestArray === a.TestArray // true

There are quite a lot of ways to avoid this problem. Below is an option in order to keep Object.create

var getTest = () => ({

    TestArray: ,

});



var a = Object.create(getTest());

var b = Object.create(getTest());

share|improve this answer

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a other way to create array or the obect so they dont have same reference?
  
  – Robert Pavlovic
  Nov 21 '18 at 20:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the answer to include the solution
  
  – Oleksandr Fedotov
  Nov 21 '18 at 20:32
  

  
  
  
  

add a comment | 

2

You are right, Object.create is creating a new object, but whenever you pass an object to it, it makes that object as a prototype of it.

Meaning, if that prototype object as an array, the will share the same instance.

Check out the example given in MDN, the function that they call is on the prototype, therefore there is only one instance of it.

In order to gain your request, you can use ES6 class syntax:

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419888%2fjs-as-array-property-in-object-single-instance%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

You're right about 2 instances of the object, but inside they have the same array reference, therefore mutating it in one place will mutate it in another place.

var Test = {

    TestArray: ,

}



var a = Object.create(Test);

var b = Object.create(Test);



a === b // false

a.TestArray === a.TestArray // true

There are quite a lot of ways to avoid this problem. Below is an option in order to keep Object.create

var getTest = () => ({

    TestArray: ,

});



var a = Object.create(getTest());

var b = Object.create(getTest());

share|improve this answer

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a other way to create array or the obect so they dont have same reference?
  
  – Robert Pavlovic
  Nov 21 '18 at 20:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the answer to include the solution
  
  – Oleksandr Fedotov
  Nov 21 '18 at 20:32
  

  
  
  
  

add a comment | 

1

You're right about 2 instances of the object, but inside they have the same array reference, therefore mutating it in one place will mutate it in another place.

var Test = {

    TestArray: ,

}



var a = Object.create(Test);

var b = Object.create(Test);



a === b // false

a.TestArray === a.TestArray // true

There are quite a lot of ways to avoid this problem. Below is an option in order to keep Object.create

var getTest = () => ({

    TestArray: ,

});



var a = Object.create(getTest());

var b = Object.create(getTest());

share|improve this answer

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a other way to create array or the obect so they dont have same reference?
  
  – Robert Pavlovic
  Nov 21 '18 at 20:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the answer to include the solution
  
  – Oleksandr Fedotov
  Nov 21 '18 at 20:32
  

  
  
  
  

add a comment | 

1

1

1

You're right about 2 instances of the object, but inside they have the same array reference, therefore mutating it in one place will mutate it in another place.

var Test = {

    TestArray: ,

}



var a = Object.create(Test);

var b = Object.create(Test);



a === b // false

a.TestArray === a.TestArray // true

There are quite a lot of ways to avoid this problem. Below is an option in order to keep Object.create

var getTest = () => ({

    TestArray: ,

});



var a = Object.create(getTest());

var b = Object.create(getTest());

share|improve this answer

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

You're right about 2 instances of the object, but inside they have the same array reference, therefore mutating it in one place will mutate it in another place.

var Test = {

    TestArray: ,

}



var a = Object.create(Test);

var b = Object.create(Test);



a === b // false

a.TestArray === a.TestArray // true

There are quite a lot of ways to avoid this problem. Below is an option in order to keep Object.create

var getTest = () => ({

    TestArray: ,

});



var a = Object.create(getTest());

var b = Object.create(getTest());

share|improve this answer

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

share|improve this answer

share|improve this answer

edited Nov 21 '18 at 20:31

edited Nov 21 '18 at 20:31

edited Nov 21 '18 at 20:31

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

answered Nov 21 '18 at 20:26

Oleksandr FedotovOleksandr Fedotov

22515

22515

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a other way to create array or the obect so they dont have same reference?
  
  – Robert Pavlovic
  Nov 21 '18 at 20:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the answer to include the solution
  
  – Oleksandr Fedotov
  Nov 21 '18 at 20:32
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Is there a other way to create array or the obect so they dont have same reference?
  
  – Robert Pavlovic
  Nov 21 '18 at 20:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the answer to include the solution
  
  – Oleksandr Fedotov
  Nov 21 '18 at 20:32
  

  
  
  
  

Is there a other way to create array or the obect so they dont have same reference?

– Robert Pavlovic
Nov 21 '18 at 20:29

Is there a other way to create array or the obect so they dont have same reference?

– Robert Pavlovic
Nov 21 '18 at 20:29

I updated the answer to include the solution

– Oleksandr Fedotov
Nov 21 '18 at 20:32

I updated the answer to include the solution

– Oleksandr Fedotov
Nov 21 '18 at 20:32

add a comment | 

2

You are right, Object.create is creating a new object, but whenever you pass an object to it, it makes that object as a prototype of it.

Meaning, if that prototype object as an array, the will share the same instance.

Check out the example given in MDN, the function that they call is on the prototype, therefore there is only one instance of it.

In order to gain your request, you can use ES6 class syntax:

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

add a comment | 

2

You are right, Object.create is creating a new object, but whenever you pass an object to it, it makes that object as a prototype of it.

Meaning, if that prototype object as an array, the will share the same instance.

Check out the example given in MDN, the function that they call is on the prototype, therefore there is only one instance of it.

In order to gain your request, you can use ES6 class syntax:

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

add a comment | 

2

2

2

You are right, Object.create is creating a new object, but whenever you pass an object to it, it makes that object as a prototype of it.

Meaning, if that prototype object as an array, the will share the same instance.

Check out the example given in MDN, the function that they call is on the prototype, therefore there is only one instance of it.

In order to gain your request, you can use ES6 class syntax:

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

You are right, Object.create is creating a new object, but whenever you pass an object to it, it makes that object as a prototype of it.

Meaning, if that prototype object as an array, the will share the same instance.

Check out the example given in MDN, the function that they call is on the prototype, therefore there is only one instance of it.

In order to gain your request, you can use ES6 class syntax:

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

class Test {

  constructor() {

    this.TestArray = ;

  }

}



const t1 = new Test();

const t2 = new Test();



t1.TestArray.push('item1');

console.log(t1.TestArray);

console.log(t2.TestArray); // Should print an empty array

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

share|improve this answer

share|improve this answer

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

answered Nov 21 '18 at 20:28

felixmoshfelixmosh

3,9512519

3,9512519

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419888%2fjs-as-array-property-in-object-single-instance%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here