Why do I need to copy an array to use a method on it?
up vote
15
down vote
favorite
I can use Array()
to have an array with a fixed number of undefined entries. For example
Array(2); // [empty × 2]
But if I go and use the map method, say, on my new array, the entries are still undefined:
Array(2).map( () => "foo"); // [empty × 2]
If I copy the array then map does work:
[...Array(2)].map( () => "foo"); // ["foo", "foo"]
Why do I need a copy to use the array?
javascript arrays
add a comment |
up vote
15
down vote
favorite
I can use Array()
to have an array with a fixed number of undefined entries. For example
Array(2); // [empty × 2]
But if I go and use the map method, say, on my new array, the entries are still undefined:
Array(2).map( () => "foo"); // [empty × 2]
If I copy the array then map does work:
[...Array(2)].map( () => "foo"); // ["foo", "foo"]
Why do I need a copy to use the array?
javascript arrays
what is the result of[...Array(2)]
– Kain0_0
Nov 27 at 2:39
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
1
Can usefill()
also.Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference
– charlietfl
Nov 27 at 2:54
add a comment |
up vote
15
down vote
favorite
up vote
15
down vote
favorite
I can use Array()
to have an array with a fixed number of undefined entries. For example
Array(2); // [empty × 2]
But if I go and use the map method, say, on my new array, the entries are still undefined:
Array(2).map( () => "foo"); // [empty × 2]
If I copy the array then map does work:
[...Array(2)].map( () => "foo"); // ["foo", "foo"]
Why do I need a copy to use the array?
javascript arrays
I can use Array()
to have an array with a fixed number of undefined entries. For example
Array(2); // [empty × 2]
But if I go and use the map method, say, on my new array, the entries are still undefined:
Array(2).map( () => "foo"); // [empty × 2]
If I copy the array then map does work:
[...Array(2)].map( () => "foo"); // ["foo", "foo"]
Why do I need a copy to use the array?
javascript arrays
javascript arrays
asked Nov 27 at 2:35
cham
576621
576621
what is the result of[...Array(2)]
– Kain0_0
Nov 27 at 2:39
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
1
Can usefill()
also.Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference
– charlietfl
Nov 27 at 2:54
add a comment |
what is the result of[...Array(2)]
– Kain0_0
Nov 27 at 2:39
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
1
Can usefill()
also.Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference
– charlietfl
Nov 27 at 2:54
what is the result of
[...Array(2)]
– Kain0_0
Nov 27 at 2:39
what is the result of
[...Array(2)]
– Kain0_0
Nov 27 at 2:39
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
1
1
Can use
fill()
also. Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference– charlietfl
Nov 27 at 2:54
Can use
fill()
also. Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference– charlietfl
Nov 27 at 2:54
add a comment |
3 Answers
3
active
oldest
votes
up vote
24
down vote
accepted
When you use Array(arrayLength)
to create an array, you will have:
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).
The array does not actually contain any values, not even undefined
values - it simply has a length
property.
When you spread an item with a length
property into an array, eg [...{ length: 4 }]
, spread syntax accesses each index and sets the value at that index in the new array. For example:
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
And .map
only maps properties/values for which the property actually exists in the array you're mapping over.
Using the array constructor is confusing. I would suggest using Array.from
instead, when creating arrays from scratch - you can pass it an object with a length
property, as well as a mapping function:
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
I sawArray()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
– cham
Nov 27 at 2:45
It used to be a decent option, beforeArray.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
– CertainPerformance
Nov 27 at 2:46
add a comment |
up vote
7
down vote
The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.
Consider:
var array1 = Array(2);
array1[0] = undefined;
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(array1);
console.log(map1);
Outputs:
Array [undefined, undefined]
Array [NaN, undefined]
When the array is printed each of its elements are interrogated. The first has been assigned undefined
the other is defaulted to undefined
.
The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined
.
New contributor
add a comment |
up vote
0
down vote
As pointed out by @CertainPerformance, your array doesn't have any properties besides its length
, you can verify that with this line: new Array(1).hasOwnProperty(0)
, which returns false
.
Looking at 15.4.4.19 Array.prototype.map you can see, at 7.3, there's a check whether a key exists in the array.
1..6. [...]
7. Repeat,
while k < len
Let
Pk be ToString(k).
Let
kPresent be the result of calling the [[HasProperty]]
internal method of O with argument Pk.
If
kPresent is true, then
Let
kValue be the result of calling the [[Get]] internal
method of O with argument Pk.
Let
mappedValue be the result of calling the [[Call]] internal
method of callbackfn with T as the this
value and argument list containing kValue, k, and
O.
Call
the [[DefineOwnProperty]] internal method of A with
arguments Pk, Property Descriptor {[[Value]]: mappedValue,
[[Writable]]: true, [[Enumerable]]: true,
[[Configurable]]: true}, and false.
Increase
k by 1.
9. Return A.
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
24
down vote
accepted
When you use Array(arrayLength)
to create an array, you will have:
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).
The array does not actually contain any values, not even undefined
values - it simply has a length
property.
When you spread an item with a length
property into an array, eg [...{ length: 4 }]
, spread syntax accesses each index and sets the value at that index in the new array. For example:
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
And .map
only maps properties/values for which the property actually exists in the array you're mapping over.
Using the array constructor is confusing. I would suggest using Array.from
instead, when creating arrays from scratch - you can pass it an object with a length
property, as well as a mapping function:
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
I sawArray()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
– cham
Nov 27 at 2:45
It used to be a decent option, beforeArray.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
– CertainPerformance
Nov 27 at 2:46
add a comment |
up vote
24
down vote
accepted
When you use Array(arrayLength)
to create an array, you will have:
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).
The array does not actually contain any values, not even undefined
values - it simply has a length
property.
When you spread an item with a length
property into an array, eg [...{ length: 4 }]
, spread syntax accesses each index and sets the value at that index in the new array. For example:
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
And .map
only maps properties/values for which the property actually exists in the array you're mapping over.
Using the array constructor is confusing. I would suggest using Array.from
instead, when creating arrays from scratch - you can pass it an object with a length
property, as well as a mapping function:
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
I sawArray()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
– cham
Nov 27 at 2:45
It used to be a decent option, beforeArray.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
– CertainPerformance
Nov 27 at 2:46
add a comment |
up vote
24
down vote
accepted
up vote
24
down vote
accepted
When you use Array(arrayLength)
to create an array, you will have:
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).
The array does not actually contain any values, not even undefined
values - it simply has a length
property.
When you spread an item with a length
property into an array, eg [...{ length: 4 }]
, spread syntax accesses each index and sets the value at that index in the new array. For example:
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
And .map
only maps properties/values for which the property actually exists in the array you're mapping over.
Using the array constructor is confusing. I would suggest using Array.from
instead, when creating arrays from scratch - you can pass it an object with a length
property, as well as a mapping function:
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
When you use Array(arrayLength)
to create an array, you will have:
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).
The array does not actually contain any values, not even undefined
values - it simply has a length
property.
When you spread an item with a length
property into an array, eg [...{ length: 4 }]
, spread syntax accesses each index and sets the value at that index in the new array. For example:
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
And .map
only maps properties/values for which the property actually exists in the array you're mapping over.
Using the array constructor is confusing. I would suggest using Array.from
instead, when creating arrays from scratch - you can pass it an object with a length
property, as well as a mapping function:
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);
const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);
answered Nov 27 at 2:42
CertainPerformance
68.2k143353
68.2k143353
I sawArray()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
– cham
Nov 27 at 2:45
It used to be a decent option, beforeArray.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
– CertainPerformance
Nov 27 at 2:46
add a comment |
I sawArray()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
– cham
Nov 27 at 2:45
It used to be a decent option, beforeArray.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
– CertainPerformance
Nov 27 at 2:46
I saw
Array()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.– cham
Nov 27 at 2:45
I saw
Array()
in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.– cham
Nov 27 at 2:45
It used to be a decent option, before
Array.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.– CertainPerformance
Nov 27 at 2:46
It used to be a decent option, before
Array.from
was available, but now I don't think there's any reason to use it, it has too much potential for confusion.– CertainPerformance
Nov 27 at 2:46
add a comment |
up vote
7
down vote
The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.
Consider:
var array1 = Array(2);
array1[0] = undefined;
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(array1);
console.log(map1);
Outputs:
Array [undefined, undefined]
Array [NaN, undefined]
When the array is printed each of its elements are interrogated. The first has been assigned undefined
the other is defaulted to undefined
.
The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined
.
New contributor
add a comment |
up vote
7
down vote
The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.
Consider:
var array1 = Array(2);
array1[0] = undefined;
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(array1);
console.log(map1);
Outputs:
Array [undefined, undefined]
Array [NaN, undefined]
When the array is printed each of its elements are interrogated. The first has been assigned undefined
the other is defaulted to undefined
.
The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined
.
New contributor
add a comment |
up vote
7
down vote
up vote
7
down vote
The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.
Consider:
var array1 = Array(2);
array1[0] = undefined;
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(array1);
console.log(map1);
Outputs:
Array [undefined, undefined]
Array [NaN, undefined]
When the array is printed each of its elements are interrogated. The first has been assigned undefined
the other is defaulted to undefined
.
The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined
.
New contributor
The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.
Consider:
var array1 = Array(2);
array1[0] = undefined;
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(array1);
console.log(map1);
Outputs:
Array [undefined, undefined]
Array [NaN, undefined]
When the array is printed each of its elements are interrogated. The first has been assigned undefined
the other is defaulted to undefined
.
The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined
.
New contributor
New contributor
answered Nov 27 at 2:54
Kain0_0
2042
2042
New contributor
New contributor
add a comment |
add a comment |
up vote
0
down vote
As pointed out by @CertainPerformance, your array doesn't have any properties besides its length
, you can verify that with this line: new Array(1).hasOwnProperty(0)
, which returns false
.
Looking at 15.4.4.19 Array.prototype.map you can see, at 7.3, there's a check whether a key exists in the array.
1..6. [...]
7. Repeat,
while k < len
Let
Pk be ToString(k).
Let
kPresent be the result of calling the [[HasProperty]]
internal method of O with argument Pk.
If
kPresent is true, then
Let
kValue be the result of calling the [[Get]] internal
method of O with argument Pk.
Let
mappedValue be the result of calling the [[Call]] internal
method of callbackfn with T as the this
value and argument list containing kValue, k, and
O.
Call
the [[DefineOwnProperty]] internal method of A with
arguments Pk, Property Descriptor {[[Value]]: mappedValue,
[[Writable]]: true, [[Enumerable]]: true,
[[Configurable]]: true}, and false.
Increase
k by 1.
9. Return A.
add a comment |
up vote
0
down vote
As pointed out by @CertainPerformance, your array doesn't have any properties besides its length
, you can verify that with this line: new Array(1).hasOwnProperty(0)
, which returns false
.
Looking at 15.4.4.19 Array.prototype.map you can see, at 7.3, there's a check whether a key exists in the array.
1..6. [...]
7. Repeat,
while k < len
Let
Pk be ToString(k).
Let
kPresent be the result of calling the [[HasProperty]]
internal method of O with argument Pk.
If
kPresent is true, then
Let
kValue be the result of calling the [[Get]] internal
method of O with argument Pk.
Let
mappedValue be the result of calling the [[Call]] internal
method of callbackfn with T as the this
value and argument list containing kValue, k, and
O.
Call
the [[DefineOwnProperty]] internal method of A with
arguments Pk, Property Descriptor {[[Value]]: mappedValue,
[[Writable]]: true, [[Enumerable]]: true,
[[Configurable]]: true}, and false.
Increase
k by 1.
9. Return A.
add a comment |
up vote
0
down vote
up vote
0
down vote
As pointed out by @CertainPerformance, your array doesn't have any properties besides its length
, you can verify that with this line: new Array(1).hasOwnProperty(0)
, which returns false
.
Looking at 15.4.4.19 Array.prototype.map you can see, at 7.3, there's a check whether a key exists in the array.
1..6. [...]
7. Repeat,
while k < len
Let
Pk be ToString(k).
Let
kPresent be the result of calling the [[HasProperty]]
internal method of O with argument Pk.
If
kPresent is true, then
Let
kValue be the result of calling the [[Get]] internal
method of O with argument Pk.
Let
mappedValue be the result of calling the [[Call]] internal
method of callbackfn with T as the this
value and argument list containing kValue, k, and
O.
Call
the [[DefineOwnProperty]] internal method of A with
arguments Pk, Property Descriptor {[[Value]]: mappedValue,
[[Writable]]: true, [[Enumerable]]: true,
[[Configurable]]: true}, and false.
Increase
k by 1.
9. Return A.
As pointed out by @CertainPerformance, your array doesn't have any properties besides its length
, you can verify that with this line: new Array(1).hasOwnProperty(0)
, which returns false
.
Looking at 15.4.4.19 Array.prototype.map you can see, at 7.3, there's a check whether a key exists in the array.
1..6. [...]
7. Repeat,
while k < len
Let
Pk be ToString(k).
Let
kPresent be the result of calling the [[HasProperty]]
internal method of O with argument Pk.
If
kPresent is true, then
Let
kValue be the result of calling the [[Get]] internal
method of O with argument Pk.
Let
mappedValue be the result of calling the [[Call]] internal
method of callbackfn with T as the this
value and argument list containing kValue, k, and
O.
Call
the [[DefineOwnProperty]] internal method of A with
arguments Pk, Property Descriptor {[[Value]]: mappedValue,
[[Writable]]: true, [[Enumerable]]: true,
[[Configurable]]: true}, and false.
Increase
k by 1.
9. Return A.
answered Nov 27 at 8:59
Moritz Roessler
6,2571646
6,2571646
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53491943%2fwhy-do-i-need-to-copy-an-array-to-use-a-method-on-it%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what is the result of
[...Array(2)]
– Kain0_0
Nov 27 at 2:39
@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
Nov 27 at 2:41
1
Can use
fill()
also.Array(2).fill("foo"); // ["foo", "foo"]
Just have to be careful with passing object to fill as all elements will be same reference– charlietfl
Nov 27 at 2:54