Benchmark: typeof string vs nullish check

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var stringArr = Array(10_000).fill(undefined).map((_, index) => `${index + 1}`);
var nullishArr = Array(10_000).fill(undefined).map(() => null);

Tests:

typeof string
const stringResult = stringArr.filter((v) => typeof v === 'string'); const nullishResult = nullishArr.filter((v) => typeof v === 'string');
nullish check
const stringResult = stringArr.filter((v) => v != null); const nullishResult = nullishArr.filter((v) => v != null);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
typeof string
nullish check

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
typeof string	12941.8 Ops/sec
nullish check	8637.6 Ops/sec

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

LLMs can make mistakes. Check important info.

### Overview of Benchmark

The benchmark titled "typeof string vs nullish check" is designed to compare the performance of two different techniques for checking values in JavaScript arrays. This benchmark utilizes two arrays: `stringArr`, which contains string representations of numbers, and `nullishArr`, which is filled with `null` values.

### Test Cases

1. **Test Case: `typeof string`**
   - **Benchmark Definition:** 
     ```javascript
     const stringResult = stringArr.filter((v) => typeof v === 'string');
     const nullishResult = nullishArr.filter((v) => typeof v === 'string');
     ```
   - **Description:** This test case filters both arrays to identify values that are specifically of the type `string`. The `typeof` operator is employed here, which returns a string indicating the type of the unevaluated operand.
   - **Pros:** 
     - It's straightforward and clearly expresses the intent of checking the data type.
     - Useful for type checking where we want precise identification of value types.
   - **Cons:** 
     - For large arrays, using `typeof` might incur a performance penalty due to the overhead of type checking for each element.
   - **Use Case:** This is useful when validating or coercing input types, ensuring that only strings pass through for further processing.

2. **Test Case: `nullish check`**
   - **Benchmark Definition:**
     ```javascript
     const stringResult = stringArr.filter((v) => v != null);
     const nullishResult = nullishArr.filter((v) => v != null);
     ```
   - **Description:** This test case filters the arrays to check for values that are not `null` (or `undefined` due to the use of loose inequality). The use of `!=` checks both `null` and `undefined` values, effectively filtering out undefined values in the `stringArr` and keeping `null` in the `nullishArr`.
   - **Pros:** 
     - This method simplifies checking for nullish values (both `null` and `undefined`) and can be more performant than checking types if a large volume of undefined is expected.
     - By using `!=`, it handles both null and undefined, which is often desirable in JavaScript's loosely typed nature.
   - **Cons:** 
     - It might lead to a misunderstanding as it allows for other falsy values (like `0` or `""`) being considered valid.
     - Not as explicit as `typeof`, which could lead to ambiguity in certain scenarios.
   - **Use Case:** Common when needing to filter out non-existent values before processing an array.

### Performance Results

The results show the execution speed in terms of "Executions Per Second" for each test case on Chrome 131 running on macOS:

- **`typeof string`:** ~19,467 executions per second.
- **`nullish check`:** ~18,519 executions per second.

From the results:
- The `typeof` check appears to be slightly faster than the nullish check on this particular setup.

### Other Considerations and Alternatives

When considering approaches for similar benchmarking:

- **Alternatives to `typeof` and nullish checks:**
  - **Using `Array.prototype.every()`** could potentially be a way to validate all elements of an array if you are checking for integrity and require a boolean outcome rather than filtering. This adds overhead if returning specific values.
  - **TypeScript or Flow** for type checking can give developers additional safety and tooling but moves type checks to compile time, not run time in JavaScript.

- **Libraries:** No specific external libraries are used in this benchmark. However, when working with more complex data structures, libraries like **Lodash** (for utility functions) could be beneficial, offering optimized functions for deep checks or robust filtering capabilities.

Understanding the distinction and performance implications of these approaches allows developers to make informed decisions when implementing data type validation and manipulation in their applications.

Related benchmarks:

typeof string vs nullish check (version: 1)

Comparing performance of: typeof string vs nullish check

Created: 4 months ago by: Registered User

Jump to the latest result

typeof string

nullish check

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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