Is a new JavaScript array with length unusable? [duplicate] - javascript

This question already has answers here:
JavaScript "new Array(n)" and "Array.prototype.map" weirdness
(14 answers)
Closed 7 years ago.
According to the MDN documentation for new Array(length) I can initialize an array with a given length as such:
var a = new Array(10);
a.length; // => 10
a; // => [undefined x 10]
However, apparently I can't use methods such as map(...) on the new array, even though arrays constructed in other ways work fine:
a.map(function() { return Math.random(); });
// => [undefined x 10] -- wtf?
[undefined, undefined].map(function() { return Math.random(); });
// => [0.07192076672799885, 0.8052175589837134]
Why is this the case?
I understand from this experience (and searching the web) that the array constructor with length is a black hole of unexplained behavior, but does the ECMA 262 specification offer an explanation?

new Array(10) doesn't return an array filled with 10 undefineds. Instead, it returns an array with no elements, and with a length property of 10.
See the difference:
var arr1 = new Array(1),
arr2 = [undefined];
arr1.length === arr2.length; // Both are `1`
arr1[0] === arr2[1]; // Both are `undefined`
arr1.hasOwnProperty(0); // false
arr2.hasOwnProperty(0); // true
Therefore, ECMAScript 5 array methods skip those non-existing properties. Specifically, when they iterate from 0 to length, they check the [[HasProperty]] internal method of the array.
You can fix it easily with ECMAScript 6 Array.prototype.fill (which can be polyfilled):
new Array(10).fill().map(Math.random);

Related

init Array with 5 zero elements [duplicate]

This question already has answers here:
Most efficient way to create a zero filled JavaScript array?
(45 answers)
Closed 4 years ago.
Hello I want to init Array with 5 zero elements in JS. Without classic initiation var arr = [0, 0, 0, 0, 0]
I try some variant:
var arr = new Array(5).map(() => 0);
var arr = new Array(5).map(function () {return 0;});
var arr = Array(5).map(function () {return 0;});
but this examples are not working.
Either use .fill:
const arr = new Array(5).fill(0);
console.log(arr);
or Array.from, which has a built-in map function you can pass as a second parameter:
const arr = Array.from({ length: 5 }, () => 0);
console.log(arr);
See MDN:
map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).
Using Array.from as above assigns undefined values to each element of the array, whereas new Array does not, which is why you can map after Array.from but not after invoking the Array constructor.
You need use method fill for array's in initialization.
example:
var arr = new Array(5).fill(0);
May a for loop help you?
For(i=0; i<N; i++){
array[i]=value;
}
For a 5 length array of 0 it becomes
for(i=0; i<5; i++){
array[i]=0;
}

Manufacturing an array - why is it different? [duplicate]

This question already has answers here:
JavaScript "new Array(n)" and "Array.prototype.map" weirdness
(14 answers)
Closed 5 years ago.
consider I declare two variables like this (done within REPL, with node v7.7.2), which I expect to be arrays:
var x = Array(4)
var y = Array.from({length: 4})
then the following should work identically, but it doesn't:
x.map(Math.random)
[ , , , ]
y.map(Math.random)
[ 0.46597917021676816,
0.3348459056304458,
0.2913995519428412,
0.8683430009997699 ]
in looking, it seems x and y are both identical:
> typeof x
'object'
> typeof y
'object'
> Array.isArray(x)
true
> Array.isArray(y)
true
> x.length
4
> y.length
4
> typeof x[0]
'undefined'
> typeof y[0]
'undefined'
so why the difference?
Actually, it should not have the same results fot both cases. See the manual here about Array:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
If the only argument passed to the Array constructor is an integer
between 0 and 232-1 (inclusive), this returns a new JavaScript array
with its length property set to that number (Note: this implies an
array of arrayLength empty slots, not slots with actual undefined
values). If the argument is any other number, a RangeError exception
is thrown.
And here about the Array.from() method
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from
Check the following example on the page linked above:
// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
For the first three outputs, Array#map works.
It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).
The ECMA 262 standard to Array.from describes a construction with length for a new array (point 7 ff).
var x = Array(4),
y = Array.from({ length: 4 }),
arrayX = x.map(Math.random),
arrayY = y.map(Math.random),
z = Array.from({ length: 4 }, Math.random);
console.log(x);
console.log(y);
console.log(arrayX);
console.log(arrayY);
console.log(z);
The Array created with Array(4) is not iterated over with .map(), whereas the Array.from({ length: 4 }) is iterated over. A fuller explanation can be found at JavaScript "new Array(n)" and "Array.prototype.map" weirdness, you can test this with..
x.map((f,i) => console.log(i)) vs. y.map((f,i) => console.log(i))

How [undefined, undefined, undefined] and new Array(3) are different in JavaScript? [duplicate]

This question already has answers here:
Undefined values in Array(len) initializer
(5 answers)
Closed 5 years ago.
Suppose we have 3 arrays:
var arr1 = [undefined, undefined, undefined];
var arr2 = [, , ,];
var arr3 = new Array(3);
Are all of them identical in JavaScript?
If we wants to use undefined as default value for fixed size array, can we use them interchangeably?
The second two are the same (though the second one might cause issues on some browsers), but the first is different.
The first one
var arr1 = [undefined, undefined, undefined];
makes explicit assignments to the first three indexes in the array. Even though you're assigning undefined, the fact that indexes 0, 1, and 2 are targets of assignment operations means that those elements of the array will be treated as "real" by methods like .reduce():
[undefined, undefined, undefined].reduce(function(c) { return c + 1; }, 0);
// 3
[,,].reduce(function(c) { return c + 1; }, 0);
// 0
Many of the Array.prototype methods skip uninitialized array elements.

