9aca4314df
## Review A dedicated reviewer checked the rule description successfully for: - [ ] logical errors and incorrect information - [ ] information gaps and missing content - [ ] text style and tone - [ ] PR summary and labels follow [the guidelines](https://github.com/SonarSource/rspec/#to-modify-an-existing-rule) --------- Co-authored-by: Loris S <91723853+loris-s-sonarsource@users.noreply.github.com> Co-authored-by: leonardo-pilastri-sonarsource <115481625+leonardo-pilastri-sonarsource@users.noreply.github.com>
92 lines
3.2 KiB
Plaintext
92 lines
3.2 KiB
Plaintext
== Why is this an issue?
|
|
|
|
In JavaScript, `null` and `undefined` are primitive values that do not have properties or methods. When accessing a property on a `null` or `undefined` value, JavaScript tries to access the property of an object that does not exist, which results in a `TypeError`.
|
|
|
|
This can cause the program to crash or behave unexpectedly, which can be difficult to debug.
|
|
|
|
== How to fix it
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
let foo = null;
|
|
console.log(foo.bar); // Noncompliant: TypeError will be thrown
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
The simplest solution is to check in a `if` condition the equality to `null` or `undefined`.
|
|
With the https://262.ecma-international.org/6.0/#sec-abstract-equality-comparison[abstract equality operator] it is not
|
|
required to check both, as these operators consider `null` and `undefined` to be equals.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
let foo;
|
|
if (foo != null) {
|
|
console.log(foo.bar);
|
|
}
|
|
----
|
|
|
|
Also, the logical AND operator (`&&`) can be used to check if a variable is truthy before attempting to access its properties.
|
|
The expression will short-circuit and return the falsy value instead of attempting to access its properties.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
let foo = null;
|
|
console.log(foo && foo.bar);
|
|
----
|
|
|
|
Alternatively, use the optional chaining operator (`?.`) to check if the variable is `null` or `undefined` before attempting to access its property. This operator is more readable and concise, especially when dealing with nested properties.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
let foo = null;
|
|
console.log(foo?.bar);
|
|
----
|
|
|
|
== Resources
|
|
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined[`undefined`]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null[`null`]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError[`TypeError`]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/No_properties[TypeError: "x" has no properties]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining[Optional chaining (``++?.++``)]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND[Logical AND (``++&&++``)]
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
include::../message.adoc[]
|
|
|
|
include::../highlighting.adoc[]
|
|
|
|
'''
|
|
== Comments And Links
|
|
(visible only on this page)
|
|
|
|
=== on 15 Mar 2016, 09:45:14 Pierre-Yves Nicolas wrote:
|
|
Useful links:
|
|
|
|
* \https://javascriptweblog.wordpress.com/2010/08/16/understanding-undefined-and-preventing-referenceerrors/
|
|
* \https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
|
|
|
|
We could make this rule also cover invalid function calls, e.g.:
|
|
|
|
----
|
|
var x = 42;
|
|
x(); // Noncompliant: TypeError will be thrown
|
|
----
|
|
However, there may be some overlap with RSPEC-2999.
|
|
|
|
include::../comments-and-links.adoc[]
|
|
|
|
endif::env-github,rspecator-view[]
|