Benchmark: Inline JS vs Single Function vs Function Composition

Script Preparation code:

// 1. Inline code will be directly in test case

// 2. Single Functions
globalThis.singleFunction = () => {
  const arr1 = [1, -12, 7];
  const arr2 = arr1.filter(v => v > 0);

  return [...arr1, ...arr2];
};

// 3. Function Composition
const makeArr = (a, b, c) => [a, b, c];
const filterPositive = arr => arr.filter(v => v > 0);
const mergeArrays = (a, b) => [...a, ...b];

globalThis.composition = () => {
  const arr1 = makeArr(1, -12, 7);
  const arr2 = filterPositive(arr1);

  return mergeArrays(arr1, arr2);
};

Tests:

Inline JS
const arr1 = [1, -12, 7]; const arr2 = arr1.filter(v => v > 0); const result = [...arr1, ...arr2];
Single Function
const result = singleFunction();
Function Composition
const result = composition();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline JS
Single Function
Function Composition

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
Inline JS	15589763.0 Ops/sec
Single Function	4521183.0 Ops/sec
Function Composition	4161920.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing three different approaches to perform an array operation:

1. **Inline JS**: The code is directly embedded in the test case as inline JavaScript.
2. **Single Function**: A separate function named `singleFunction` is defined, which performs the same operation as the inline code. This function is called using the `()` operator.
3. **Function Composition**: Two separate functions, `makeArr` and `filterPositive`, are defined. These functions are composed together to perform the desired operation.

**Options Compared**

The three approaches are being compared in terms of performance, which is likely measured by the number of executions per second.

**Pros and Cons**

1. **Inline JS**: Advantages:
	* No overhead of function call or separate file inclusion.
	* Possibly faster due to less context switching.
	* Disadvantages:
		+ Less readable and maintainable code.
		+ May not be suitable for large-scale applications with complex logic.
2. **Single Function**: Advantages:
	* Easier to read and maintain than inline code.
	* Can be reused in other parts of the application.
	* Disadvantages:
		+ Overhead of function call and separate file inclusion.
		+ May have slower performance due to context switching.
3. **Function Composition**: Advantages:
	* More modular and reusable code structure.
	* Easier to test and debug individual functions.
	* Disadvantages:
		+ Overhead of function calls and separate file inclusion.
		+ May have slower performance due to context switching.

**Library Usage**

None of the provided benchmark definitions use any external libraries. However, if we were to extend this comparison, we might consider using libraries like Lodash or Ramda for functional programming tasks.

**Special JS Features or Syntax**

The benchmark uses modern JavaScript features such as:

* Template literals (e.g., `const arr1 = [1, -12, 7];`)
* Arrow functions (e.g., `globalThis.singleFunction = () => { ... }`)
* Spread syntax (e.g., `return [...arr1, ...arr2];`)

These features are widely supported in modern browsers and are likely to be relevant for any benchmarking JavaScript performance.

**Alternatives**

Other alternatives to these approaches might include:

* **Closure**: Defining a function with access to its own scope, which can be used to implement the array operation.
* **Immutable Data Structures**: Using immutable data structures like immutable arrays or objects to avoid modifying the original data.
* **Caching**: Caching the results of expensive operations, like filtering an array, to reduce overhead.

These alternatives might offer different trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

Inline JS vs Single Function vs Function Composition (version: 0)

Comparing performance of: Inline JS vs Single Function vs Function Composition

Created: 2 years ago by: Registered User

Jump to the latest result

Inline JS

Single Function

Function Composition

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):