Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Sherlock Benchmarks v6
(version: 2)
Comparing performance of:
Vanilla JS vs Lodash vs for each vs for loop vs new Set vs lodash v2
Created:
2 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
Script Preparation code:
var vectors = Array.from({ length: 500 }, () => ({ name: faker.name.firstName(), surname: faker.name.lastName(), age: faker.random.number({ min: 1, max: 100 }), country: faker.address.country() })); console.log(vectors.slice(0, 10)); // Just to verify by logging the first 10 objects
Tests:
Vanilla JS
const projects = Array.from(new Set( vectors .filter(p => p.country === "India" && p.country !== undefined) .map(p => String(p.country)) ));
Lodash
const uniqueVectors = _.uniqBy(vectors, 'country'); const definedCountries = _.filter(uniqueVectors, p => p.country === "India" && p.country !== undefined); const projects = _.map(definedCountries, p => String(p.country));
for each
const countrySet = new Set(); vectors.forEach(p => { if (p.country === "India" && p.country !== undefined) { countrySet.add(String(p.country)); } }); const projects = Array.from(countrySet);
for loop
const countrySet = new Set(); for (let i = 0; i < vectors.length; i++) { if (vectors[i].country === "India" && vectors[i].country !== undefined) { countrySet.add(String(vectors[i].country)); } } const projects = Array.from(countrySet);
new Set
const countrySet = new Set(); for (let vector of vectors) { if (vector.country === "India" && vector.country !== undefined) { countrySet.add(String(vector.country)); } } const projects = Array.from(countrySet);
lodash v2
const projects = _.chain(vectors) .uniqBy('country') .filter(p => p.country === "India" && p.country !== undefined) .map(p => String(p.country)) .value();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (6)
Previous results
Fork
Test case name
Result
Vanilla JS
Lodash
for each
for loop
new Set
lodash v2
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):
I'll break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to measure the performance of different approaches for filtering and processing an array of objects in JavaScript. The input data consists of 500 vectors, each with properties `name`, `surname`, `age`, and `country`. **Test Cases** There are six test cases, each representing a different approach: 1. **Vanilla JS**: This approach uses the native `Array.prototype.filter()` and `String()` methods to filter and process the arrays. 2. **Lodash**: This approach uses the Lodash library's `_.uniqBy()` function to unique-by-values (in this case, country) array elements. Then it filters and maps the results as in Vanilla JS. 3. **for each**: This approach uses a traditional `for` loop to iterate over the arrays and filter/processed elements. 4. **for loop**: Similar to the previous one, but uses an explicit `for` loop with a counter variable. 5. **new Set**: This approach uses the native `Set` data structure to store unique country values. The array is filtered and processed using `Array.prototype.filter()` and `String()`. 6. **Lodash v2**: Similar to Lodash, but uses version 2.x of the library's API. **Library Usage** * Lodash: Used in test cases 2 and 5. It provides a convenient way to perform tasks like unique-by-values filtering. * Faker: Used to generate random data for the input vectors (e.g., names, ages, countries). **Special JavaScript Features or Syntax** None mentioned in the provided benchmark. **Pros and Cons of Each Approach** Here's a brief overview: 1. **Vanilla JS**: Simple and efficient, but may be slower due to method calls. 2. **Lodash**: Convenient and concise, but adds overhead from the library. 3. **for each**: Traditional loop-based approach, which can be more control-oriented, but potentially slower than native methods. 4. **for loop**: Similar to `for each`, with added overhead of a counter variable. 5. **new Set**: Uses native data structure for efficient unique value storage, making it fast and memory-efficient. 6. **Lodash v2**: Similar to Lodash, with the added benefit of being version 2.x. **Performance Insights** The benchmark shows that: * The `new Set` approach is the fastest, likely due to its native implementation and efficient use of memory. * Vanilla JS and `for each` approaches are close in performance, potentially due to native method calls. * Lodash v2 is slower than Vanilla JS and `for each`, but still faster than Lodash v1 (not shown). * The `for loop` approach is the slowest, likely due to added overhead from the counter variable. Keep in mind that these results are specific to this benchmark and may not generalize to other use cases.
Related benchmarks:
native slice vs lodash slice
native slice vs lodash slice 1M
Unique lodash vs vanilla
lodash uniq vs native uniqoififie3f02i409rfi23k
_.uniqWith(arr, _.isEqual).length vs new Set(arr).size 1
Comments
Confirm delete:
Do you really want to delete benchmark?