Sling Academy
Home/JavaScript/JavaScript Array.toReversed() method (with examples)

JavaScript Array.toReversed() method (with examples)

Last updated: September 06, 2023

This concise, straight-to-the-point article is about the Array.toReversed() method in modern JavaScript. We’ll learn the fundamentals of the method and then walk through some code examples of using it in practice.

Overview

The Array.toReversed() method is a relatively new feature of JavaScript that was added in ECMAScript 2023 (ES 13). Its purpose is to return a new array with the elements in reversed order, without mutating the original array.

At the time of writing, the Array.toReversed() method is supported by most modern web browsers, including Chrome, Edge, Safari, and Firefox.

Syntax

Syntax:

let newArray = array.toReversed();

The method takes no parameters and returns a new array that is the reversed copy of the original array.

Array.toReversed() vs Array.reverse()

JavaScript also provides another method for the job of reversing a given array, the Array.reverse() method, an old buddy. The main difference between the Array.toReversed() and Array.reverse() methods is that the former returns a new array with the elements in reversed order, while the latter reverses the array in place and returns the same array. This means that the Array.toReversed() method does not change the original array, but the Array.reverse() method does.

Examples

Reversing a simple array

This example shows you how to reverse a simple array of numbers using the Array.toReversed() method.

// Create an array of numbers
let numbers = [1, 2, 3, 4, 5];

// Reverse the array using toReversed()
let reversed = numbers.toReversed();

// Log the original and reversed arrays
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(reversed); // [5, 4, 3, 2, 1]

As you can see, the original one is kept intact.

Reversing an array of strings

// Create an array of strings
let words = ["Welcome", "to", "Sling", "Academy"];

// Reverse the array using toReversed()
let reversed = words.toReversed();

// Log the original and reversed arrays
console.log(words); // ["Welcome", "to", "Sling", "Academy"]
console.log(reversed); // ["Academy", "Sling", "to", "Welcome"]

Reversing a sparse array

This example demonstrates how to reverse a sparse array with the Array.toReversed() method. The original array is not changed by the method. The empty slots in the sparse array are treated as if they have the value undefined.

// Create a sparse array
let sparse = ['Sling Academy', , ,];

// Reverse the sparse array using toReversed()
let reversed = sparse.toReversed();

// Log the original and reversed arrays
console.log(sparse);
// Output: ['Sling Academy', empty × 2]

console.log(reversed); 
// Output:  [undefined, undefined, 'Sling Academy']

A sparse array is an array that has some empty slots, which are treated as if they have the value undefined. The Array.toReversed() method reverses the order of the elements in the array, including the empty slots. This means that the first element of the original array becomes the last element of the reversed array, and vice versa. The empty slots are also reversed, so they appear at the beginning of the reversed array. This can be useful if you want to manipulate the order of a sparse array without changing its length or structure.

Next Article: JavaScript Array.toSorted() method (with examples)

Previous Article: JavaScript Array.with() method (with examples)

Series: Working with Arrays in JavaScript

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration