JavaScript Array Object API Guide

In this guide, we will learn the important methods/APIs of JavaScript in-built Array object with an example.

Basically, the Array object is used to store multiple values in a single variable. JavaScript Array object provides below APIs/Methods to perform different operations on the array.

In this guide, we will learn following JavaScript Array object methods with an example:
1. JavaScript Array concat() API/Method
2. JavaScript Array copyWithin() API/Method
3. JavaScript Array.entries() API/Method
4. JavaScript Array.fill() API/Method
5. JavaScript Array.find() API/Method
6. JavaScript Array.forEach() API/Method
7. JavaScript Array.indexOf() API/Method
8. JavaScript Array​.push() API/Method
9. JavaScript Array.pop() API/Method
10. JavaScript Array.reverse() API/Method
11. JavaScript Array.shift() API/Method
12. JavaScript Array.splice() API/Method
13. JavaScript Array.unshift() API/Method 

1. JavaScript Array concat() API/Method

The Array.concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Example: Concatenating two arrays

The following code concatenates two arrays:

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]

Check out more Array.concat() method examples at https://www.javaguides.net/2019/04/javascript-arrayconcat-method-example.html.

2. JavaScript Array copyWithin() API/Method

The Array.copyWithin() method shallow copies part of an array to another location in the same array and returns it, without modifying its size.

Example: Copy the first two array elements to the last two array elements

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

output

["Banana", "Orange", "Banana", "Orange"]

Check out Array.copyWithin() method examples at https://www.javaguides.net/2019/04/javascript-array-copywithin-method.html.

3. JavaScript Array.entries() API/Method

The JavaScript Array entries() method returns a new Array Iterator object that contains the key/value pairs for each index in the array.

Example: Simple Array.entries() Method Example

var array1 = ['a', 'b', 'c'];

var iterator1 = array1.entries();

console.log(iterator1.next().value);

console.log(iterator1.next().value);

Output:

[0, "a"]
[1, "b"]

Check out more JavaScript Array entries() method examples at https://www.javaguides.net/2019/07/javascript-arrayentries-method-example.html.

4. JavaScript Array.fill() API/Method

The fill() method fills (modifies) all the elements of an array from a start index (default zero) to an end index (default array length) with a static value. It returns the modified array.

Example: Simple Array.fill() Method Example

var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// fill with 5 from position 1
console.log(array1.fill(5, 1));
console.log(array1.fill(6));

Output:

[1, 2, 0, 0]
[1, 5, 5, 5]
[6, 6, 6, 6]

5. JavaScript Array.find() API/Method

The JavaScript Array find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Example: Simple Array.find() Example

var array1 = [15, 20, 25, 30, 35];

var found = array1.find(function(element) {
  return element > 12;
});

console.log(found);

Output:

15

Check out more JavaScript Array find() method examples at https://www.javaguides.net/2019/07/javascript-arrayfind-method-example.html.

6. JavaScript Array.forEach() API/Method

The forEach() method executes a provided function once for each array element.

Example: Simple Array.forEach() Example

    var progLangs = ['Java', 'C', 'C++', 'PHP', 'Python'];
    progLangs.forEach(element => {
        console.log(element);
    });

Output:

Java
C
C++
PHP
Python

7. JavaScript Array.indexOf() API/Method

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Example: Simple Array indexOf() method example

var progLangs = ['C', 'C++', 'Java', 'PHP', 'Python'];

console.log(progLangs.indexOf('C'));

// start from index 2
console.log(progLangs.indexOf('PHP', 2));

console.log(progLangs.indexOf('Python'));

Output:

0
3
4

8. JavaScript Array​.push() API/Method

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Example: Simple Array.push() method example

var animals = ['pigs', 'goats', 'sheep'];
console.log(animals.push('cows'));
console.log(animals);
animals.push('chickens');
console.log(animals);

Output:

4
["pigs", "goats", "sheep", "cows"]
["pigs", "goats", "sheep", "cows", "chickens"]

Check out more push() method examples at https://www.javaguides.net/2019/04/javascript-arraypush-method-example.html.

9. JavaScript Array.pop() API/Method

The Array pop() method is used to remove the last element from an array and returns that element. This method changes the length of the array.

Example: Simple Array pop() method example

var progLangs = ['C', 'C++', 'Java', 'PHP', 'Python'];

console.log(progLangs.pop());
// expected output: "Python"

console.log(progLangs);
// expected ["C", "C++", "Java", "PHP"]

progLangs.pop();

console.log(progLangs);
// expected ["C", "C++", "Java"]

Check out more Array pop() method examples at https://www.javaguides.net/2019/07/javascript-arraypop-method-example.html

10. JavaScript Array.reverse() API/Method

The reverse() method reverses the order of the elements in an array.

Example: Reverse a given string array

var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']

var reversed = array1.reverse(); 
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']

/* Careful: reverse is destructive. It also changes
the original array */ 
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']

Check out more examples at https://www.javaguides.net/2019/04/javascript-arrayreverse-method-example.html.

11. JavaScript Array.shift() API/Method

The JavaScript Array.shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

Example: Remove the first element from an array

var array1 = [1, 2, 3];

var firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

Check out more examples at https://www.javaguides.net/2019/07/javascript-arrayshift-method-example.html.

12. JavaScript Array.splice() API/Method

The JavaScript Array splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Example: Add items to the array

var progLangs = ['C', 'C++', 'Java', 'PHP', 'Python'];
progLangs.splice(3,0,'Java EE', 'Scala');
console.log(progLangs);

Output:

["C", "C++", "Java", "Java EE", "Scala", "PHP", "Python"]

Check out more examples at https://www.javaguides.net/2019/07/javascript-arraysplice-method-example.html.

13. JavaScript Array.unshift() API/Method 

The JavaScript Array unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Example: Adding elements to the front of the array

var progLangs = ['C++', 'PHP', 'Python'];

console.log(progLangs.unshift('Java', 'C'));

console.log(progLangs);

Output:

5
 ["Java", "C", "C++", "PHP", "Python"]

Check out more examples at https://www.javaguides.net/2019/07/javascript-arrayunshift-method-example.html.