This rule raises an issue when multiple consecutive calls are made to Array#push(), Element#classList.add(), Element#classList.remove(), or importScripts() on the same object.

Why is this an issue?

Making multiple consecutive calls to methods that accept multiple arguments creates unnecessary overhead and reduces code readability.

Methods like Array#push(), Element#classList.add(), Element#classList.remove(), and importScripts() are designed to accept multiple arguments in a single call. When you make multiple separate calls instead of one combined call, you create several issues:

• Performance overhead: Each method call has a small performance cost. Multiple calls mean multiple function invocations, parameter processing, and potential DOM updates (for classList methods).
• Reduced readability: Multiple lines doing similar operations make the code longer and harder to scan quickly.
• Inconsistent patterns: Using single calls when multiple arguments are supported goes against the intended API design.

For example, calling array.push(1); array.push(2); requires two separate function calls, while array.push(1, 2) accomplishes the same result with one call. Similarly, element.classList.add('foo'); element.classList.add('bar'); triggers two DOM updates, while element.classList.add('foo', 'bar') can be optimized by the browser into a single update.

What is the potential impact?

The impact is primarily on code maintainability and minor performance improvements. While the performance gain from combining calls is usually small, it can be noticeable in performance-critical code or when dealing with many DOM manipulations. The main benefit is improved code readability and consistency with JavaScript API best practices.

How to fix?

Combine multiple consecutive Array#push() calls into a single call with multiple arguments.

Non-compliant code example

const items = [];
items.push(1); // Noncompliant
items.push(2, 3); // Noncompliant

Compliant code example

const items = [];
items.push(1, 2, 3);

How to fix in Web Workers?

Combine multiple consecutive importScripts() calls into a single call.

Non-compliant code example

importScripts('https://example.com/lib1.js'); // Noncompliant
importScripts('https://example.com/lib2.js'); // Noncompliant

Compliant code example

importScripts(
  'https://example.com/lib1.js',
  'https://example.com/lib2.js'
);

Documentation

• eslint-plugin-unicorn - Rule prefer-single-call
• Array.prototype.push() - MDN - Documentation for the Array push method that accepts multiple arguments
• Element.classList - MDN - Documentation for the classList API including add() and remove() methods
• WorkerGlobalScope.importScripts() - MDN - Documentation for the importScripts method in Web Workers