Skip to main content Link Search Menu Expand Document (external link)

reverse() : Reverse Collection Order

On this page

Summary

Reverse the order of items in a collection, returning a new array with items in opposite order.

Signature 

reverse(collection)

Parameters

Parameter Type Required Description
collection Array/Collection Yes The collection to reverse

Returns

Type: Array

A new array with items in reverse order (last item becomes first, etc.).

Examples

Simple Reverse 

<p>Original: </p>
<p>Reversed: </p>

Data:

doc.Params["model"] = new {
    items = new[] { "First", "Second", "Third", "Fourth" }
};

Output:

<p>Original: First, Second, Third, Fourth</p>
<p>Reversed: Fourth, Third, Second, First</p>

Descending Sort 

<h3>Products (Highest to Lowest Price)</h3>

  <p>: $</p>

Data:

doc.Params["model"] = new {
    products = new[] {
        new { name = "Widget A", price = 29.99 },
        new { name = "Widget B", price = 9.99 },
        new { name = "Widget C", price = 19.99 }
    }
};

Output:

<h3>Products (Highest to Lowest Price)</h3>
<p>Widget A: $29.99</p>
<p>Widget C: $19.99</p>
<p>Widget B: $9.99</p>

Latest Items First 

<h3>Recent Orders</h3>

  <p>: Order # - $</p>

Data:

doc.Params["model"] = new {
    orders = new[] {
        new { id = "001", date = new DateTime(2024, 3, 10), total = 150.00 },
        new { id = "002", date = new DateTime(2024, 3, 15), total = 200.00 },
        new { id = "003", date = new DateTime(2024, 3, 12), total = 175.50 }
    }
};

Output:

<h3>Recent Orders</h3>
<p>Mar 15: Order #002 - $200</p>
<p>Mar 12: Order #003 - $175.5</p>
<p>Mar 10: Order #001 - $150</p>

Countdown List 

<h3>Countdown</h3>

  <p>...</p>

<p>Launch!</p>

Data:

doc.Params["model"] = new {
    numbers = new[] { 1, 2, 3, 4, 5 }
};

Output:

<h3>Countdown</h3>
<p>5...</p>
<p>4...</p>
<p>3...</p>
<p>2...</p>
<p>1...</p>
<p>Launch!</p>

Leaderboard (High Scores First) 

<h3>Top Players</h3>

  <p>. :  points
  🏆
  </p>

Data:

doc.Params["model"] = new {
    players = new[] {
        new { name = "Alice", score = 850 },
        new { name = "Bob", score = 1200 },
        new { name = "Charlie", score = 950 }
    }
};

Output:

<h3>Top Players</h3>
<p>1. Bob: 1200 points 🏆</p>
<p>2. Charlie: 950 points</p>
<p>3. Alice: 850 points</p>

Notes

  • Returns new array (does not modify original collection)
  • Works with any array or collection
  • Commonly used with sortBy() to create descending sorts
  • Empty or null collections return empty array
  • Useful for:
    • Descending sorts (newest/highest first)
    • Countdown displays
    • Leaderboards
    • Timeline reversals
    • Navigation breadcrumbs (reverse order)
  • Performance: O(n) - efficient operation
  • Pattern: reverse(sortBy(items, 'property')) for descending sort by property
  • Does not affect special iteration variables like @index (they still increment)

See Also