How to Reorder Elements of an Array in JavaScript

Shraddha Paghdar Feb 02, 2024
How to Reorder Elements of an Array in JavaScript

The Arrays are an important part of each programming language as they contain many ordered elements.

In contrast to other languages, JS Arrays may contain different data types in different indexes of the same matrix.

All of these items are accessed through an index. In JavaScript, arrays are regular objects containing the value at the specified key, a numeric key.

Arrays are JavaScript objects with a fixed numeric key and dynamic values ​​containing any amount of data in a single variable.

An array can be any dimensional (one or multidimensional). The JavaScript array can store anything like direct values or store JavaScript objects.

Reorder Array Elements With splice() in JavaScript

The splice() method mutates or modifies the contents of an original array. This is done by removing, replacing existing items, and adding new items in their place.

Syntax:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

The JavaScript splice method takes three input parameters, out of which the first one is start. The required parameter specifies an array’s starting index/position to mutate the array.

If the start index is greater than the length of an array, the start is set to the array’s length. In this case, no elements are removed, but the method behaves like an addition function.

This will start adding as many elements as n* elements are provided. If negative, start with that many elements at the end of the array.

The deleteCount is the second parameter. It is an optional parameter.

This parameter specifies the number of elements of the array to get rid of from the start. If deleteCount is omitted or its value is equal to or greater than array.length - start.

All elements from the beginning to the end of the array are removed or deleted. No elements are removed or deleted if the deleteCount is 0 or negative.

In this case, you need to enter a minimum of one new item.

itemN... is the third and last parameter, an optional parameter. The elements that need to be added to the array are specified in this parameter, starting at the beginning.

If you do not specify an item, splice() only eliminates elements of the array.

This method returns a replacement array that contains the deleted items. An array of n elements is returned if only n elements are deleted.

If no element is deleted, an empty array is returned. See the splice method documentation for more information.

const inputArray = [1, 2, 3, 4, 5];
inputArray.splice(2, 0, inputArray.splice(0, 1)[0]);
console.log(inputArray);

In the above example, we have specified the various elements inside an array. Suppose you want to extract element 1 and insert it between 3 and 4.

Once you extract the 1, it will affect the original inputArray array and return an array containing element 1.

We want to insert the 1 deleteCount parameter as 0. Now you can assign this extracted element to the desired position.

Once you run the above code in any browser, it’ll print something like this.

Output:

[2, 3, 1, 4, 5]

To check the complete working code, click here.

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Related Article - JavaScript Array