Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object vs array performance 2
(version: 0)
Comparing performance of:
Object vs Array with constants vs Array with inline numbers (post-minification) vs Inline object vs inline array
Created:
4 years ago
by:
Guest
Jump to the latest result
Tests:
Object
const node_type_html = 1; const node = {}; node.type = node_type_html; node.tag = 'div'; node.children = []; node.attrs = {}; const nodeType = node.type; const nodeTag = node.tag; const nodeChildren = node.children; const nodeAttrs = node.attrs;
Array with constants
const node_index_type = 0; const node_index_tag = 1; const node_index_children = 2; const node_index_attrs = 3; const node_type_html = 1; const node = []; node[ node_index_type ] = node_type_html; node[ node_index_tag ] = 'div'; node[ node_index_children ] = []; node[ node_index_attrs ] = {}; const nodeType = node[ node_index_type ]; const nodeTag = node[ node_index_tag ]; const nodeChildren = node[ node_index_children ]; const nodeAttrs = node[ node_index_attrs ];
Array with inline numbers (post-minification)
const node_type_html = 1; const node = []; node[ 0 ] = node_type_html; node[ 1 ] = 'div'; node[ 2 ] = []; node[ 3 ] = {}; const nodeType = node[ 0 ]; const nodeTag = node[ 1 ]; const nodeChildren = node[ 2 ]; const nodeAttrs = node[ 3 ];
Inline object
const node_type_html = 1; const node = { type: node_type_html, tag: 'div', children: [], attrs: {} }; const nodeType = node.type; const nodeTag = node.tag; const nodeChildren = node.children; const nodeAttrs = node.attrs;
inline array
const node_type_html = 1; const node = [ node_type_html, 'div', [], {} ]; const nodeType = node[ 0 ]; const nodeTag = node[ 1 ]; const nodeChildren = node[ 2 ]; const nodeAttrs = node[ 3 ];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Object
Array with constants
Array with inline numbers (post-minification)
Inline object
inline array
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **What is being tested?** The benchmark tests the performance of three different ways to access properties in JavaScript objects: 1. Using an object with dot notation (e.g., `node.type`). 2. Using an array index with a constant value (e.g., `node[0]`). 3. Using an array index with inline numbers and post-minification (i.e., the numbers are evaluated after the code is executed, e.g., `node[1] = 'div'; node[2] = [];`). **Options being compared** The benchmark compares the performance of these three approaches: * Dot notation (`node.type`, `node.tag`, etc.) * Array indexing with constants (`node[0]`, `node[1]`, etc.) * Array indexing with inline numbers and post-minification (`node[1] = 'div'; node[2] = [];`) **Pros and Cons of each approach** Here's a brief summary: * Dot notation: + Pros: concise, readable, and easy to maintain. + Cons: may be slower than array indexing due to the overhead of parsing and resolving the dot notation. * Array indexing with constants: + Pros: can be faster than dot notation since it involves direct memory access. + Cons: requires explicit knowledge of the property names and their corresponding indices, which can make the code harder to read and maintain. * Array indexing with inline numbers and post-minification: + Pros: can be fast since it avoids the overhead of parsing and resolving dot notation, but also introduces potential performance issues due to the evaluation order. + Cons: can lead to unexpected behavior if the inline numbers are not evaluated in the correct order. **Other considerations** * The benchmark does not consider other factors that might affect performance, such as the size of the object or array, the number of iterations, or the specific use case. * Post-minification, used in approach 3, can lead to different execution orders than expected, which may impact performance and readability. **Alternatives** Other approaches to accessing properties in JavaScript objects include: * Bracing notation (`{type: node_type_html}`) * Destructuring assignment (`const { type } = node;`) * Using the `in` operator (`'type' in node === node_type_html`) * Using a property access function (e.g., `node accessesProperty('type')`) These alternatives may offer performance benefits or improved readability, but they are not part of this specific benchmark. In summary, the benchmark tests the performance of three different ways to access properties in JavaScript objects: dot notation, array indexing with constants, and array indexing with inline numbers and post-minification. Each approach has its pros and cons, and understanding these differences is essential for optimizing performance and writing maintainable code.
Related benchmarks:
Object.fromEntries vs create temp object
Object.fromEntries vs create temp object vs Array.reduce
iterating from a filled object VS iterating from a map
Array.forEach vs Object.keys().forEach
new Map vs set array to map
Comments
Confirm delete:
Do you really want to delete benchmark?