JavaScript Array Methods

Arrays in JavaScript are quite useful as these can hold a lot of data(4,294,967,295 elements in a single array), that’s why JavaScript have a lot of methods to deal with arrays which further increases their usefulness in programming.
Below is a table summarsing all of methods which can be invoked on array objects in JavaScript.

MethodDescription of Method
push()Adds elements to start of an array and shift index of other elements up by 1
pop()Takes last element in an array and returns it
shift()Removes first element from array and shifts index of all elements down by 1
unshift()Adds an element to start of array and shifts index of all elements up by 1
values()Returns an array iteration object, which contains values of array
toString()Converts array to string and returns it
splice()Add/Remove elements from a JavaScript Arrays
some()Checks whether any element of an array passes tests in a testing function
reverse()Reverses order of elements in that array
map()Makes a new array with results of calling a function for each array element
reduce()Reduce each element of array to a single value
join()Join all of array’s elements together and return a string
lastindexOf()Search the array for an element, starting at the end, and returns its last index.
keys()Returns an Array iteration object containing keys of original array
isArray()Checks whether passed argument is an array or not
indexOf()Search an element inside array and returns index of it
includes()Checks whether an array have an element or not
forEach()Calling a function once for each of Array element
find()Returns array element which first passes a test defined in some testing function
fill()Fill up elements in array with a static value
entries()Returns a key/value pair Array Iteration Object
copyWithin()Copies a specific part of array to another location in same array and then returns new array
concat()Merging two or more arrays in javaScript

push() and pop() method for JavaScript Arrays

These two methods push(), pop() treat JavaScript arrays as stacks(Like a pile).

push() method – Adds one or more elements to end of array and then returns length of array.
pop() method – Removes last element from JavaScript array and returns element which it removed.

Below are some code examples explaining How to use push(), pop() in JavaScript code?

var x = []
x.push(10, 20, 30)     // Returns 3 (Push returns length of final array)

// Now array x has become [10, 20, 30]
x.pop();       // Returns 30 (Pop returns element which it removed)

// Now array will become [10, 20]

shift() and unshift() array methods

shift() method – Removes first element of array and shift other elements in array down by 1 index each and returns element which it removed from array.
unshift() method – Adds elements to start of array and move other elements to higher indexes in array and returns length of newer array.

Below are some code examples explaining How to use shift(), unshift() array methods of JavaScript?

var x = [ 10, 39, 16, 29 ];

x.shift();  // Returns 10(shift returns element which it removed)

// Now array x will be [ 39, 16, 29 ]

x.unshift(83);       // Returns 4(Length of newer array which it creates)

// Now array x will be [ 83, 39, 16, 29 ] 

values() array method

The array.values() function is an inbuilt function in JavaScript which is used to returns a new array Iterator object that contains the values for each index in the array i.e, it prints all the elements of the array.
Below is a code example explaining this –

var x = [ "javascript", "python", "C++", "TypeScript" ];
var iterator = x.values();      // x.values() will change x array to an iterable object

for (var i in iterator) {
	console.log(i);
}

// For in loop will print out javascript, python, C++, TypeScript

Bonus Point ?
If your not aware of what’s for ( var i in iterator) is in above code example, then don’t worry. Just check out – Loops in JavaScript( for in loop ).

toString() array method in JavaScript

toString() method can be invoked on JavaScript objects and this will return string value of object. Like even if we call toString() method on a wrapper object let’s say Number() then still it will return string despite Number() having value as number. (It’s somewhat confusing due to internally JavaScript type conversion and JavaScript’s wrapper object).

Below are some examples of How to use toString() array method in JavaScript?

var x = [ 10, 20, 38, 92 ];
var y = x.toString();

console.log(y);			// Returns "10,20,38,92"

console.log(typeof(x));   // Returns "string"

splice() array method in JavaScript

splice() method can be used for adding/removing elements from array. JavaScript syntax for this method is Array.splice( starting_index, number_of_elements_to_remove, new_elements_to_insert).

Below is a code example explaining How to use splice() for removing elements?

var x = [ "Physics", "Maths", "Chemistry" ];

var removed = x.splice( 2, 1, "English" ); 

// Here starting index is 2 which is "Chemistry" in array
// Second argument number_of_elements_to_remove is 1
// new_elements_to_insert is "English"

// So new array will be [ "Physics", "Maths", "English" ]

some() javaScript array method

Checks whether any element of an array passes tests in a testing function

Below is a code example explaining How does some() works in JavaScript?

var x = [ 10, 40, 33, 57, 29 ];

function f(num) {
	return num >= 10;
}

var y = x.some(f);

console.log(y); // this will return true

JavaScript array method reverse()

reverse() method – This methos just flips array around in JavaScript, meaning first element will be last one and vice-versa. Also inner elements would also be swapped.

Below is a code example showing How to use reverse() method?

var x = [ 10, 29, 39, 19 ];
var y = x.reverse();
console.log(y); // This will print out [ 19, 39, 29, 10 ]

map() javaScript array method

map() method – This method makes a new JavaScript array by calling a function on each element of array.

Below is a code example showing How to use map() method in JavaScript?

var x = [ 646, 39, 29, 294 ];

function f(num){
	return num * 10;
}

var y = x.map(f);

