Useful JavaScript Array Methods With Example

Arrays are very popular and important data types in JavaScript. This JavaScript tutorial helps to solve some array common problems with examples. I will provide JavaScript code to solve array problems using the JavaScript array method.

Arrays provide many powerful methods to process data. You can use a simple array, nested array or array of JSON etc. It’s difficult to develop a JavaScript application without the use of the JavaScript array.

We’ll cover the following javascript methods:

• sort(): This method helps the sorting of array elements.
• pop(): Remove elements from the end of an array.
• shift(): Remove elements from the beginning of the array.
• unshift(): It allows for the insertion of elements at the beginning of an array.
• push(): Appends elements to the end of an array.
• concat(): This method combines arrays into a new array without modifying the original ones.

Let’s look at each of the commonly used JavaScript array methods mentioned above with an example.

JavaScript Sort() – The sort array in JavaScript

We will create a simple index.html file to demonstrate demos and examples, The sorting of array elements is a very common problem in web development.

The array sort can be in ascending order or descending order.

The sort() method available on the Array prototype allows you to sort the elements of an array. It accepts an optional callback function that can be used to sort arrays based on specific needs.

The String Sort in JavaScript

The JavaScript array has sort() method to sort array data but its sorting is based on string values instead of integers.

let colors = ["Green", "Blue", "Yellow", "Pink"];
console.log(colors.sort());

Output:

Green,Blue,Yellow,Pink

The above code will work if all array values are string type, if you passed an integer then it will not work.

Integer Array Sort in JavaScript

As I stated in the above example, The JavaScript sort method does not work well with integers, So now we have a question in mind, How to sort integer array values in JavaScript?

var marks = [40, 100, 31, 45, 25, 70];
marks.sort(function(a, b){return a - b});

Output:

25, 31, 40, 45, 70, 100

The above JavaScript code is used to sort integer array elements.

The Sorting Object Arrays in JavaScript

The JavaScript could have object data, So it might have the requirement to sort array object data. The JavaScript array has the power to solve this problem. The objects can have properties of different data types, and the sort() method can be used to sort the Object’s array.

let Employee = [
  { name:"Adam", salary:3122 },
  { name:"Thomas", salary:3456 },
  { name:"John", salary:4567 }
];

let Employee = Employee.sort((a, b) => {
  return b.name - a.name;
});
console.log(Employee);

How To Reverse Array Elements in JavaScript

The JavaScript reverse() method helps to reverse the elements of an array:

var marks = [40, 100, 31, 45, 25, 70];
marks.sort(function(a, b){return a - b});
document.writeln(marks.reverse());

Output:

100,70,45,40,31,25

Converting JavaScript Arrays to Strings

The toString() method available on the Array prototype allows you to convert an array to a string of (comma-separated) array values.

let colors = ["Green", "Blue", "Yellow", "Pink"];
console.log(colors.sort());

Output:

Green, Blue, Yellow, Pink

Converting JavaScript Arrays to Strings

The toString() method available on the Array prototype allows you to convert an array to a string of (comma separated) array values.

let colors = ["Green", "Blue", "Yellow", "Pink"];
console.log(colors.toString());

Output:

Green, Blue, Yellow, Pink

Combining the JavaScript Arrays into Strings

The join() method is the same as toString() method but you can pass the separator. The join() method concatenates one by one array element and add separates within each array element.

let colors = ["Green", "Blue", "Yellow", "Pink"];
console.log(colors.join(-));

Output:

Green-Blue-Yellow-Pink

How to Add New Element End of the JavaScript Array

The javascript provides push() method to add a new element to the end of the array.

let colors = ["Green", "Blue", "Yellow", "Pink"];
colors.push("black");
document.writeln(colors);

Output :

Green,Blue,Yellow,Pink,black

Remove Element from the End of The JavaScript Array

The JavaScript provides pop() method to remove an array element from the end of the array and return that element. The pop() method returns undefined if you call it on an empty array.

let colors = ["Green", "Blue", "Yellow", "Pink"];
colors.pop();
document.writeln(colors);

Output:

Green,Blue,Yellow,Pink

Add New Element Start of the Javascript Array

The JavaScript provides unshift() method to add new elements to the start index. All array elements shift one index at the end. it’s just the reverse of the push() method.

let colors = ["Green", "Blue", "Yellow", "Pink"];
colors.unshift("black");
document.writeln(colors);

Output:

black,Green,Blue,Yellow,Pink

Remove Element from the Beginning of The Javascript Array

The JavaScript provides shift() method is used to remove elements from the beginning of the array, it’s just the reverse of the pop() method.

let colors = ["Green", "Blue", "Yellow", "Pink"];
colors.shift();
document.writeln(colors);

Output:

Blue,Yellow,Pink

Merging (Concatenating) Arrays

You can merge one or many arrays into another array using concat() method, It’s too powerful a JavaScript method to concatenate an array.

let color = ["Green", "Blue"];
let color2 = ["Yellow", "Pink"];
let colors = color.concat(color2); 
document.writeln(colors);

Output:

Green,Blue,Yellow,Pink

How to Create Sub Array(Slice) of an Array

Array has slice() method that helps to create a new subset of an array. It does not remove any elements from the source array. This method takes two arguments, one is the start index and the other is end index. if you do not provide the second element then it will take the length of the array.

let colors = ["Green", "Blue", "Yellow", "Pink"];
var color_sub = colors.slice(1);
document.writeln(color_sub);

Output:

Blue,Yellow,Pink

Conclusion:

The JavaScript array methods sort, pop, shift, unshift, push, and concat help to manipulate and manage arrays efficiently. These are the most common methods to manipulate array data.