Benchmark: Object.create(null) vs {} / Nullish coalescing assignment

Tests:

Object.create(null);
const obj = Object.create(null); for (i = 0; i < 100_000; i++) { obj[i] ??= i; }
{}
const obj = {}; for (i = 0; i < 100_000; i++) { obj[i] ??= i; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.create(null);
{}

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

{}

475/s

Object.create(null);

420/s

View exact numbers

Test name	Executions per second
✓ {}	475 Ops/sec
Object.create(null);	420 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark measures the performance difference between two approaches:

1. **`Object.create(null)`**: This method creates an object with no prototype chain, effectively making it a plain object without any inherited properties or methods.
2. **An empty object `{}`** (i.e., an object created using the literal syntax): This is another way to create a plain object in JavaScript.

Both approaches are used to set up an object and then perform an assignment operation on its properties (`obj[i] = i;`) 100,000 times. The difference lies in how the initial state of the object is created.

Now, let's discuss the pros and cons of each approach:

**`Object.create(null)`**

Pros:

*   **Performance**: Creating an `Object.create(null)` object is generally faster than creating an empty object `{}` because it avoids the overhead of parsing and constructing a new object literal.
*   **Memory efficiency**: The resulting object has less memory overhead since it doesn't have any prototype chain references.

Cons:

*   **Complexity**: Using `Object.create()` can make code harder to read, especially for developers who are not familiar with this method.
*   **Browser support**: Although widely supported, older browsers like Internet Explorer ( prior to version 11) may not support `Object.create(null)`.

**An empty object `{}`**

Pros:

*   **Readability**: The syntax is more straightforward and easier to understand for developers who are comfortable with literal object notation.
*   **Browser support**: Most modern browsers, including Internet Explorer 11+, fully support the empty object syntax `{}`.

Cons:

*   **Performance**: Creating an empty object using the literal syntax might be slightly slower than creating an `Object.create(null)` object due to parsing and construction overhead.

**Nullish coalescing assignment (`??=`)**

The benchmark also compares the performance of the nullish coalescing operator (`??`) in combination with array indexing (`obj[i] = i;`). This approach is often used for setting default values or initializations in JavaScript.

Pros:

*   **Conciseness**: The syntax `obj[i] ??= i` is very concise and readable, making it an attractive choice for developers.
*   **Browser support**: All modern browsers support the nullish coalescing operator (`??`).

Cons:

*   **Performance**: While generally optimized, some performance variations might exist between different browsers or JavaScript engines.

Now, let's talk about libraries used in this benchmark. None of the provided test cases utilize any external libraries.

Regarding special JS features or syntax, there are a few to be aware of:

*   The nullish coalescing operator (`??`) was introduced in ECMAScript 2020 and supports most modern browsers.
*   `Object.create(null)` has been part of JavaScript since its inception but is still not widely used.

If you're interested in exploring alternative benchmarking tools or techniques, consider the following options:

*   **Benchmarking frameworks**: Tools like Benchmark.js, Benchmark-Runner, or even simple benchmarking libraries like js-benchmark can help you create and run benchmarks efficiently.
*   **ES6+ features**: For those interested in exploring more advanced JavaScript features, MeasureThat.net also has a range of benchmarks for ES6+ syntaxes and modern browser support.

Keep in mind that benchmarking performance is often a complex task, involving various factors like cache efficiency, JIT optimization, and more.

Object.create(null) vs {} / Nullish coalescing assignment (version: 0)

Comparing performance of: `Object.create(null); vs {}`

Created: 2 years ago by: Guest

Go to the latest result

Object.create(null);

{}

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.create(null) vs {} / Nullish coalescing assignment (version: 0)

Comparing performance of: Object.create(null); vs {}

Created: 2 years ago by: Guest

Go to the latest result

Object.create(null);

{}

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object.create(null); vs {}`