Navigate back to the homepage

How to reverse array without mutating in javascript?

Infinitbility
JavaScript
May 15th, 2022 · 1 min read

Hi Friends 👋,

Welcome To Infinitbility! ❤️

Today, we are going to learn how can we reverse an array without mutating in javascript, here we will use the javascript slice() and reverse() methods to do.

Table of contents

  1. Introduction
  2. Reverse array
  3. Reverse array without mutating

Let’s start today’s topic How to reverse an array without mutating in javascript?


Introduction

Let’s know what is a javascript slice and reverse method.

  1. The slice() method

    The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

    — MDN

  2. The reverse() method

    The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

Reverse array

Here, we will use the array reverse method to do a reverse array with mutating and understand, what mutating means.

1const array1 = ['one', 'two', 'three'];
2console.log('array1:', array1);
3// expected output: "array1:" Array ["one", "two", "three"]
4
5const reversed = array1.reverse();
6console.log('reversed:', reversed);
7// expected output: "reversed:" Array ["three", "two", "one"]
8
9// Careful: reverse is destructive -- it changes the original array.
10console.log('array1:', array1);
11// expected output: "array1:" Array ["three", "two", "one"]

When you read the above example, it’s reversing the original array also let’s see the output.

JavaScript, array reverse with mutating example
JavaScript, array reverse with mutating example

Reverse array without mutating

To handle, the mutating issue we have a lot’s ways but here we will see only two ways.

  1. slice() method
  2. Spread operator ( … )

slice() method

1const array1 = ['one', 'two', 'three'];
2console.log('array1:', array1);
3// expected output: "array1:" Array ["one", "two", "three"]
4
5const reversed = array1.slice().reverse();
6console.log('reversed:', reversed);
7// expected output: "reversed:" Array ["three", "two", "one"]
8
9console.log('array1:', array1);
10// expected output: 'array1:' [ 'one', 'two', 'three' ]

Here, we use the slice() method to handle the mutating, let’s see the output.

JavaScript, array reverse without mutating example
JavaScript, array reverse without mutating example

Spread operator ( … )

1const array1 = ['one', 'two', 'three'];
2console.log('array1:', array1);
3// expected output: "array1:" Array ["one", "two", "three"]
4
5const reversed = [...array1].reverse();
6console.log('reversed:', reversed);
7// expected output: "reversed:" Array ["three", "two", "one"]
8
9console.log('array1:', array1);
10// expected output: 'array1:' [ 'one', 'two', 'three' ]

Here, we are use spread operator ( ... ) method to handle the mutating, let’s see the output.

JavaScript, array reverse without mutating example
JavaScript, array reverse without mutating example

All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

React @mui/x-data-grid search example

React material x-data-grid search functionality examples with a guide to change as per requirement.

May 14th, 2022 · 1 min read

How to change material icon size react?

React material icon size examples with guide to change as per requirement.

May 13th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]