console.log(y);   // Returns [ 6460, 390, 290, 2940 ]

JavaScript join() array method

join() method – Just merge together elments of array by replacing comman with operator being passed to join()

Below is a code example showing How to use join() method in JavaScript?

var x = [ 83, 92, 19, 399 ];
var y = x.join();
console.log(y); // Returns "83,92,19,399"
console.log(typeof(y)); // Returns string

// So join() have changed array x to a string

JavaScript array indexOf() method

indexOf() array method – This method looks for an identity inside a JavaScript array and returns index of it. Syntax for this is – indexOf( identity_to_search, start_from_index);
  • Here identity_to_search is something which need to be found from array
  • start_from_index is index of array from which search should begin, if in case there is nothing for start_from_index then JavaScript interpreter will start looking for identity_to_search from index 0
  • Note that wherever JavaScript finds identity_to_search going from left to right in array then it just returns that index and doesn’t look any further in array

Below is a code example showing How to use indexOf() method?

var x = [36, 28, 38, 82];
var y = x.indexOf(28);
console.log(y);        // This returns 1 

includes() method in JavaScript

includes() method – This method is kind of similar to indexOf() method as I explained above. Main difference between two is includes(), indexOf() both looks for identity_to_search in array but includes() return true/false based upon whether identity_to_search is in array or not while indexOf() method returns index where it found identity_to_search first.

Syntax for includes() array method
includes(identity_to_search, start_from_index);

Note – Please just scroll a little bit above to see indexOf() method

Below is a code example showing How to use includes() array method in JavaScript?

var x = [10,28,93,82];
var y = x.includes(10);
console.log(y);  // Returns true as 10 is inside in array x

JavaScript array method forEach()

forEach() method – This method calls a function on each element of an array.
var x = [10,28,93,82];

function f(num){
	return num * 10;
}

var y = x.forEach(f);

console.log(y);  // Returns [100,280,930,820]

JavaScript find() array method

find() method – when called upon an array find() method passes every element of array to a testing function, if function returns true then element which first pass test is returned. If in case no element of array passes test then undefined is returned.

Below is a code example explaining How to use find() array method in JavaScript?

var x = [10,28,93,82];

function f(num){
	return num >= 10;
}

var y = x.find(f);

console.log(y); // This returns 10 element at index 0 in array x

JavaScript fill() array method

fill() method – This method can be invoked on a JavaScript array by passing it some argument, starting_index, ending_index then fill() will replace all elements from starting_index to ending_index(including both as well) with argument which was passed inside fill().

Syntax for fill() JavaScript array method – array_name.fill(argument, starting_index, ending_index)

Note – If starting_index, ending_index is not passed to fill() then it will replace all elements inside array with argument.

Below are some code examples showing How to use fill() array method in JavaScript?

var x = [10,28,93,82];
var y = x.fill(2021);
console.log(y);         // Returns [2021,2021,2021,2021]

// Because starting_index, ending_index are not passed 
// that's why every element of array is replace by argument(2021)


var a = [82, 83, 20, 29];
var b = a.fill(2021, 1, 3);

console.log(b);        // Returns [82, 2021, 2021, 2021]

// Because starting_index(1) is 83 and ending index(3) is 29 
//that's why every element inside these, inbetween these is replaced with argument(2021)

entries() JavaScript array method

entries() method – When called upon a JavaScript Array this method returns an iterable object having index, element as arrays.
For example
[ 10, 20, 39, 19, 17 ].entries() will be as following –
[ 0, 10]
[ 1, 20]
[ 2, 39]
[ 3, 19]
[ 4, 17]

JavaScript arrays method copyWithin()

copyWithin() method – If called upon an array in JavaScript copyWithin() will override elements from a starting_index to ending_index(including these positions as well) with argument which is passed within circular brackets of copyWithin().

Common syntax of copyWithin() method array_name.copyWithin(argument, starting_index, ending_index)

For example
var x = [ 10, 29, 181, 72 ];
var y = x.copyWithin( “Hello”, 1, 3);
console.log(y);
// Returns [ 10, “Hello”, “Hello”, “Hello”];

concat() arrays JavaScript method

concat() method – Combines/merger together two or more JavaScript arrays and return a new array.
Syntax for concat() method – array1.concat(array2)

For example
var x = [ “Computer Science”, “Programming”, 39 ];
var y = [ 18, 92 ];
var z = x.concat(y);
console.log(z);
// This will return [ “Computer Science”, “Programming”, 39, 18, 92]

Conclusion

These are all of JavaScript methods which can be called upon Arrays in JavaScript Programming Language.
I hope that this article would have helped you to understand array methods in JavaScript. Please comment below if you have any question or any suggestion. I would try to get back to you as soon as possible.

Happy Coding 🥳

Morover if incase your learning JavaScript Programming Language then you can also check out other articles which I put up on this website specifically about JavaScript, links to those are listed down below –

Gagan

Hi, there I'm founder of ComputerScienceHub(Started this to bring useful Computer Science information just at one place). Personally I've been doing JavaScript, Python development since 2015(Been long) - Worked upon couple of Web Development Projects, Did some Data Science stuff using Python. Nowadays primarily I work as Freelance JavaScript Developer(Web Developer) and on side-by-side managing team of Computer Science specialists at ComputerScienceHub.io

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts