Benchmark: object destructuring

HTML Preparation code:

<script>
    const o1 = {
        'a': 1,
        'b': 2,
        'c': 3,
        'd': 4,
        'e': 5,
        'f': 6,
        'g': 7,
        'h': 8,
        'i': 9,
        'j': 10,
        'k': 11,
        'l': 12,
        'm': 13,
        'n': 14,
        'o': 15,
        'p': 16,
        'q': 17,
        'r': 18,
        's': 19,
        't': 20,
        'u': 21,
        'v': 22,
        'w': 23,
        'x': 24,
        'y': 25,
        'z': 26
    }
    const o2 = [...Object.values(o1)];

    function f1() {
        let a = o1.a;
        let b = o1.b;
        let c = o1.c;
        let d = o1.d;
        let e = o1.e;
        let f = o1.f;
        let g = o1.g;
        let h = o1.h;
        let i = o1.i;
        let j = o1.j;
        let k = o1.k;
        let l = o1.l;
        let m = o1.m;
        let n = o1.n;
        let o = o1.o; // 'o' is already used as the object name, so renamed to 'o_'
        let p = o1.p;
        let q = o1.q;
        let r = o1.r;
        let s = o1.s;
        let t = o1.t;
        let u = o1.u;
        let v = o1.v;
        let w = o1.w;
        let x = o1.x;
        let y = o1.y;
        let z = o1.z;

        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }

    function f2() {
        let {
            a,
            b,
            c,
            d,
            e,
            f,
            g,
            h,
            i,
            j,
            k,
            l,
            m,
            n,
            o,
            p,
            q,
            r,
            s,
            t,
            u,
            v,
            w,
            x,
            y,
            z
        } = o1;

        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }

    function f3() {
        let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z] = o2;

        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }
</script>

​x
 
<script>
    const o1 = {
        'a': 1,
        'b': 2,
        'c': 3,
        'd': 4,
        'e': 5,
        'f': 6,
        'g': 7,
        'h': 8,
        'i': 9,
        'j': 10,
        'k': 11,
        'l': 12,
        'm': 13,
        'n': 14,
        'o': 15,
        'p': 16,
        'q': 17,
        'r': 18,
        's': 19,
        't': 20,
        'u': 21,
        'v': 22,
        'w': 23,
        'x': 24,
        'y': 25,
        'z': 26
    }
    const o2 = [...Object.values(o1)];
​
    function f1() {
        let a = o1.a;
        let b = o1.b;
        let c = o1.c;
        let d = o1.d;
        let e = o1.e;
        let f = o1.f;
        let g = o1.g;
        let h = o1.h;
        let i = o1.i;
        let j = o1.j;
        let k = o1.k;
        let l = o1.l;
        let m = o1.m;
        let n = o1.n;
        let o = o1.o; // 'o' is already used as the object name, so renamed to 'o_'
        let p = o1.p;
        let q = o1.q;
        let r = o1.r;
        let s = o1.s;
        let t = o1.t;
        let u = o1.u;
        let v = o1.v;
        let w = o1.w;
        let x = o1.x;
        let y = o1.y;
        let z = o1.z;
​
        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }
​
    function f2() {
        let {
            a,
            b,
            c,
            d,
            e,
            f,
            g,
            h,
            i,
            j,
            k,
            l,
            m,
            n,
            o,
            p,
            q,
            r,
            s,
            t,
            u,
            v,
            w,
            x,
            y,
            z
        } = o1;
​
        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }
​
    function f3() {
        let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z] = o2;
​
        return a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;
    }
</script>

Tests:

test1
f1();f1();f1();f1();f1();f1();f1();f1();f1();f1();
f1();f1();f1();f1();f1();f1();f1();f1();f1();f1();
test2
f2();f2();f2();f2();f2();f2();f2();f2();f2();f2();
f2();f2();f2();f2();f2();f2();f2();f2();f2();f2();
test3
f3();f3();f3();f3();f3();f3();f3();f3();f3();f3();
f3();f3();f3();f3();f3();f3();f3();f3();f3();f3();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
test1
test2
test3

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
test1	19797182.0 Ops/sec
test2	22131520.0 Ops/sec
test3	3534079.2 Ops/sec

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

This benchmark investigates the performance of JavaScript object destructuring through different patterns of extracting values from an object. Three different functions (f1, f2, and f3) are defined, each implementing a unique approach to destructuring and summing the values of properties from an object o1, which contains alphabetic keys mapped to numerical values.

1. Functions and their Approaches:

f1: This function uses traditional property access to retrieve values from the object o1. Each property is accessed individually, which can lead to more code and potentially slower performance due to repeated lookups.
f2: This function utilizes object destructuring, a feature in ES6 (ECMAScript 2015). Object destructuring allows unpacking values from objects directly into variables. This makes the syntax cleaner, reducing the amount of code and possibly improving performance by limiting lookups to just once per property in the destructuring assignment.
f3: This function first converts the object values into an array using Object.values(o1). It then utilizes array destructuring to sum the values. While this approach achieves the goal, it involves creating an array from the object’s values, which could have its own overhead.

