{"id":2626,"date":"2025-10-25T16:22:36","date_gmt":"2025-10-25T16:22:36","guid":{"rendered":"https:\/\/brandnexusstudios.co.za\/blog\/?p=2626"},"modified":"2025-10-25T16:22:39","modified_gmt":"2025-10-25T16:22:39","slug":"vanilla-javascript-es6-array-methods","status":"publish","type":"post","link":"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/","title":{"rendered":"vanilla JavaScript ES6 array methods guide: 10 quick wins"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#vanilla_JavaScript_ES6_array_methods_guide_10_quick_wins\" >vanilla JavaScript ES6 array methods guide: 10 quick wins<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Your_vanilla_JavaScript_ES6_array_methods_guide_at_a_glance\" >Your vanilla JavaScript ES6 array methods guide at a glance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Quick_wins_you_can_use_right_now\" >Quick wins you can use right now<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#1_Transform_safely_with_map\" >1. Transform safely with map<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#2_Filter_noise_with_filter\" >2. Filter noise with filter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#3_Find_the_first_match_with_find\" >3. Find the first match with find<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#4_Validate_fast_with_some\" >4. Validate fast with some<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#5_Confirm_all_pass_with_every\" >5. Confirm all pass with every<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#6_Existence_checks_with_includes\" >6. Existence checks with includes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#7_Flatten_one_level_with_flat\" >7. Flatten one level with flat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#8_Transform_then_flatten_with_flatMap\" >8. Transform then flatten with flatMap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#9_Summarize_with_reduce\" >9. Summarize with reduce<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#10_Create_arrays_with_intent\" >10. Create arrays with intent<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Transforming_data_with_map_and_flatMap\" >Transforming data with map and flatMap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Filtering_and_validating_with_filter_some_and_every\" >Filtering and validating with filter, some, and every<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Finding_values_with_find_findIndex_and_includes\" >Finding values with find, findIndex, and includes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Aggregations_with_reduce\" >Aggregations with reduce<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Sorting_reversing_and_stable_order\" >Sorting, reversing, and stable order<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Flattening_with_flat_and_flatMap\" >Flattening with flat and flatMap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Creating_arrays_with_Arrayfrom_and_Arrayof\" >Creating arrays with Array.from and Array.of<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Reusing_slices_with_slice_splice_fill_and_copyWithin\" >Reusing slices with slice, splice, fill, and copyWithin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Iteration_helpers_keys_values_and_entries\" >Iteration helpers: keys, values, and entries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Performance_basics_you_should_not_ignore\" >Performance basics you should not ignore<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Immutability_and_side_effects\" >Immutability and side effects<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Error_handling_and_defensive_patterns\" >Error handling and defensive patterns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Async_workflows_with_arrays_and_Promiseall\" >Async workflows with arrays and Promise.all<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Real_world_recipes_that_ship\" >Real world recipes that ship<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Deduplicate_by_key\" >Deduplicate by key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Group_and_sort_within_groups\" >Group and sort within groups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Index_by_id_for_O1_lookups\" >Index by id for O(1) lookups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Pipeline_composition_with_array_methods\" >Pipeline composition with array methods<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Debugging_and_readability_tips\" >Debugging and readability tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#When_to_use_plain_loops\" >When to use plain loops<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Data_fetching_caching_and_page_speed\" >Data fetching, caching, and page speed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Team_conventions_and_code_reviews\" >Team conventions and code reviews<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Testing_arrays_with_confidence\" >Testing arrays with confidence<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Accessibility_and_data_shaping\" >Accessibility and data shaping<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Memory_big_lists_and_virtual_scrolling\" >Memory, big lists, and virtual scrolling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Version_quirks_and_compatibility_notes\" >Version quirks and compatibility notes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Putting_it_all_together\" >Putting it all together<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#FAQs\" >FAQs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#What_is_the_difference_between_map_and_forEach\" >What is the difference between map and forEach?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Is_includes_faster_than_indexOf\" >Is includes faster than indexOf?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#When_should_I_use_reduce\" >When should I use reduce?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#What_is_the_difference_between_flat_and_flatMap\" >What is the difference between flat and flatMap?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Does_sort_mutate_the_original_array\" >Does sort mutate the original array?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#How_do_I_handle_async_operations_with_array_methods\" >How do I handle async operations with array methods?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#Should_I_prefer_some_or_every_for_validations\" >Should I prefer some or every for validations?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods\/#References\" >References<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n  <meta charset=\"UTF-8\" \/><br \/>\n  <title>vanilla JavaScript ES6 array methods guide: 10 quick wins<\/title><br \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><br \/>\n  <meta name=\"description\" content=\"vanilla JavaScript ES6 array methods guide that delivers 10 quick wins, real examples, and pro tips to write cleaner, faster code. Start mastering arrays.\" \/>\n  <link rel=\"canonical\" href=\"https:\/\/www.brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods-guide\" \/>\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\":\"https:\/\/schema.org\",\n    \"@type\":\"BlogPosting\",\n    \"headline\":\"vanilla JavaScript ES6 array methods guide: 10 quick wins\",\n    \"description\":\"vanilla JavaScript ES6 array methods guide that delivers 10 quick wins, real examples, and pro tips to write cleaner, faster code. Start mastering arrays.\",\n    \"author\":{\n      \"@type\":\"Person\",\n      \"name\":\"Morne de Heer\"\n    },\n    \"publisher\":{\n      \"@type\":\"Organization\",\n      \"name\":\"Brand Nexus Studios\",\n      \"url\":\"https:\/\/www.brandnexusstudios.co.za\",\n      \"logo\":{\n        \"@type\":\"ImageObject\",\n        \"url\":\"https:\/\/ml7ewxmv24ng.i.optimole.com\/cb:5G8L.116b\/w:auto\/h:auto\/q:mauto\/ig:avif\/https:\/\/www.brandnexusstudios.co.za\/images\/logo.png\"\n      }\n    },\n    \"mainEntityOfPage\":{\n      \"@type\":\"WebPage\",\n      \"@id\":\"https:\/\/www.brandnexusstudios.co.za\/blog\/vanilla-javascript-es6-array-methods-guide\"\n    },\n    \"datePublished\":\"2025-10-25\",\n    \"dateModified\":\"2025-10-25\",\n    \"keywords\":[\n      \"vanilla JavaScript ES6 array methods guide\",\n      \"ES6 array methods\",\n      \"JavaScript array methods\",\n      \"map filter reduce\",\n      \"Array.from\",\n      \"Array.of\",\n      \"find\",\n      \"findIndex\",\n      \"includes\",\n      \"flat\",\n      \"flatMap\",\n      \"performance\",\n      \"immutability\",\n      \"Promise.all\"\n    ],\n    \"articleSection\":\"JavaScript\"\n  }\n  <\/script><br \/>\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\":\"https:\/\/schema.org\",\n    \"@type\":\"HowTo\",\n    \"name\":\"How to choose the right ES6 array method\",\n    \"description\":\"A practical decision path to pick the right array method for a task in vanilla JavaScript ES6.\",\n    \"totalTime\":\"PT5M\",\n    \"estimatedCost\":{\"@type\":\"MonetaryAmount\",\"currency\":\"USD\",\"value\":\"0\"},\n    \"step\":[\n      {\"@type\":\"HowToStep\",\"name\":\"Identify your goal\",\"text\":\"Do you need to transform, filter, find, test, flatten, or aggregate values?\"},\n      {\"@type\":\"HowToStep\",\"name\":\"Transform or re-shape data\",\"text\":\"Use map for 1-to-1 transforms, flatMap for transforms that may expand or remove items.\"},\n      {\"@type\":\"HowToStep\",\"name\":\"Filter or test items\",\"text\":\"Use filter to keep items, some to check if any match, every to verify all match.\"},\n      {\"@type\":\"HowToStep\",\"name\":\"Find a single item\",\"text\":\"Use find for the first match, findIndex for the index, includes for simple equality checks.\"},\n      {\"@type\":\"HowToStep\",\"name\":\"Aggregate or summarize\",\"text\":\"Use reduce to fold many values into one, like totals, groups, or maps.\"}\n    ],\n    \"supply\":[{\"@type\":\"HowToSupply\",\"name\":\"Code editor\"}],\n    \"tool\":[{\"@type\":\"HowToTool\",\"name\":\"Web browser console\"}]\n  }\n  <\/script><br \/>\n  <script type=\"application\/ld+json\">\n  {\n    \"@context\":\"https:\/\/schema.org\",\n    \"@type\":\"FAQPage\",\n    \"mainEntity\":[\n      {\n        \"@type\":\"Question\",\n        \"name\":\"What is the difference between map and forEach?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"map returns a new array with transformed values, while forEach executes a function for side effects and returns undefined. Choose map when you need a derived array, and forEach when you are mutating external state.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Is includes faster than indexOf?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"includes is clearer for existence checks and handles NaN correctly. Performance is similar in most cases, so prefer includes for readability unless benchmarks prove otherwise.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"When should I use reduce?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Use reduce when you need to accumulate or summarize values, like totals, grouping, or building lookup maps. Use small reducers and pure functions for clarity.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"What is the difference between flat and flatMap?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"flat flattens nested arrays by a specified depth. flatMap runs a mapping function and then flattens one level. Use flatMap for transform-then-flatten in one pass.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Does sort mutate the original array?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Yes. sort mutates the array in place. Copy first if you need an immutable approach, for example: const sorted = [...arr].sort(...).\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"How do I handle async operations with array methods?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Use map to produce promises, then await Promise.all to run them in parallel. For controlled concurrency, segment your work or use a queue.\"\n        }\n      },\n      {\n        \"@type\":\"Question\",\n        \"name\":\"Should I prefer some or every for validations?\",\n        \"acceptedAnswer\":{\n          \"@type\":\"Answer\",\n          \"text\":\"Use some to check if any item meets the condition and every to ensure all items meet it. Both short-circuit and are efficient for validation logic.\"\n        }\n      }\n    ]\n  }\n  <\/script><br \/>\n<\/head><br \/>\n<body><\/p>\n<article>\n<header>\n<h1><span class=\"ez-toc-section\" id=\"vanilla_JavaScript_ES6_array_methods_guide_10_quick_wins\"><\/span>vanilla JavaScript ES6 array methods guide: 10 quick wins<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>By Morne de Heer, Published by <a href=\"https:\/\/www.brandnexusstudios.co.za\" target=\"_blank\" rel=\"noopener\">Brand Nexus Studios<\/a><\/p>\n<figure style=\"margin:0 0 1rem 0;\">\n        <img data-opt-id=199334745  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png\" alt=\"Developer reading a vanilla JavaScript ES6 array methods guide on a laptop with code snippets on screen\" title=\"vanilla JavaScript ES6 array methods guide feature\" style=\"max-width:100%;height:auto;\" \/><figcaption>Your practical companion to ES6 array methods, with compressed imagery for page speed.<\/figcaption><\/figure>\n<\/header>\n<section>\n<p>Here is your no-nonsense vanilla JavaScript ES6 array methods guide, built for speed, clarity, and real work. In a few minutes, you will lock in patterns that make code easier to read, easier to test, and much faster to ship.<\/p>\n<p>We open with quick wins, then dive deeper into map, filter, reduce, find, includes, some, every, flat, flatMap, sort, and more. This vanilla JavaScript ES6 array methods guide uses small examples and repeatable recipes you can paste into production today.<\/p>\n<p>If you care about maintainability, immutability, and performance, this vanilla JavaScript ES6 array methods guide will help you write code that is future friendly and easy for teammates to follow.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Your_vanilla_JavaScript_ES6_array_methods_guide_at_a_glance\"><\/span>Your vanilla JavaScript ES6 array methods guide at a glance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Start with purpose. Do you want to transform, filter, find, validate, flatten, or aggregate? This vanilla JavaScript ES6 array methods guide maps each goal to the best method with minimal ceremony.<\/p>\n<ul>\n<li>Transform values 1-to-1: map<\/li>\n<li>Filter values: filter<\/li>\n<li>Find one value: find or findIndex<\/li>\n<li>Existence checks: includes<\/li>\n<li>Validate arrays: some and every<\/li>\n<li>Aggregate many into one: reduce<\/li>\n<li>Flatten or transform then flatten: flat, flatMap<\/li>\n<li>Create arrays cleanly: Array.from, Array.of<\/li>\n<li>Reorder data: sort, reverse<\/li>\n<li>Fill or copy sections: fill, copyWithin<\/li>\n<\/ul>\n<p>Throughout this vanilla JavaScript ES6 array methods guide, you will see idioms that keep your code concise and intention revealing.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Quick_wins_you_can_use_right_now\"><\/span>Quick wins you can use right now<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hit the ground running with ten copy ready patterns. Each is small, focused, and battle tested. This vanilla JavaScript ES6 array methods guide puts speed first.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Transform_safely_with_map\"><\/span>1. Transform safely with map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const prices = [5, 9, 15];\nconst withTax = prices.map(p =&gt; p * 1.15);\n\/\/ [5.75, 10.35, 17.25]<\/code><\/pre>\n<p>map is pure and predictable. In this vanilla JavaScript ES6 array methods guide, we use map whenever we want a new array that mirrors the old one item by item.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Filter_noise_with_filter\"><\/span>2. Filter noise with filter<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const users = [{id:1, active:true}, {id:2, active:false}];\nconst active = users.filter(u =&gt; u.active);\n\/\/ [{id:1, active:true}]<\/code><\/pre>\n<p>filter removes what you do not need, cleanly. This vanilla JavaScript ES6 array methods guide leans on filter to express intention in one line.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Find_the_first_match_with_find\"><\/span>3. Find the first match with find<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const post = [{id:1}, {id:2}].find(p =&gt; p.id === 2);\n\/\/ {id:2}<\/code><\/pre>\n<p>find returns one value or undefined. It reads like English, which is a recurring theme in this vanilla JavaScript ES6 array methods guide.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Validate_fast_with_some\"><\/span>4. Validate fast with some<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const ok = [2, 4, 7].some(n =&gt; n % 2 !== 0);\n\/\/ true<\/code><\/pre>\n<p>some short circuits on the first match. In this vanilla JavaScript ES6 array methods guide, you will see it used for permissions, form validation, and feature flags.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Confirm_all_pass_with_every\"><\/span>5. Confirm all pass with every<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const allEven = [2, 4, 8].every(n =&gt; n % 2 === 0);\n\/\/ true<\/code><\/pre>\n<p>every does the opposite of some. You will use both often after reading this vanilla JavaScript ES6 array methods guide.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Existence_checks_with_includes\"><\/span>6. Existence checks with includes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>['pending', 'done'].includes('done'); \/\/ true\n[NaN].includes(NaN); \/\/ true<\/code><\/pre>\n<p>includes is clearer than indexOf for presence checks, a staple in this vanilla JavaScript ES6 array methods guide.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Flatten_one_level_with_flat\"><\/span>7. Flatten one level with flat<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const nested = [1, [2, 3], 4];\nconst flatOnce = nested.flat(); \/\/ [1, 2, 3, 4]<\/code><\/pre>\n<p>flat turns nested lists into a clean surface. You will see more flattening recipes later in this vanilla JavaScript ES6 array methods guide.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Transform_then_flatten_with_flatMap\"><\/span>8. Transform then flatten with flatMap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const words = ['hi', 'sun'];\nconst chars = words.flatMap(w =&gt; w.split(''));\n\/\/ ['h','i','s','u','n']<\/code><\/pre>\n<p>flatMap is map followed by flat of depth 1. This vanilla JavaScript ES6 array methods guide uses it for expansions and conditional removals.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Summarize_with_reduce\"><\/span>9. Summarize with reduce<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const total = [5, 10, 15].reduce((sum, n) =&gt; sum + n, 0);\n\/\/ 30<\/code><\/pre>\n<p>reduce folds many values into one. This vanilla JavaScript ES6 array methods guide shows patterns for grouping, counting, and indexing.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_Create_arrays_with_intent\"><\/span>10. Create arrays with intent<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>Array.of(3) \/\/ [3]\nArray.from('abc') \/\/ ['a','b','c']\nArray.from({length:3}, (_, i) =&gt; i) \/\/ [0,1,2]<\/code><\/pre>\n<p>Array.of and Array.from remove ambiguity. This vanilla JavaScript ES6 array methods guide uses them to avoid gotchas with new Array.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Transforming_data_with_map_and_flatMap\"><\/span>Transforming data with map and flatMap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>map is your go to for 1-to-1 transformations. Use it to compute taxes, normalize shapes, or strip fields. This vanilla JavaScript ES6 array methods guide keeps transformations pure and small.<\/p>\n<pre><code>const rows = [\n  { id: 1, name: 'Ana', roles: ['admin', 'editor'] },\n  { id: 2, name: 'Ben', roles: ['viewer'] }\n];\n\nconst names = rows.map(r =&gt; r.name);\nconst roleCounts = rows.map(r =&gt; ({ id: r.id, roleCount: r.roles.length }));<\/code><\/pre>\n<p>flatMap shines when the transform may expand or collapse output. This vanilla JavaScript ES6 array methods guide uses flatMap to avoid nested arrays and post-processing.<\/p>\n<pre><code>\/\/ Expand roles into a flat list of user-role pairs\nconst userRoles = rows.flatMap(r =&gt; r.roles.map(role =&gt; ({ id: r.id, role })));<\/code><\/pre>\n<p>Here, flatMap avoids calling map and then flat. That saves a pass and reads cleaner, two priorities in this vanilla JavaScript ES6 array methods guide.<\/p>\n<figure>\n        <img data-opt-id=1577267096  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:83679eaaa7695ff7bce7e5f89f4965ee\/directUpload\/Map-Filter-Reduce-diagram.png\" alt=\"Diagram showing how map, filter, and reduce transform arrays step by step\" title=\"Map, Filter, Reduce diagram\" style=\"max-width:100%;height:auto;\" \/><figcaption>Map, filter, and reduce form a simple yet powerful data pipeline. Images are compressed for faster page loads.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Filtering_and_validating_with_filter_some_and_every\"><\/span>Filtering and validating with filter, some, and every<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>filter narrows results down. some and every validate conditions. Together they model most business rules. This vanilla JavaScript ES6 array methods guide shows the trio in action.<\/p>\n<pre><code>\/\/ Filter items in stock\nconst products = [\n  { sku: 'A', stock: 5 },\n  { sku: 'B', stock: 0 }\n];\nconst inStock = products.filter(p =&gt; p.stock &gt; 0);\n\n\/\/ Validate at least one discounted item\nconst hasDiscount = products.some(p =&gt; p.stock &gt; 0 &amp;&amp; p.sku === 'A');\n\n\/\/ Validate every product has a sku\nconst valid = products.every(p =&gt; Boolean(p.sku));<\/code><\/pre>\n<p>When performance matters, remember that some and every short circuit. The first true or false decides the outcome. This vanilla JavaScript ES6 array methods guide taps into that for fast validations.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Finding_values_with_find_findIndex_and_includes\"><\/span>Finding values with find, findIndex, and includes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This vanilla JavaScript ES6 array methods guide prefers find over manual loops. It says what you mean and returns what you need.<\/p>\n<pre><code>const user = [{id:1},{id:2}].find(u =&gt; u.id === 2); \/\/ {id:2}\nconst idx = [{id:1},{id:2}].findIndex(u =&gt; u.id === 2); \/\/ 1\n['todo','done'].includes('done'); \/\/ true<\/code><\/pre>\n<p>includes handles NaN and reads well for status checks or feature lists. As you practice, this vanilla JavaScript ES6 array methods guide will help you favor clarity.<\/p>\n<figure>\n        <img data-opt-id=2096332080  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:ba8dd38ee64468aac09ec94106ca7c52\/directUpload\/Find-vs-Includes-vs-Some-vs-Every.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Flowchart choosing between find, includes, some, and every for validation\" title=\"Find vs Includes vs Some vs Every\" style=\"max-width:100%;height:auto;\" \/><figcaption>Pick the simplest method that matches the question you are asking.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Aggregations_with_reduce\"><\/span>Aggregations with reduce<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>reduce can be intimidating until you keep reducers tiny. This vanilla JavaScript ES6 array methods guide leans on named helper functions to make reducers readable.<\/p>\n<pre><code>const sum = (a, b) =&gt; a + b;\nconst total = [1,2,3,4].reduce(sum, 0); \/\/ 10\n\n\/\/ Group by key\nconst byCategory = items =&gt; items.reduce((acc, item) =&gt; {\n  const key = item.category ?? 'uncategorized';\n  (acc[key] ||= []).push(item);\n  return acc;\n}, {});<\/code><\/pre>\n<p>For advanced reducers, compose. This vanilla JavaScript ES6 array methods guide shows how to build indices and frequency maps without losing clarity.<\/p>\n<pre><code>\/\/ Frequency map\nconst frequencies = words =&gt; words.reduce((acc, w) =&gt; {\n  acc[w] = (acc[w] || 0) + 1;\n  return acc;\n}, {});<\/code><\/pre>\n<p>Think of reduce as the Swiss army knife that ends with a single result. Use it to power reports, charts, and summaries as described in this vanilla JavaScript ES6 array methods guide.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Sorting_reversing_and_stable_order\"><\/span>Sorting, reversing, and stable order<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>sort and reverse mutate the array. Copy first if you need immutability. This vanilla JavaScript ES6 array methods guide includes safe patterns.<\/p>\n<pre><code>const byPriceAsc = [...products].sort((a, b) =&gt; a.price - b.price);\nconst newestFirst = [...posts].sort((a, b) =&gt; b.date.localeCompare(a.date));\nconst reversed = [...arr].reverse();<\/code><\/pre>\n<p>When comparing strings, localeCompare gives predictable results across locales. This vanilla JavaScript ES6 array methods guide favors stable, explicit comparators.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Flattening_with_flat_and_flatMap\"><\/span>Flattening with flat and flatMap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nesting creeps in fast. flatten it. This vanilla JavaScript ES6 array methods guide uses flat to control depth and flatMap to combine transform plus flatten.<\/p>\n<pre><code>const deep = [1,[2,[3,[4]]]];\ndeep.flat(2); \/\/ [1, 2, 3, [4]]\n\/\/ Remove nullables then flatten in one pass\nconst cleaned = items.flatMap(x =&gt; x == null ? [] : [x]);<\/code><\/pre>\n<p>flatMap is perfect for optional expansions. This vanilla JavaScript ES6 array methods guide applies it to search indices, tag expansions, and composite keys.<\/p>\n<figure>\n        <img data-opt-id=1505883132  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:370203d121046839486dfbd103b76ed7\/directUpload\/Flattening-arrays-with-flat-and-flatMap.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Nested arrays being flattened with flat and transformed with flatMap in code\" title=\"Flattening arrays with flat and flatMap\" style=\"max-width:100%;height:auto;\" \/><figcaption>Flatten one level or transform then flatten to keep data pipelines tidy.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Creating_arrays_with_Arrayfrom_and_Arrayof\"><\/span>Creating arrays with Array.from and Array.of<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ES6 gave us Array.from and Array.of to remove new Array weirdness. This vanilla JavaScript ES6 array methods guide shows how to generate ranges and normalize iterables.<\/p>\n<pre><code>\/\/ Range generator\nconst range = (n, start = 0) =&gt; Array.from({length:n}, (_, i) =&gt; start + i);\nrange(5); \/\/ [0,1,2,3,4]\n\n\/\/ From NodeList to Array\nconst buttons = Array.from(document.querySelectorAll('button'));<\/code><\/pre>\n<p>Array.of always creates an array from the exact arguments, so Array.of(3) is [3], not a sparse array. This vanilla JavaScript ES6 array methods guide keeps code intention explicit.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Reusing_slices_with_slice_splice_fill_and_copyWithin\"><\/span>Reusing slices with slice, splice, fill, and copyWithin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>slice is non mutating. splice mutates. fill and copyWithin help when you need structured duplication. This vanilla JavaScript ES6 array methods guide keeps these powers in a safe box.<\/p>\n<pre><code>const clone = arr.slice(); \/\/ non mutating copy\nconst middle = arr.slice(2, 5); \/\/ [2..4]\n\n\/\/ Fill range\nconst zeros = new Array(5).fill(0); \/\/ [0,0,0,0,0]\n\n\/\/ Copy a section within the array\n[1,2,3,4,5].copyWithin(0, 3); \/\/ [4,5,3,4,5]<\/code><\/pre>\n<p>Use copyWithin sparingly. This vanilla JavaScript ES6 array methods guide recommends clear transforms over clever tricks.<\/p>\n<figure>\n        <img data-opt-id=141197720  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:57a0e22f6f0a9b11f16bd889936d384e\/directUpload\/fill-and-copyWithin-cheatsheet.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Minimalist cheatsheet for fill and copyWithin array methods\" title=\"fill and copyWithin cheatsheet\" style=\"max-width:100%;height:auto;\" \/><figcaption>Keep this minimal reference handy for in place operations.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Iteration_helpers_keys_values_and_entries\"><\/span>Iteration helpers: keys, values, and entries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Need indexes or pairs without manual loops? keys, values, and entries expose iterators that pair nicely with for&#8230;of. This vanilla JavaScript ES6 array methods guide demonstrates the trio.<\/p>\n<pre><code>for (const [i, val] of ['a','b'].entries()) {\n  console.log(i, val);\n}\n\/\/ 0 'a', 1 'b'<\/code><\/pre>\n<p>entries keeps indexing robust and readable. You will use it often after this vanilla JavaScript ES6 array methods guide sinks in.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Performance_basics_you_should_not_ignore\"><\/span>Performance basics you should not ignore<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Performance is often about doing less. This vanilla JavaScript ES6 array methods guide favors single pass pipelines and short circuit logic.<\/p>\n<ul>\n<li>Prefer a single pass with reduce when you need multiple aggregates.<\/li>\n<li>Short circuit with some and every for early outs.<\/li>\n<li>Avoid extra array copies inside hot loops.<\/li>\n<li>Measure with the browser Performance tools before tuning.<\/li>\n<\/ul>\n<p>If you are building a fast front end that converts, expert <a href=\"https:\/\/www.brandnexusstudios.co.za\/website-design-development\/\" target=\"_blank\" rel=\"noopener\">website design and development<\/a> helps. This vanilla JavaScript ES6 array methods guide aligns with a performance first mindset that scales.<\/p>\n<figure>\n        <img data-opt-id=352617149  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:b67e6e07affd1cbf15845272cbce6872\/directUpload\/Performance-optimizations-with-array-methods.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Performance tips overlayed on code showing optimized array method usage\" title=\"Performance optimizations with array methods\" style=\"max-width:100%;height:auto;\" \/><figcaption>Small optimizations add up. Compress images and leverage caching to keep pages fast.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Immutability_and_side_effects\"><\/span>Immutability and side effects<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pure functions reduce bugs. This vanilla JavaScript ES6 array methods guide prefers map, filter, and reduce to express intent without mutation.<\/p>\n<pre><code>\/\/ Immutable update example\nconst setActive = (users, id) =&gt;\n  users.map(u =&gt; u.id === id ? { ...u, active: true } : u);<\/code><\/pre>\n<p>Mutating methods like sort, reverse, and splice are fine when scoped and explicit. This vanilla JavaScript ES6 array methods guide shows you how to copy before you change.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Error_handling_and_defensive_patterns\"><\/span>Error handling and defensive patterns<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Arrays can hide edge cases. This vanilla JavaScript ES6 array methods guide uses guards to keep pipelines stable.<\/p>\n<pre><code>\/\/ Guard against nullish lists\nconst toNames = list =&gt; (list ?? []).map(x =&gt; x.name ?? 'Unknown');\n\n\/\/ Narrow item shape\nconst pick = (obj, keys) =&gt; keys.reduce((o, k) =&gt; (o[k] = obj[k], o), {});<\/code><\/pre>\n<p>By normalizing input and using defaults, your pipeline seldom breaks. This vanilla JavaScript ES6 array methods guide is pragmatic about real data.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Async_workflows_with_arrays_and_Promiseall\"><\/span>Async workflows with arrays and Promise.all<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Run network tasks in parallel by mapping to promises and awaiting Promise.all. This vanilla JavaScript ES6 array methods guide keeps the flow compact and readable.<\/p>\n<pre><code>const urls = ['1.json','2.json','3.json'];\nconst fetchJson = url =&gt; fetch(url).then(r =&gt; r.json());\n\nconst results = await Promise.all(urls.map(fetchJson));<\/code><\/pre>\n<p>When APIs must be rate limited, chunk work. This vanilla JavaScript ES6 array methods guide gives you a simple batching helper.<\/p>\n<pre><code>const chunk = (arr, size) =&gt; Array.from({length: Math.ceil(arr.length \/ size)},\n  (_, i) =&gt; arr.slice(i*size, i*size + size)\n);\n\nfor (const group of chunk(urls, 2)) {\n  const batch = await Promise.all(group.map(fetchJson));\n  \/\/ process batch\n}<\/code><\/pre>\n<p>Parallel where safe, serial where necessary. That balance anchors this vanilla JavaScript ES6 array methods guide.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Real_world_recipes_that_ship\"><\/span>Real world recipes that ship<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>These small, composable snippets are taken from production. This vanilla JavaScript ES6 array methods guide focuses on everyday wins.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Deduplicate_by_key\"><\/span>Deduplicate by key<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const uniqueBy = (arr, key) =&gt; {\n  const seen = new Set();\n  return arr.filter(x =&gt; (v =&gt; !seen.has(v) &amp;&amp; (seen.add(v), true))(x[key]));\n};<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Group_and_sort_within_groups\"><\/span>Group and sort within groups<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const groupBy = (arr, fn) =&gt; arr.reduce((acc, x) =&gt; {\n  const k = fn(x);\n  (acc[k] ||= []).push(x);\n  return acc;\n}, {});\n\nconst grouped = groupBy(posts, p =&gt; p.category);\nconst sortedGroups = Object.fromEntries(\n  Object.entries(grouped).map(([k, v]) =&gt; [k, [...v].sort((a,b) =&gt; b.date.localeCompare(a.date))])\n);<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Index_by_id_for_O1_lookups\"><\/span>Index by id for O(1) lookups<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const indexBy = (arr, key) =&gt; arr.reduce((acc, x) =&gt; (acc[x[key]] = x, acc), {});\nconst byId = indexBy(users, 'id'); \/\/ byId[42] =&gt; user<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Pipeline_composition_with_array_methods\"><\/span>Pipeline composition with array methods<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>const pipe = (...fns) =&gt; x =&gt; fns.reduce((v, f) =&gt; f(v), x);\nconst compact = xs =&gt; xs.filter(Boolean);\nconst toUpper = xs =&gt; xs.map(s =&gt; s.toUpperCase());\n\nconst cleanAndShout = pipe(compact, toUpper);\ncleanAndShout(['hi', '', null, 'js']); \/\/ ['HI','JS']<\/code><\/pre>\n<p>Reusable pipelines keep logic consistent. This vanilla JavaScript ES6 array methods guide normalizes this practice across teams.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Debugging_and_readability_tips\"><\/span>Debugging and readability tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Readable pipelines make bugs obvious. This vanilla JavaScript ES6 array methods guide keeps names specific and steps short.<\/p>\n<ul>\n<li>Name your mapping and filtering functions if they are more than one expression.<\/li>\n<li>Inline early returns instead of nested conditionals.<\/li>\n<li>Log shape and length at pipeline boundaries.<\/li>\n<li>Add types with JSDoc for better editor hints.<\/li>\n<\/ul>\n<pre><code>\/** @param {{price:number}[]} items *\/\nconst toTotals = items =&gt; items\n  .filter(hasPrice)\n  .map(withTax)\n  .reduce(sum, 0);<\/code><\/pre>\n<p>Clarity scales. That idea sits at the center of this vanilla JavaScript ES6 array methods guide.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"When_to_use_plain_loops\"><\/span>When to use plain loops<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Array methods are great, but not mandatory. This vanilla JavaScript ES6 array methods guide is pragmatic about hot loops and micro optimizations.<\/p>\n<ul>\n<li>Use for loops in tight, performance critical paths after benchmarking.<\/li>\n<li>Use array methods for clarity in most app code.<\/li>\n<li>Profile before changing style for speed alone.<\/li>\n<\/ul>\n<p>Many teams strike a balance. As this vanilla JavaScript ES6 array methods guide shows, readability wins until proven otherwise.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Data_fetching_caching_and_page_speed\"><\/span>Data fetching, caching, and page speed<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Efficient arrays help tame payloads, but front end speed also depends on caching, compression, and smart rendering. This vanilla JavaScript ES6 array methods guide touches the basics.<\/p>\n<ul>\n<li>Compress images with modern formats and quality tuning.<\/li>\n<li>Use HTTP caching headers and a CDN to keep repeat visits instant.<\/li>\n<li>Defer non critical scripts and use code splitting.<\/li>\n<li>Precompute derived arrays server side when possible.<\/li>\n<\/ul>\n<p>For deeper help with measurement and dashboards, connect with <a href=\"https:\/\/www.brandnexusstudios.co.za\/analytics-reporting\/\" target=\"_blank\" rel=\"noopener\">analytics and reporting<\/a> experts who watch the right metrics. This vanilla JavaScript ES6 array methods guide pairs neatly with good observability.<\/p>\n<figure>\n        <img data-opt-id=1796325087  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:10c32808e4cc92c3f19d7a62c98cdb92\/directUpload\/Caching-and-image-compression-strategies.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"Diagram of browser caching strategy and image compression pipeline\" title=\"Caching and image compression strategies\" style=\"max-width:100%;height:auto;\" \/><figcaption>Compress images and cache assets to keep your array powered UI fast.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Team_conventions_and_code_reviews\"><\/span>Team conventions and code reviews<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Consistency reduces friction. This vanilla JavaScript ES6 array methods guide encourages lightweight team rules that keep pull requests smooth.<\/p>\n<ul>\n<li>Prefer map, filter, reduce for pure transforms.<\/li>\n<li>Copy before mutating with sort, reverse, or splice.<\/li>\n<li>Use includes for existence checks over indexOf.<\/li>\n<li>Document tricky reducers with examples right above the code.<\/li>\n<\/ul>\n<p>Good conventions free your brain for product work. This vanilla JavaScript ES6 array methods guide helps align a team around the same simple patterns.<\/p>\n<p>If you want a strategy partner for performance and UX at the platform level, <a href=\"https:\/\/www.brandnexusstudios.co.za\/seo-services\/\" target=\"_blank\" rel=\"noopener\">SEO services<\/a> and site health audits can expose low hanging fruit. That complements the techniques in this vanilla JavaScript ES6 array methods guide.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Testing_arrays_with_confidence\"><\/span>Testing arrays with confidence<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Write small tests that lock in behavior. This vanilla JavaScript ES6 array methods guide favors input-output tests over mocking.<\/p>\n<pre><code>\/\/ Example with Jest\ntest('groups by category', () =&gt; {\n  const items = [{c:'a'},{c:'b'},{c:'a'}];\n  const grouped = items.reduce((acc, x) =&gt; ((acc[x.c] ||= []).push(x), acc), {});\n  expect(Object.keys(grouped)).toEqual(['a','b']);\n  expect(grouped.a).toHaveLength(2);\n});<\/code><\/pre>\n<p>Tests are the fastest form of documentation. As this vanilla JavaScript ES6 array methods guide shows, simple inputs lead to rock solid outputs.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Accessibility_and_data_shaping\"><\/span>Accessibility and data shaping<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Accessible UIs often boil down to clean data and simple lists. This vanilla JavaScript ES6 array methods guide turns messy data into predictable arrays that render well with semantic HTML.<\/p>\n<pre><code>const articles = raw\n  .filter(a =&gt; a.published)\n  .map(a =&gt; ({ title: a.title.trim(), url: a.url, tags: a.tags ?? [] }));<\/code><\/pre>\n<p>When your arrays are tidy, your markup is tidy. That reduces cognitive load and helps assistive tech. The spirit of this vanilla JavaScript ES6 array methods guide is to keep the pipeline honest.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Memory_big_lists_and_virtual_scrolling\"><\/span>Memory, big lists, and virtual scrolling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For very large arrays, render smart. This vanilla JavaScript ES6 array methods guide suggests shaping data on the server and streaming in chunks.<\/p>\n<ul>\n<li>Paginate or window lists instead of rendering thousands at once.<\/li>\n<li>Use generators or async iterators for streams.<\/li>\n<li>Summarize on the server to reduce client work.<\/li>\n<\/ul>\n<p>Simple choices upstream make your client code trivial. That theme runs through this vanilla JavaScript ES6 array methods guide.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Version_quirks_and_compatibility_notes\"><\/span>Version quirks and compatibility notes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Most modern browsers support the methods in this vanilla JavaScript ES6 array methods guide. For older environments, add polyfills for includes, flat, and flatMap as needed.<\/p>\n<pre><code>\/\/ Example polyfill shim approach\nif (!Array.prototype.includes) {\n  Array.prototype.includes = function(search, fromIndex) {\n    return this.indexOf(search, fromIndex) !== -1;\n  };\n}<\/code><\/pre>\n<p>Keep builds lean by targeting only what your users need. This vanilla JavaScript ES6 array methods guide stays focused on the 80 percent case while noting edge cases.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Putting_it_all_together\"><\/span>Putting it all together<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let us build a short pipeline that cleans data, builds an index, and renders. This vanilla JavaScript ES6 array methods guide favors intention revealing names.<\/p>\n<pre><code>const clean = posts =&gt; posts\n  .filter(p =&gt; p.published)\n  .map(p =&gt; ({ id: p.id, t: p.title.trim(), tags: (p.tags ?? []).map(s =&gt; s.toLowerCase()) }));\n\nconst indexTags = posts =&gt; posts.flatMap(p =&gt; p.tags.map(tag =&gt; [tag, p.id]));\nconst byTag = pairs =&gt; pairs.reduce((acc, [tag, id]) =&gt; ((acc[tag] ||= []).push(id), acc), {});\nconst unique = arr =&gt; Array.from(new Set(arr));\n\nconst pipeline = data =&gt; {\n  const ready = clean(data);\n  const tags = byTag(indexTags(ready));\n  const allIds = unique(ready.map(p =&gt; p.id));\n  return { ready, tags, allIds };\n};<\/code><\/pre>\n<p>This pattern scales across features. With the discipline in this vanilla JavaScript ES6 array methods guide, teams move fast without chaos.<\/p>\n<figure>\n        <img data-opt-id=1652736746  data-opt-src=\"https:\/\/ml7ewxmv24ng.i.optimole.com\/w:1024\/h:1024\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:f386a52050bb915b77f201f1b944179e\/directUpload\/End-to-end-array-pipeline.png\"  decoding=\"async\" src=\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20width%3D%221024%22%20height%3D%221024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%221024%22%20height%3D%221024%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E\" alt=\"End to end array method pipeline from raw data to rendered UI\" title=\"End to end array pipeline\" style=\"max-width:100%;height:auto;\" \/><figcaption>From raw data to UI with a clear, testable pipeline. Images are compressed for performance.<\/figcaption><\/figure>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Answers to common questions that come up while applying this vanilla JavaScript ES6 array methods guide in real projects.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_difference_between_map_and_forEach\"><\/span>What is the difference between map and forEach?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>map returns a new array with transformed values, while forEach is for side effects and returns undefined. Prefer map for pure transforms.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_includes_faster_than_indexOf\"><\/span>Is includes faster than indexOf?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>They are similar in speed for typical arrays. includes is cleaner and handles NaN, so it is the default choice unless benchmarks say otherwise.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"When_should_I_use_reduce\"><\/span>When should I use reduce?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use reduce to compute a single result from many values, like totals, counts, or grouped structures. Keep reducers simple.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_is_the_difference_between_flat_and_flatMap\"><\/span>What is the difference between flat and flatMap?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>flat flattens arrays by depth. flatMap maps then flattens one level in a single pass.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_sort_mutate_the_original_array\"><\/span>Does sort mutate the original array?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Copy first if you need immutability, for example [&#8230;arr].sort(&#8230;).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_do_I_handle_async_operations_with_array_methods\"><\/span>How do I handle async operations with array methods?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Map to promises, then await Promise.all. For rate limits, process in chunks.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Should_I_prefer_some_or_every_for_validations\"><\/span>Should I prefer some or every for validations?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use some to check if any element matches. Use every to ensure all match. Both short circuit for speed.<\/p>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"References\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\" target=\"_blank\" rel=\"noopener\">MDN Web Docs on JavaScript Array methods<\/a><\/li>\n<li><a href=\"https:\/\/tc39.es\/ecma262\/multipage\/indexed-collections.html#sec-array-objects\" rel=\"nofollow noopener\" target=\"_blank\">ECMAScript specification for Array objects<\/a><\/li>\n<\/ul>\n<\/section>\n<footer>\n<p>You made it to the end of this vanilla JavaScript ES6 array methods guide. If this helped, subscribe, comment, or share it with your team. Want a performance first site backed by clean engineering practices? Chat with us anytime at info@brandnexusstudios.co.za.<\/p>\n<\/footer>\n<\/article>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>vanilla JavaScript ES6 array methods guide: 10 quick wins vanilla JavaScript ES6 array methods guide: 10 quick wins<\/p>\n","protected":false},"author":1,"featured_media":2627,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[143,5],"tags":[948,953,955,658,949,956,950,954,952,957,958,960,541,946,745,962,951,961,947,959],"class_list":["post-2626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-digital-marketing","tag-array-methods","tag-array-from","tag-array-of","tag-caching","tag-es6","tag-every","tag-filter","tag-find","tag-flat","tag-flatmap","tag-immutability","tag-includes","tag-javascript","tag-map","tag-performance","tag-promise-all","tag-reduce","tag-reverse","tag-some","tag-sort"],"featured_image_urls":{"full":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",1024,1024,false],"thumbnail":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/g:ce\/rt:fill\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",150,150,false],"medium":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",300,300,false],"medium_large":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",1024,1024,false],"large":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",640,640,false],"1536x1536":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",1024,1024,false],"2048x2048":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",1024,1024,false],"morenews-large":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/g:ce\/rt:fill\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",825,575,false],"morenews-medium":["https:\/\/ml7ewxmv24ng.i.optimole.com\/w:auto\/h:auto\/g:ce\/rt:fill\/cb:5G8L.116b\/ig:avif\/q:mauto\/id:3474576de363e43cd96c954c6233f006\/directUpload\/vanilla-JavaScript-ES6-array-methods-guide-feature.png",590,410,false]},"author_info":{"info":["Morne de Heer, CEO &amp; Founder of Brand Nexus Studios"]},"category_info":"<a href=\"https:\/\/brandnexusstudios.co.za\/blog\/category\/business\/\" rel=\"category tag\">Business<\/a> <a href=\"https:\/\/brandnexusstudios.co.za\/blog\/category\/digital-marketing\/\" rel=\"category tag\">Digital Marketing<\/a>","tag_info":"Digital Marketing","comment_count":"0","_links":{"self":[{"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/posts\/2626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/comments?post=2626"}],"version-history":[{"count":1,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions"}],"predecessor-version":[{"id":2635,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions\/2635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/media\/2627"}],"wp:attachment":[{"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/media?parent=2626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/categories?post=2626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brandnexusstudios.co.za\/blog\/wp-json\/wp\/v2\/tags?post=2626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}