In javascript array is a built-in global miscellaneous object, which represents a collection of objects (like string, number, boolean or object etc.).

const languages = ["c", "c++", "javascript", "java", "python"]

Declaration

You can create an array using two ways:

1. Using an array literal

const arr = [] // empty array
const languages = ["c", "c++", "javascript", "java", "python"] // array with elements

1. Using Array() constructor

const arr = new Array() // empty array
const languages = new Array("c", "c++", "javascript", "java", "python") // array with elements

Different data types in a single array

JavaScript arrays are resizable and can contain a mix of different data types.

const array1 = ["string", 123, true]

Output:

["string", 123, true]

Array's length is resized from 3 to 4.

Accessing array elements

JavaScript arrays elements can accessed via index

const arr = ["L", "C", "O"]
console.log(arr[0])

Output:

L

Array's index starts with 0, not 1.

Insert data in an array

const arr = new Array()
arr[0] = "data"

Output:

console.log(arr) // ['data']

Methods

Array length

With the help of length method we get the length of array in number

const arr = ["L", "C", "O"]
console.log(arr.length)

Output:

3

Use of length method

• Iterating over an array
• Shortening an array
• Create empty array of fixed length

push()

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

push(element0, element1, /* … ,*/ elementN)

const array1 = ["string", 123, true]
array1.push("data")

Output:

["string", 123, true, "data"]

Use of push() method

• Adding elements to an array
• Merging two arrays

pop()

The pop() method removes the last element from an array and returns that element.

const array1 = ["string", 123, true]
array1.pop()

Output:

["string", 123]

Use of pop() method

• Removing the last element of an array

shift()

The shift() method removes the first element from an array and returns that removed element.

const array1 = ["string", 123, true]
array1.shift()

Output:

[123, true]

Use of shift() method

• Removing an element from an array

unshift()

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

unshift(element0, element1, /* … ,*/ elementN)

const array1 = ["string", 123, true]
console.log(array1.unshift("data")) //4

Output:

["data", "string", 123, true]

Use of unshift() method

• Adding elements to an array

splice()

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

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

const array1 = ["string", 123, true]
array1.splice(1, 0, "data")

Output:

["string", "data", 123, true]

Use of splice() method

• Adding elements to an array in any place by with/without replacing existing one.

slice()

The slice() method returns a shallow copy of a portion of an array into a new array.

slice(start, end)

const array1 = ["string", 123, true]
array1.slice(1)

Output:

[123, true]

Use of slice() method

• Creating a new filtered array with originals position.

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

map((element, index, array) => { /* … */ })

const array1 = ["string", "data", 123]
array1.map((ele) => ele + 4)

Output:

["string4", "data4", 127]

Use of map() method

• Mapping an array of elements using a function containing an argument.
• To reformat objects in an array.

filter()

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass a certain condition provided by the function.

filter((element, index, array) => { /* … */ })

const array1 = ["string", "data", 123]
array1.filter((ele) => typeof ele == "string")

Output:

["string", "data"]

Use of filter() method

• Filtering out certain elements from array.

reduce()

The reduce() method executes a function on each element of the array and returns a single output value.

reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })

const array1 = ["string", "data", 123]
array1.reduce((total, ele) => total + " | " + ele)

Output:

"string | data | 123"

Use of reduce() method

• Sum of values in an object array.
• Flatten an array of arrays.
• Grouping objects by a property.
• Remove duplicate items in an array.
• Replace .filter().map() with .reduce().

forEach()

The forEach() method executes a provided function once for each array element. Unlike map() function its return value is discarded. forEach((element, index, array) => { /* … */ })

const array1 = ["string", "data", 123]
array1.forEach((ele) => console.log(ele))

Output:

string
data
123

Use of forEach() method

• Replaces for loop
• Flatten an array of arrays.
• Replace .map().

concat()

The concat() method returns a new array by merging two or more arrays.

concat(value0, value1, /* … ,*/ valueN)

const array1 = ["string", "data", 123]
const array2 = [456, 789]
array1.concat(array2)

Output:

["string", "data", 123, 456, 789]

Use of concat() method

• Merge two arrays, even nested once.

fill()

The fill() method returns an array by filling all elements with a specified value within range.

fill(value, start, end)

const array1 = ["string", "data", 123, 456, 789]
array1.fill(111, 1, 4)

Output:

["string", 111, 111, 111, 789]

find()

The find() method returns the value of the first array element that satisfies the provided test function.

find((element, index, array) => { /* … */ })

const array1 = ["string", "data", 123]
array1.find((ele) => typeof ele == "string")

Output:

"string"

from()

The from() method returns the value of the first array element that satisfies the provided test function.

Array.from(arrayLike, (element, index) => { /* … */ })

Array.from("string")

Output:

["s", "t", "r", "i", "n", "g"]

includes()

The includes() method checks if an array contains a specified element or not.

includes(searchElement, fromIndex)

const array1 = ["string", "data", 123]
array1.includes("data")

Output:

true

indexOf()

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

indexOf(searchElement, fromIndex)

const array1 = ["string", "data", 123]
array1.indexOf("data")

Output:

1

join()

The join() method returns a new string by concatenating all of the elements in an array, separated by a specified separator.

join(separator)

const array1 = ["string", "data", 123]
array1.join(" | ")

Output:

"string | data | 123"

reverse()

The reverse() method returns the array in reverse order.

reverse()

const array1 = ["string", "data", 123]
array1.reverse()

Output:

[123, "data", "string"]

sort()

The sort() method sorts the items of an array in a specific order.

sort((a, b) => { /* … */ } )

const array1 = ["string", "data", 456, 123, 789]
array1.sort()

Output:

[123, 456, 789, "data", "string"]

toString()

The toString() method returns a string representing the specified array and its elements.

toString()

const array1 = ["string", "data", 123]
array1.toString()

Output:

"string,data,123"