Benchmark: Custom Build Query

Script Preparation code:

var querystring = 'foo=bar&baz=qux&quxx=corge&grault=garply&waldo=fred&plugh=xyzzy'

var queryobj = {
  foo: 'bar',
  baz: 'qux',
  quux: 'corge',
  grault: 'garply',
  waldo: 'fred',
  plugh: 'xyzzy'
}

function encode(data) {
  let result = '?'

  for (const key in data) {
    if (data[key] != null) {
      result += key + '=' + data[key] + '&'
    }
  }

  return result.slice(0, -1)
}

function encodeNative(data) {
  return new URLSearchParams(data).toString()
}

function buildQueryString(params) {
  const query = Object.entries(params)
    .filter(([_, value]) => value !== undefined && value !== null)
    .map(([key, value]) => `${key}=${encodeURIComponent(String(value))}`)
    .join('&');

  return query ? `?${query}` : '';
}

Tests:

URLSearchParams
encodeNative(queryobj)
Custom
buildQueryString(queryobj)
Custom 2
encode(queryobj)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
URLSearchParams
Custom
Custom 2

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 hours ago):

LLMs can make mistakes. Check important info.

The benchmark from MeasureThat.net is testing different methods of creating a query string from an object in JavaScript, specifically comparing three approaches:

### Approaches Compared

1. **encode** - A custom implementation.
2. **buildQueryString** - Another custom implementation.
3. **URLSearchParams** - A built-in JavaScript API.

### Detailed Breakdown

#### 1. `encode` Function
- **Description**: This function takes an object as input and manually constructs a query string. It iterates over the object's keys, checking if each value is not `null` or `undefined`, and appends the key-value pairs to a result string in the `key=value` format.
- **Pros**:
  - It's straightforward and simple to understand. 
  - You have full control over the formatting and handling of the data.
- **Cons**:
  - Can be inefficient for larger objects since it manually constructs the string.
  - Doesn't use `encodeURIComponent`, potentially leading to malformed query strings if values need encoding.

#### 2. `buildQueryString` Function
- **Description**: This function uses `Object.entries()` to convert the object into an array of key-value pairs and then filters and maps these pairs into a query string format, before joining them together.
- **Pros**:
  - Uses `encodeURIComponent` to ensure that values are properly encoded.
  - More functional style, leveraging ES6+ features like array methods.
  - More robust as it handles undefined values explicitly.
- **Cons**:
  - May have slight overhead due to using multiple methods (`filter`, `map`, `join`), potentially impacting performance for very large objects compared to other approaches.

#### 3. `URLSearchParams`
- **Description**: This is a built-in browser API that converts an object into a URL-encoded string.
- **Pros**:
  - It is highly optimized and often has better performance than custom implementations.
  - Automatically handles encoding and is very simple to use.
  - Results are standardized and consistent across different browsers.
- **Cons**:
  - Less customizable if you need special handling for certain types of data or specific formatting.

### Benchmark Results

From the benchmark results, we see the following executions per second on a Safari browser:

- **`encode`**: 6,042,339.5 executions per second
- **`buildQueryString`**: 1,594,484.5 executions per second
- **`URLSearchParams`**: 1,505,655.375 executions per second

This indicates that the `encode` function outperforms both custom and native solutions in this specific environment. However, it's important to note that performance can vary based on the JavaScript engine implementation and the complexity of the data being processed.

### Other Considerations
- **Performance Environment**: Results might differ widely based on the environment. Testing should always be done on the targeted browsers and devices.
- **Data Size and Complexity**: Consider the size and type of data being passed. For smaller datasets, performance differences may be negligible, but as the dataset grows, the efficiency of the methods becomes more relevant.
- **Readability and Maintainability**: While performance is important, maintainability of the code should not be overlooked. Using built-in functions (like `URLSearchParams`) can lead to fewer bugs in the long term given their reliability.
- **Browser Compatibility**: Different APIs may have varying levels of support across browsers, which should be considered in a cross-browser application.

### Alternatives
- **Third-party Libraries**: There are libraries like `qs` and `query-string`, which are designed for more complex query string manipulation functionality. They often include features for deeper customization and handling edge cases in encoding, but might introduce additional dependency overhead.
- **Manual String Construction**: It could also be worth experimenting with other methods of string manipulation directly if you need very specific control over the output form.

In summary, the benchmark is valuable in providing insights into performance and suitability for various methods of creating query strings in JavaScript. Each approach carries its own strengths and weaknesses, and the choice of which to use should be dictated by the specific needs of the project.

Latest run results:

Run details: (Test run date: 17 hours ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
URLSearchParams	1505655.4 Ops/sec
Custom	1594484.5 Ops/sec
Custom 2	6042339.5 Ops/sec

Related benchmarks:

Custom Build Query (version: 1)

Comparing performance of: URLSearchParams vs Custom vs Custom 2

Created: 17 hours ago by: Guest

Jump to the latest result

URLSearchParams

Custom

Custom 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 hours ago):