Chaining the map function to the Array Constructor [duplicate]

This question already has answers here:
(new Array(10)).map(function() { return 1;}) returns [, , , , , ...] ... Why? [duplicate]
(3 answers)
Closed 7 years ago.
Trying to find a way to inline the creation of an array of data given its size, i tried
var n = 4;
var data = (new Array(n)).map(function(x) { return 1 });
which gave me
[undefined, undefined, undefined, undefined]
Regarding that
new Array(n)
gives
[undefined, undefined, undefined, undefined]
and that
[undefined, undefined, undefined, undefined].map(function(x) { return 1 });
returns
[1, 1, 1, 1]
I would expect to be able to chain the Array constructor and the map function.
Any insights on that behavior ?
new Array(n) creates an array of size n, but with no elements in it. This is called a sparse array. Though there are no elements in the array, the browser represents them as undefined. And Array.prototype.map will ignore the array elements which are not defined yet.
Quoting from the ECMA 5.1 Specification for Array.prototype.map,
callbackfn is called only for elements of the array which actually exist; it is not called for missing elements of the array.
To be able to chain the map function, you might want to do like this
console.log(Array.apply(null, {length: n}).map(function(x) { return 1 }));
# [ 1, 1, 1, 1 ]

Arrays created with new? [duplicate]

This question already has answers here:
Undefined values in Array(len) initializer
(5 answers)
Closed 7 years ago.
I am confused by the results of mapping over an array created with new:
function returnsFourteen() {
return 14;
}
var a = new Array(4);
> [undefined x 4] in Chrome, [, , , ,] in Firefox
a.map(returnsFourteen);
> [undefined x 4] in Chrome, [, , , ,] in Firefox
var b = [undefined, undefined, undefined, undefined];
> [undefined, undefined, undefined, undefined]
b.map(returnsFourteen);
> [14, 14, 14, 14]
I expected a.map(returnsFourteen) to return [14, 14, 14, 14] (the same as b.map(returnsFourteen), because according to the MDN page on arrays:
If the only argument passed to the Array constructor is an integer
between 0 and 2**32-1 (inclusive), a new JavaScript array is created
with that number of elements.
I interpret that to mean that a should have 4 elements.
What am I missing here?
When you create an array like so:
var arr1 = new Array( 4 );
you get an array that has a length of 4, but that has no elements. That's why map doesn't tranform the array - the array has no elements to be transformed.
On the other hand, if you do:
var arr2 = [ undefined, undefined, undefined, undefined ];
you get and array that also has a length of 4, but that does have 4 elements.
Notice the difference between having no elements, and having elements which values are undefined. Unfortunately, the property accessor expression will evaluate to the undefined value in both cases, so:
arr1[0] // undefined
arr2[0] // undefined
However, there is a way to differentiate these two arrays:
'0' in arr1 // false
'0' in arr2 // true
var a = new Array(4);
This defines a new array object with an explicit length of 4, but no elements.
var b = [undefined, undefined, undefined, undefined];
This defines a new array object with an implicit length of 4, with 4 elements, each with the value undefined.
From the docs:
callback is invoked only for indexes of the array which have assigned
values; it is not invoked for indexes which have been deleted or which
have never been assigned values.
For array a, there are no elements that have been assigned values, so it does nothing.
For array b, there are four elements that have been assigned values (yes, undefined is a value), so it maps all four elements to the number 14.
new Array(len) creates an empty array, and does something different than filling it with undefined values: It sets its length to len. So, it translates to this code:
var newArr = [];
newArr.length = len;
Let's have some fun with newArr (assuming that len = 4):
newArr.length; //4
newArr[1] === undefined; //true
newArr.hasOwnProperty(1); //false
This is because while the is 4 items long, it does not contain any of these 4 items. Imagine an empty bullet-clip: It has space for, say, 20 bullets, but it doesn't contain any of them. They weren't even set to the value undefined, they just are...undefined (which is a bit confusing.)
Now, Array.prototype.map happily walks along your first array, chirping and whistling, and every time it sees an array item, it calls a function on it. But, as it walks along the empty bullet-clip, it sees no bullets. Sure, there are room for bullets, but that doesn't make them exist. In here, there is no value, because the key which maps to that value does not exist.
For the second array, which is filled with undefined values, the value is undefined, and so is the key. There is something inside b[1] or b[3], but that something isn't defined; but Array.prototype.map doesn't care, it'll operate on any value, as long as it has a key.
For further inspection in the spec:
new Array(len) : http://es5.github.com/#x15.4.2.2
Array.prototype.map : http://es5.github.com/#x15.4.4.19 (pay close attention to step 8.b)
One additional answer on the behavior of console.log. Plain simple, the output is sugar and technically wrong.
Lets consider this example:
var foo = new Array(4),
bar = [undefined, undefined, undefined, undefined];
console.log( Object.getOwnPropertyNames(bar) );
console.log( Object.getOwnPropertyNames(foo) );
As we can see in the result, the .getOwnPropertyNames function returns
["length"]
for the foo Array/Object, but
["length", "0", "1", "2", "3"]
for the bar Array/Object.
So, the console.log just fools you on outputting Arrays which just have a defined .length but no real property assignments.

Categories