Common array operations and methods in JavaScript


JSON is very popular these days so knowledge of some usable JavaScript array operations and methods is very useful. This tutorial presents few such methods which are easy to use and are very useful for tricky array operations.

Previously in one of our articles we have discussed Structure and use of Array and JSON in JavaScript, this article takes it one step further, here we are going to describe some common methods and operations which can make your life easier when you are working with JavaScript Array.

The methods we describe in following text are, push, pop, join, split, slice, sort, concat, shift and unshift. Let us start by creating an array for demonstration.


var array = ["Hi!","I","am","Array","."];
console.log(array);

The Result on Console:

["Hi!", "I", "am", "Array", "."]

The array is now available, so let us get started with the operations one by one.

push and pop

If you are familiar with Data structures then you might have heard this word with Stack kind of DS. Push and pop are commonly known terms for putting and removing an element from an array. Same Here, with push we insert the new element at the end of array. Thus you are able to expand your array. Following example shows the push in action.


array.push("I am Cool.");
console.log(array);

The Result on Console:

["Hi!", "I", "am", "Array", ".", "I am Cool."]

So you see, the new element has been appended at the end of array. And if you want to remove it from there, the opposite of push is there, pop.

Using pop you can remove the last element of the array, this will return whatever element you have at the last index of array and then shorten the length of array by one. for example if we want to remove last element which we just inserted using "push", we use following code snippet.


console.log(array.pop());
console.log(array);

The Result on Console:

I am Cool.
["Hi!", "I", "am", "Array", "."]

Till now you have seen one pair of methods, Now let us look at another pair of opposite methods which may help you solve many problems with array where you want to operate with arrays and strings together.

join and split

"join" and "split" are used to convert and array into string and a string into array. Isn't that awesome ? All you need to do is to provide a delimiter which will act as a medium of joining or splitting. In the following two examples we demonstrate this behaviour.


var string = array.join(" ");
console.log(string);

The result on console:

Hi! I am Array .

var anotherArray = string.split(" ");
console.log(anotherArray);

The result on console:

["Hi!", "I", "am", "Array", "."]

From the code snippet and its output we can see the join and split in action, join stick together all the elements of an array and formulate the string and it uses the blank space which we pass as an argument in the method to join the various elements. Opposite to that split uses the argument we pass in to determine the breaking point and break down the various substrings into a array. Thus we have gone over two pairs of methods, let us now discuss about "shift" and "unshift" next.

shift and unshift

These two methods are very much similar to the "push" and "pop" except that these are used to remove and add element to the front index of an array.Yes, that is right, the "shift" will remove elements from index 0 and unshift will add the element to index 0 by shifting other elements one step further.


var element = array.shift();
console.log(element);
console.log(array);

The result on console:

Hi!
["I", "am", "Array", "."]

array.unshift("Hello!");
console.log(array);

The result on console:

 ["Hello!", "I", "am", "Array", "."]

The example above demonstrate a very simple operation of the "shift" and "unshift", when we originally apply "shift" on the array it removes and return the first element from array and shift the array accordingly. thus we are able to output the element as a single entity. Similarly for the operation of "unshift" we have specified a new element "Hello!" which will replace previously removed "Hi!" in the array. As expected second code snippet above shows the working example by adding the element in the front of list by shifting all other one index forward. The general sense that it reverses the "shift" thus called "unshift".

Hope you find these methods interesting, beside these pair of methods we are demonstrating three more methods that are very helpful.

slice, concat and sort

The "slice" is used to extract a range of elements from the array. as shown in following example.


var element = array.slice(1,3);
console.log(element);

The result on console:

["I", "am"]

The "slice" method takes parameters, the first is index value which tells where to start and second one is optional parameter which tells where to end. But if you do not wish to provide second parameter it is not fatal to this method, this will simply start with starting index and proceed to the end of array. Please note that there is another such method known as "splice" but it is not to extract the range but to add or remove elements from specified position, and the parameter passed are same but remember this will effect original array so be careful with it. Next is "concat" which is simply used to combine multiple arrays.


var combinedArray = array.concat(["a","b","c","d"],[1,2,3,4]);
console.log(combinedArray);

The result on console:

["Hi!", "I", "am", "Array", ".", "a", "b", "c", "d", 1, 2, 3, 4]

In the method you can pass multiple number of array and they will all be combined to first array, but original array will remain intact as the "concat" results another array which is copy of original array with appended array values.

Now finally we are with the "sort" method which by default sort the array alphabetically, but the point to remember is that it is not so good with numbers. However you could pass an optional parameter which is the method name, you can use this method to sort the array.


array.sort();
console.log(array);

The result on console:

 [".", "Array", "Hi!", "I", "am"]

It is all for this tutorial, hope you find these methods useful, for any query or suggestion please comment below.