2. Benchmark Comparison:

The benchmark tests these functions by executing each one ten times and measuring how many executions can be completed per second.

Results:
- test2 (f2): 22,131,520 executions per second
- test1 (f1): 19,797,182 executions per second
- test3 (f3): 3,534,079.25 executions per second

3. Pros and Cons:

f1: Traditional Property Access
- Pros:
  - Easy to understand for beginners.
  - Works consistently across all JavaScript versions.
- Cons:
  - Verbose and less efficient in terms of performance.
f2: Object Destructuring
- Pros:
  - Cleaner syntax reduces code length.
  - Potential performance gains due to less repeated object property access.
- Cons:
  - May be confusing to those unfamiliar with ES6 syntax.
f3: Array Destructuring
- Pros:
  - Clearly demonstrates destructuring from an array.
- Cons:
  - The overhead of converting the object to an array could lead to poorer performance compared to the other methods.
  - Additional memory allocation for the array.

4. Other Considerations:

Browser Variability: Results can vary between different browsers or even different versions of the same browser, as JavaScript engines optimize differently.
Code Maintenance: While f2 may give better performance, if the team is not familiar with ES6 syntax, it may lead to maintainability issues.

5. Alternatives:

Using a Loop: Instead of destructuring, a loop could iterate through the object keys to compute the sum, which may offer performance benefits in certain cases where the number of properties is dynamic.
Using Libraries: Libraries like Lodash (_.sum or _.map) could also achieve this with utility functions, but they add weight and may impact performance if used in lightweight scenarios.

Conclusion:

In conclusion, object destructuring (function f2) appears to be the most efficient approach in this benchmark, highlighting the advantages of modern JavaScript syntax for code readability and performance. However, developers should weigh the benefits of clean syntax against team familiarity and browser compatibility when opting for ES6 features.

LLMs can make mistakes. Check important info.

This benchmark investigates the performance of JavaScript object destructuring through different patterns of extracting values from an object. Three different functions (`f1`, `f2`, and `f3`) are defined, each implementing a unique approach to destructuring and summing the values of properties from an object `o1`, which contains alphabetic keys mapped to numerical values.

### 1. Functions and their Approaches:

- **f1**: This function uses traditional property access to retrieve values from the object `o1`. Each property is accessed individually, which can lead to more code and potentially slower performance due to repeated lookups.

- **f2**: This function utilizes **object destructuring**, a feature in ES6 (ECMAScript 2015). Object destructuring allows unpacking values from objects directly into variables. This makes the syntax cleaner, reducing the amount of code and possibly improving performance by limiting lookups to just once per property in the destructuring assignment.

- **f3**: This function first converts the object values into an array using `Object.values(o1)`. It then utilizes **array destructuring** to sum the values. While this approach achieves the goal, it involves creating an array from the object’s values, which could have its own overhead.

### 2. Benchmark Comparison:

The benchmark tests these functions by executing each one ten times and measuring how many executions can be completed per second.

- **Results**:
  - **test2 (f2)**: 22,131,520 executions per second
  - **test1 (f1)**: 19,797,182 executions per second
  - **test3 (f3)**: 3,534,079.25 executions per second

### 3. Pros and Cons:
- **f1: Traditional Property Access**
  - **Pros**:
    - Easy to understand for beginners.
    - Works consistently across all JavaScript versions.
  - **Cons**:
    - Verbose and less efficient in terms of performance.
  
- **f2: Object Destructuring**
  - **Pros**:
    - Cleaner syntax reduces code length.
    - Potential performance gains due to less repeated object property access.
  - **Cons**:
    - May be confusing to those unfamiliar with ES6 syntax.
  
- **f3: Array Destructuring**
  - **Pros**:
    - Clearly demonstrates destructuring from an array.
  - **Cons**:
    - The overhead of converting the object to an array could lead to poorer performance compared to the other methods.
    - Additional memory allocation for the array.

### 4. Other Considerations:
- **Browser Variability**: Results can vary between different browsers or even different versions of the same browser, as JavaScript engines optimize differently.
- **Code Maintenance**: While `f2` may give better performance, if the team is not familiar with ES6 syntax, it may lead to maintainability issues.

### 5. Alternatives:
- **Using a Loop**: Instead of destructuring, a loop could iterate through the object keys to compute the sum, which may offer performance benefits in certain cases where the number of properties is dynamic.
- **Using Libraries**: Libraries like Lodash (`_.sum` or `_.map`) could also achieve this with utility functions, but they add weight and may impact performance if used in lightweight scenarios.

### Conclusion:
In conclusion, **object destructuring** (function `f2`) appears to be the most efficient approach in this benchmark, highlighting the advantages of modern JavaScript syntax for code readability and performance. However, developers should weigh the benefits of clean syntax against team familiarity and browser compatibility when opting for ES6 features.

Related benchmarks:

object destructuring (version: 1)

Comparing performance of: test1 vs test2 vs test3

Created: one month ago by: Registered User

Jump to the latest result

test1

test2

test3