JavaScript toReversed returns a new array with the reversed order of its elements. It does not change the original array at any step. This function works in a predictable and simple way for arrays.
Table of Content
Understand the toReversed Function in JavaScript
The toReversed function creates a copy of an array and puts elements in reverse order. It leaves the original array without any change.
The syntax looks like this:
array.toReversed()It takes no parameters. It returns a new array with elements in reverse order. You write it like this to avoid errors:
const newArray = oldArray.toReversed();It first copies all elements of the array into a new array. It then places the elements from the last to the first index. The original array stays intact and can still be used.
Here is an example:
const numbers = [1, 2, 3];
const reversed = numbers.toReversed();This returns the expected value. The result is [3, 2, 1] and the original array [1, 2, 3] stays the same.
The Difference Between toReversed and reverse
The reverse() method changes the array in place and returns it. The toReversed() method returns a new reversed array without changing the original one.
| Aspect | toReversed | reverse |
|---|---|---|
| Mutates Original | No | Yes |
| Return Value | New reversed array | Same array reversed |
| Use Case | Keep original intact | Change original array |
Use toReversed() when you need a reversed copy without change to the source. Use reverse() when you want to reverse the original array itself.
Examples of the toReversed Function in JavaScript
Reverse Numbers Without Changing Original:
const nums = [10, 20, 30];
const copy = nums.toReversed();This shows it in action clearly. It creates a new array [30, 20, 10] and keeps nums as [10, 20, 30].
Reverse Strings in Array:
const words = ["apple", "banana", "cherry"];
const reversedWords = words.toReversed();This returns the expected value. It outputs ["cherry", "banana", "apple"] and leaves the original array unchanged.
Compare reverse() and toReversed():
const arr = [1, 2, 3];
const rev1 = arr.reverse();
const rev2 = arr.toReversed();This shows it in action clearly. The reverse() method changes arr to [3, 2, 1] while toReversed() keeps arr intact and returns [1, 2, 3] reversed separately.
Chain Methods with toReversed():
const values = [5, 10, 15];
const newVals = values.toReversed().map(x => x * 2);This gives you the result immediately. It first reverses into [15, 10, 5] then maps to [30, 20, 10] without any change to the original array.
Wrapping Up
You learned the meaning of toReversed and the difference from reverse.
Here is a quick recap:
toReversedmakes a reversed copy without change to the source.reversechanges the array itself and returns it.
FAQs
What is JavaScript toReversed Function?
let numbers = [1, 2, 3];
let newArray = numbers.toReversed();
console.log(newArray); // [3, 2, 1]
console.log(numbers); // [1, 2, 3]
What is the difference between toReversed and reverse in JavaScript?
let data = [10, 20, 30];
let rev = data.reverse();
console.log(rev); // [30, 20, 10]
console.log(data); // [30, 20, 10]
let nums = [10, 20, 30];
let safe = nums.toReversed();
console.log(safe); // [30, 20, 10]
console.log(nums); // [10, 20, 30]
How do you use JavaScript toReversed Function with strings?
let word = "hello";
let reversed = word.split("").toReversed().join("");
console.log(reversed); // "olleh"
Does JavaScript toReversed Function work in all browsers?
- Supported in Chrome 110+
- Supported in Firefox 115+
- Supported in Edge 110+
- Not in Internet Explorer
Similar Reads
The JavaScript unshift function adds one or more elements at the start of an array. It shifts existing items to…
JavaScript Symbol Type gives a way to make unique values. A Symbol never matches any other value and this helps…
Comments in JavaScript help you explain code and prevent mixing. They guide anyone who reads or edits your script. Understand…
Logical operators in JavaScript let you check conditions and combine multiple checks in your code. In this guide, you will…
JavaScript optional chaining lets you access object values without runtime errors. It checks if a property exists before access and…
Math.sin() in JavaScript gives the sine of a number. This number must be in radians. You use it to work…
JavaScript Math.log() was added to help people find the natural log of a number. It solves real problems in science…
If you are ready to take your first steps into the realm of web development, then there cannot be a…
String Operators in JavaScript help you work with text. You can join, build, or change strings. Most of what you…
The JavaScript nullish coalescing operator (??) gives a default value when a variable is null or undefined. Understand the Nullish…