Array.fill gives same object repeated. why? [duplicate]

by

.fill will insert the same exact object (same instance) on each segment of the array.
That’s why doing .fill(Math.random) will return an array filled with always the same number.

You can do this to obtain what you want:

new Array(4).fill().map(() => ({}));

To explain what’s happening under the hood in your question’s code, let’s convert this to ES5 code:

var arr = new Array(4);  // new Array(4)
var obj = new Object();  // *1: with this object instance
for(i = 0; i < 4; i++) { // .fill( *1 )
  arr[i] = obj;
}

As you can see, we are assigning the same object instance (obj) to each cell of the array instance.

This is the same principle of why:

const obj = {};
const a = obj;
const b = obj;

a.foo = true;

Makes a.foo === b.foo resolve to true.

More Related Contents:

  1. setState doesn’t update the state immediately
  2. Private properties in JavaScript ES6 classes
  3. `export const` vs. `export default` in ES6
  4. Why can I change a constant object in javascript
  5. Javascript – arrow functions this in event handler?
  6. Array.fill(Array) creates copies by references not by value [duplicate]
  7. Defer execution for ES6 Template Literals
  8. How to import ES6 modules in content script for Chrome Extension
  9. How does this object method definition work without the “function” keyword?
  10. What is the temporal dead zone?
  11. Are ES6 classes just syntactic sugar for the prototypal pattern in Javascript?
  12. ES6 Array destructuring weirdness
  13. Get functions (methods) of a class [duplicate]
  14. Which ECMAScript 6 features imply strict mode?
  15. Proper use of const for defining functions
  16. ES6 Iterate over class methods
  17. Access to ES6 array element index inside for-of loop
  18. Do I need require js when I use babel?
  19. Can I use arrow function in constructor of a react component?
  20. Using spread operator multiple times in javascript?
  21. How to reliably check an object is an EcmaScript 6 Map/Set?
  22. setState() inside of componentDidUpdate()
  23. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  24. Extending Error in Javascript with ES6 syntax & Babel
  25. check if function is a generator
  26. In the `import` syntax of ES6, how is a module evaluated exactly?
  27. Curly brackets (braces) in Node.js ‘require’ statement
  28. React functional component default props vs default parameters
  29. .map() a Javascript ES6 Map?
  30. How to call native es6 template string replacement from tag function?

Leave a Comment