Avoiding Unsafe Calls in JavaScript and React Projects with ESLint

Avoiding Unsafe Calls in JavaScript and React Projects with ESLint

?✨ In modern JavaScript and React applications, it's common to encounter runtime errors caused by accessing properties on undefined or null values, or calling methods on undefined arrays or objects. These issues can disrupt user experience and make debugging a nightmare. In this article, we'll identify the common issues and provide an ESLint configuration to mitigate them effectively. ??

?✨ In our React or React Native projects, because we are not using TypeScript, we sometimes forget to write safe code. These unsafe codes can lead to many issues in production, like crashing React Native apps, frustrating users, and complicating maintenance. Let's dive into these common issues and how to solve them. ???

Common Issues with Unsafe Calls

1. Accessing Properties on undefined or null ??✨

Problem:

Accessing a property on an object that is undefined or null causes a runtime error:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Solution:

• Solution 1: Use optional chaining (?.).

const name = user?.name;

• Solution 2: Employ a default fallback.

const name = user ? user.name : 'Default Name';

• Solution 3: Ensure initialization before access.

const user = { name: 'Default Name' };

2. Calling Methods on undefined or null ✋??

Problem:

Calling methods like .map() or .filter() on an undefined array throws an error:

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

Solution:

• Solution 1: Verify that the variable is an array.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• Solution 2: Provide a default array.

const items = someValue || [];
items.map(item => console.log(item));

• Solution 3: Use the nullish coalescing operator (??).

const items = possibleItems ?? [];

3. Invoking Undefined Functions ⚙️⚠️?

Problem:

Trying to call a function that might be undefined:

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

Solution:

• Solution 1: Check existence before invocation.

if (typeof handler === 'function') {
  handler();
}

• Solution 2: Assign a no-op default function.

const handler = passedHandler || (() => {});

4. Destructuring Undefined or Null Objects ?❌?

Problem:

Destructuring properties from an undefined object results in an error:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Solution:

• Solution 1: Use optional chaining with defaults.

const name = user?.name;

• Solution 2: Validate before destructuring.

const name = user ? user.name : 'Default Name';

5. Accessing Non-Existent Array Elements ???

Problem:

Accessing elements of an undefined array causes an error:

const user = { name: 'Default Name' };

Solution:

• Solution 1: Provide a default fallback.

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

• Solution 2: Initialize arrays properly.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. Invalid Array/Function Usage ??

Problem:

Using array methods like .map() or .filter() on undefined values or objects:

const items = someValue || [];
items.map(item => console.log(item));

Solution:

• Solution 1: Always validate inputs for array functions.

const items = possibleItems ?? [];

• Solution 2: Return a safe result if input isn't valid.

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

7. Insufficient Conditional Checks ??

Problem:

Failing to validate conditions strictly can lead to bugs, such as relying on falsy values. For example, if conditions expecting a boolean might incorrectly evaluate other types like undefined or 0:

if (typeof handler === 'function') {
  handler();
}

Solution:

• Solution 1: Use strict equality comparisons.

const handler = passedHandler || (() => {});

• Solution 2: Coerce values explicitly for intended behavior.

const obj = undefined;
const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined

• Solution 3: Define explicit conditions in your code.

const { name = 'Default Name' } = user || {};

---

Using ESLint to Avoid Unsafe Calls ??✅

To catch these issues during development, we can leverage ESLint with specific rules. Below is an ESLint configuration that will flag unsafe calls and suggest fixes. ?️??

ESLint Configuration ???️

Add the following rules to your .eslintrc.js or ESLint configuration file:

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

Explanation of Rules ?⚙️?

1. @typescript-eslint/no-unnecessary-condition: Flags unnecessary conditions or unhandled potential undefined or null values. ⚠️
2. no-unused-expressions: Ensures that short-circuited logic like someObject && someObject.doSomething is avoided unless explicitly necessary. ?
3. @typescript-eslint/no-unsafe-call: Prevents unsafe function calls on non-functions. ❌
4. @typescript-eslint/no-unsafe-member-access: Flags attempts to access properties on potentially undefined values. ✋
5. consistent-return: Enforces consistent return types in functions to avoid returning invalid or undefined values. ?
6. @typescript-eslint/strict-boolean-expressions: Strengthens conditional expressions by preventing implicit coercion. ?
7. @typescript-eslint/no-non-null-assertion: Disallows the unsafe ! operator used to bypass null/undefined checks. ?

---

Installing Required Dependencies ???

To enable these rules, ensure you have the necessary ESLint plugins and parsers installed:

const name = user?.name;

---

Integrating ESLint with VSCode ?️??

1. Install the ESLint Extension:

• Search for "ESLint" in the VSCode marketplace and install it. ✨

2. Enable Auto-Fixing:

Add the following to your settings.json:

const name = user ? user.name : 'Default Name';

3. Run ESLint:

Add an npm script to run ESLint:

const user = { name: 'Default Name' };

Then, run npm run lint to catch issues. ?

---

Conclusion ???

By implementing the above ESLint rules and practices, you can catch and fix unsafe calls before they become runtime errors. ?? This approach will improve the reliability and maintainability of your JavaScript and React projects. ?⚙️✨

---

The above is the detailed content of Avoiding Unsafe Calls in JavaScript and React Projects with ESLint. For more information, please follow other related articles on the PHP Chinese website!