<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
var first = ['# of cohort exports','# of Merged Events & Properties','3-month Pricing Plan Experiment Group','[Community] User Email','[Community] User Name','[Community] User Primary Role','[Community] User Rank','[Lexicon]# of Events','[Lexicon]# of Merged Events & Properties','[Lexicon]# of User Properties','[Not3] Last Notification Analytics View','[Not3] Last Priority Update','$sales_region','$tech_segment','a','AAAAAAAAQuickBrownFox','accept_invite_path','Account ID','Account Owner','Account Owner Role','Address','AFEWFWAEFse','age','$android_app_version','$android_brand','$android_devices','asd','asdfasd','asdfasdfasf','$avatar','behavioral prop','Beta Groups','Beta: Help with innovation phase?','Beta: Sign up date','Project owner billing account ID','Birthday','Blog Subscribe Date','$bounce_category','$braze_device_id','$braze_external_id','$browser','Cancelled','$city','$collections','Company','company','Company size','Completed onboarding intro version','Contact Sales Request Date','Content Download Date','$country_code','$created','CSM','Dashboard Whitelisted Project Owner','Domain','$email','encoded_email','Events plan id','Events plan name','Events plan price','events_plan_term_length_in_months','$first_name','fkwjeabsdkaj','foo','foozz','$geo_source','Get Demo Form Submit Date','$group_id','Has "My Dashboard"','Houzz Cohort','In-app Targeting','inviter_email','inviter_name','$ios_device_model','$ios_devices','Is lead','is paid','is_invited_user','id','$last_login','$last_name','Last Purchase','$last_seen','Lifetime Revenue','LinkedIn Handle','$marked_spam','$campaigns','Mixpanel Employee','moinak_test?','Most Active User','$mp_inapp_campaigns','my_special_prop','Name','$name','nesting','new_prop','new_prop_1','new_prop_2','new_prop_3','Num paid events plans','number','one','$os','Opt-in Status','opt_cookies','opt_email','opt_tracking','Organization ID','Organization Name','Origin','Owner','Partner Request Date','People plan price','Phone','$phone','Platforms integrated','Platforms integrated updated','$predict_grade','$predict_grade - Cohorts viewed report','$predict_grade - funnel','$predict_grade - message sent','$predict_grade - New signup predictions','$predict_grade - steve-cohort-test','$predict_grade - To be Signed up users','project_id','Project Name','QBQ Email Mismatch','Random Number','recoverd','recovered','$region','SDKs integrated','Seedlist_PK','SFDC Company','SFDC Last Activity Date','SFDC Owner Email','SFDC Owner Name','SFDC Relationship with Mixpanel','SFDC Role (ClearBit)','SFDC Role Type','SFDC Seniority (ClearBit)','SFDC Title','shold_not_see_this','Sign up date','Tab Views: Entity-management','Tab Views: Experiment-reporting','Tab Views: Funnels','Tab Views: Impact','Tab Views: Journeys','Tab Views: Launch-analysis','Tab Views: Lexicon','Tab Views: Profile','Tab Views: Segmentation','Tab Views: Stickiness','Tab Views: Transformations','Tab Views: Views','Tab Views: Visual-journeys','Tab Views: Workspaces','$team','Team','test3','three','Top_articles','$ae_total_app_sessions','two','$unsubscribed','User name','$username','USER_ID','utm_campaign [last touch]','utm_content [last touch]','utm_medium [last touch]','utm_source [last touch]','utm_term [last touch]','Webinar Form Submit Date','Work Location'];
var second = ["$name", "$last_seen", "$country_code", "$region", "$city", "Account: ARR - Services", "Account: ARR - Total", "Account: CSM", "Account: current events tally", "Account: current MTU tally", "Account: current people tally", "Account: events/MTU plan ARR"];
const firstSet = new Set(first);
const secondSet = new Set(second);
new Set([firstSet].filter(item => secondSet.has(item)));
_.intersection(first, second)
first.filter((f) => second.includes(f))
second.filter((f) => first.includes(f))
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Javascript Set intersection | |
Lodash intersection | |
Array intersection 1 | |
Array intersection 2 |
Test name | Executions per second |
---|---|
Javascript Set intersection | 101867.2 Ops/sec |
Lodash intersection | 86503.9 Ops/sec |
Array intersection 1 | 76586.5 Ops/sec |
Array intersection 2 | 394567.9 Ops/sec |
Measuring performance differences in JavaScript is crucial for optimizing code efficiency, especially when dealing with large datasets or complex operations.
The provided benchmark definition measures the execution time of three approaches to find the intersection between two arrays: Set
intersection (using native JavaScript's Set
object), Lodash's intersection
function, and array intersection using .filter()
method. We'll dive into each approach and discuss their pros and cons:
const firstSet = new Set(first);
const secondSet = new Set(second);
new Set([...firstSet].filter(item => secondSet.has(item)));
Set
object operations._.intersection(first, second);
Set
operations due to the overhead of a library function call..filter()
first.filter((f) => second.includes(f));
Set
intersection due to the need to iterate over both arrays.Benchmark Results Analysis
The provided benchmark results show that:
Set
intersection is the fastest approach, leveraging the efficiency of built-in operations.intersection
function takes a middle ground in terms of execution time and memory usage..filter()
yields slower execution times but might be appealing for its simplicity.Best Approach
The best choice between these methods depends on your specific requirements, such as the need for speed, support across different browsers or environments, and performance characteristics. If you're aiming for the fastest solution, opting for native JavaScript's Set
intersection could be a good starting point.
In conclusion, understanding the pros and cons of each approach helps in selecting the most suitable method for your project's needs, whether that's native JavaScript, Lodash's library functions, or standard array operations.