Mastering Complex Sorting and the Power of Reduce

Table of Contents

1. Challenge

   Step 1: Introduction

   Working with data in JavaScript means constantly shaping collections for different purposes. This lab gives you hands-on practice with the array methods that power two of the most common transformations: ordering records for display and collapsing them into summaries.

   You'll build a set of utility functions that power Globomantics' back-office analytics module, working with a pre-populated product catalog and order log in data/store.js. Along the way, you'll implement non-mutating array operations using the spread operator and slice, write custom sort comparators that rank products by price, rating, and stock status, aggregate data with reduce to generate grouped objects and per-customer totals, and explore when Map and Set outperform plain arrays and objects. The starter code already includes the data file and four source modules in src/: catalog.js, sort.js, analytics.js, and collections.js, each containing function stubs ready for your implementation.

   ---

   info> This lab experience was developed by the Pluralsight team using an internally developed AI tool. All sections were verified by human experts for accuracy prior to publications. However, content may still contain errors or inaccuracies, and we recommend independent verification. To report a problem or provide feedback, click here. Feedback may be used to improve accuracy in accordance with our Privacy Policy.
   
   To report a problem or provide feedback, click here. Feedback may be used to improve accuracy in accordance with our Privacy Policy.

2. Challenge

   Step 2: Arrays as JavaScript objects

   Arrays in JavaScript are objects, and that distinction matters as soon as you need to copy or modify them safely. You'll implement three utility functions in src/catalog.js that each demonstrate a different non-mutating pattern: extending an array with the spread operator, removing an item by index with slice, and guarding against bad inputs with Array.isArray(). Each function returns a new array rather than altering the original, giving you a clear mental model of which methods are safe to call on data you don't own.

   First expand the application/ folder; all referenced code is in there.

3. Challenge

   Step 3: Sorting with comparator functions

   Non-mutating array operations give you safe copies ready to sort. You'll now write three comparator functions of increasing complexity in src/sort.js, each passed to Array.prototype.sort. A comparator returns a negative number, zero, or a positive number to express the relative order of two elements, and by chaining conditions inside a single function you can encode rules such as "stock status first, then price ascending" in one composable expression. By the end of this step, you'll be able to express any ordering rule as a pure comparator function.

4. Challenge

   Step 4: Reducing arrays to summaries

   Sorted arrays reshape order, reduce reshapes structure. You'll use reduce to implement three functions in src/analytics.js that collapse the product and order arrays into three different output shapes: a single numeric total, an object grouped by category, and a per-customer spending summary. Each function follows the same template: an initial accumulator value and a reducer callback that updates it one element at a time. By the end of this step, you'll have a mental template you can apply wherever a for loop would otherwise build up a result.

5. Challenge

   Step 5: Alternative collection types

   Your reduce-based aggregators built plain objects, which work well for string-keyed lookups. Two built-in JavaScript types offer tighter semantics for specific patterns: Set for collecting unique values without extra filtering logic, and Map for key-value storage that preserves insertion order and supports any value as a key. You'll implement one utility with each type in src/collections.js, then run a demo script that calls every function you've built against the full Globomantics dataset. By the end, you'll know which situations favor Map or Set over a plain array or object.

6. Challenge

   Lab Complete

   You've completed the lab. You built eleven utility functions across four domain source modules in src/, covering the full arc from safe array manipulation through multi-criteria sorting, reduce-based aggregation, and collection lookup with Map and Set. You practiced non-mutating patterns using the spread operator and slice, expressed ordering rules as pure comparator functions, and replaced accumulator loops with reduce calls that produce numeric totals, grouped objects, and per-customer spending maps. The demo script you ran in the final task brought all eleven functions together in one observable output, confirming that each transformation worked correctly against the Globomantics dataset.