16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
94 lines
3.0 KiB
Plaintext
94 lines
3.0 KiB
Plaintext
== Why is this an issue?
|
||
|
||
Array literals should always be preferred to Array constructors.
|
||
|
||
|
||
Array constructors are error-prone due to the way their arguments are interpreted. If more than one argument is used, the array length will be equal to the number of arguments. However, using a single argument will have one of three consequences:
|
||
|
||
* If the argument is a number and it is a natural number the length will be equal to the value of the argument.
|
||
|
||
----
|
||
let arr = new Array(3); // [empty × 3]
|
||
----
|
||
|
||
* If the argument is a number, but not a natural number an exception will be thrown.
|
||
|
||
----
|
||
let arr = new Array(3.14); // RangeError: Invalid array length
|
||
----
|
||
|
||
* Otherwise the array will have one element with the argument as its value.
|
||
|
||
----
|
||
let arr = new Array("3"); // ["3"]
|
||
----
|
||
|
||
Note that even if you set the length of an array, it will be empty. That is, it will have the number of elements you declared, but they won't contain anything, so no callbacks will be applied to the array elements.
|
||
|
||
|
||
For these reasons, if someone changes the code to pass 1 argument instead of 2 arguments, the array might not have the expected length. To avoid these kinds of weird cases, always use the more readable array literal initialization format.
|
||
|
||
|
||
=== Noncompliant code example
|
||
|
||
[source,javascript]
|
||
----
|
||
let myArray = new Array(x1, x2, x3); // Noncompliant. Results in 3-element array.
|
||
let emptyArray = new Array(); // Noncompliant. Results in 0-element array.
|
||
|
||
let unstableArray = new Array(n); // Noncompliant. Variable in results.
|
||
|
||
let arr = new Array(3); // Noncompliant; empty array of length 3
|
||
arr.foreach((x) => alert("Hello " + x)); // callback is not executed because there's nothing in arr
|
||
let anotherArr = arr.map(() => 42); // anotherArr is also empty because callback didn't execute
|
||
----
|
||
|
||
|
||
=== Compliant solution
|
||
|
||
[source,javascript]
|
||
----
|
||
let myArray = [x1, x2, x3];
|
||
let emptyArray = [];
|
||
|
||
// if "n" is the only array element
|
||
let unstableArray = [n];
|
||
// or, if "n" is the array length (since ES 2015)
|
||
let unstableArray = Array.from({length: n});
|
||
|
||
let arr = ["Elena", "Mike", "Sarah"];
|
||
arr.foreach((x) => alert("Hello " + x));
|
||
let anotherArr = arr.map(() => 42); // anotherArr now holds 42 in each element
|
||
----
|
||
|
||
|
||
ifdef::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
=== Message
|
||
|
||
Use either "Array.from()" or a literal instead of the "Array" constructor.
|
||
|
||
When the only argument is a numeric literal:
|
||
|
||
Use "Array.from()" instead of the "Array" constructor.
|
||
|
||
|
||
'''
|
||
== Comments And Links
|
||
(visible only on this page)
|
||
|
||
=== on 18 Aug 2014, 15:44:09 Ann Campbell wrote:
|
||
Note that from a SQALE perspective, I believe this rule should be split. The reason to use Object literals is clarity, but you could face real bugs if you don't use Array literals.
|
||
|
||
=== on 10 Mar 2017, 14:02:51 Ann Campbell wrote:
|
||
\[~jeanchristophe.collet] did you mean to leave "and Object" in place in the first sentence?
|
||
|
||
=== on 10 Mar 2017, 14:15:36 Jean-Christophe Collet wrote:
|
||
Good catch. Updated the message as well.
|
||
|
||
endif::env-github,rspecator-view[]
|