In this JavaScript Array article, we will focus on the array methods used to define a list of items.

JavaScript Array

• An array is a data structure that contains a list of elements that store multiple values under a single variable.

• To declare an array in JavaScript use any keyword with square brackets [ ] and enclose all the elements within them. The syntax is as follows:

let ListItems = ["shoes", "watch", "bag"];

Array Index value

• The index value of an array indicates the position of the element within the array (starting from 0). You will understand better from this image below:

Modifying an array

• Array elements are modified using the index values of the elements.

Example

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
number[0]="empty";
number[2]

output:

['empty', 2, 'empty', 4, 5, 6, 7, 8]

Length property of an array

• Length of an array can be found using the length property.

Example

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(numbers.length)

output:

8

JavaScript Array Methods

• There are different JavaScript array methods in order to perform various tasks such as:

1. push()

• It is used to add a new element at the end of an array.

Example

let listItems = ["bag", "shoes", "dress"];
listItems.push("watch");
console.log(listItems);

Output:

['bag', 'shoes', 'dress','watch']

---

2. pop()

• It is exactly opposite of the push() method. Yes, you have guessed it right. It is used to remove the last element of an array.

Example

let listItems = ["bag", "shoes", "dress"];
listItems.pop();
console.log(listItems);

Output:

['bag', 'shoes']

---

3. shift()

• Shifting is similar to popping, working on the first element instead of the last. The shift() method removes the first array element and shifts all other elements to a lower index. It will return to you the string that has been shifted out.

Example

let listItems = ["bag", "shoes", "dress"];
listItems.shift();
console.log(listItems);

Output:

['shoes', 'dress']

---

4. unshift()

• The unshift() method adds a new element at the beginning of an array and unshifts older elements. It is similar to Push().

Example

let listItems = ["bag", "shoes", "dress"];
listItems.unshift("watch");
console.log(listItems);

Output:

['watch','bag', 'shoes', 'dress']

---

5. concat()

• The concat() method creates a new array by concatenating or merging existing arrays. It does not modify the existing array and always returns a new array.

Example

let arr1 = ["red", "blue", "green"];
let arr2 = ["colors", "spraypaint", "brush"];
let newArr = arr1.concat(arr2);
console.log(newArr);

Output:

[ 'red', 'blue', 'green', 'colors', 'spraypaint', 'brush' ]

---

6. toString()

• The toString() method is used to convert an array to a string of array values, separated by commas.

Example

let colors = ["red", "blue", "green"];
console.log(colors.toString());

Output:

red,blue,green

---

7. join()

• The join() method works same as toString(). It is used to join all array elements into a string, but in addition, you can specify the separator.

  Example

let colors = ["red", "blue", "green"];
console.log(colors.join("+"));

Output:

red+blue+green

---

8. sort()

• It is used to arrange an array alphabetically in ascending order.

Example

let names = ["Yasir", "Shariq", "Afzal", "Zaiem", "Rehan"];
console.log(names.sort());

Output:

[ 'Afzal', 'Rehan', 'Shariq', 'Yasir', 'Zaiem' ]

---

9. slice()

• To explain slice(), let us take an example: Suppose there is a cake in front of you and you want a slice of it, so you cut the cake and remove a slice from it. The use of slice() is also the same.

• So, the slice() method is used to slice out a piece of an array into a new array. It creates a new array without removing any elements from the source array. It will return the value that has been sliced out from the array.

Example

let colors = ["red", "blue", "green", "yellow", "orange"];
console.log(colors.slice(1, 3));

Output:

[ 'blue', 'green' ]

---

10. splice()

• splice() is like cutting a piece of cake and replacing that piece with a new piece of cake.

• So, the splice() method is used to replace a piece of an array and form a new array.

Syntax

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

Example

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// inserts at index 1

console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, "May");
// replaces 1 element at index 4

console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Output:

["Jan", "Feb", "March", "April", "June"]

["Jan", "Feb", "March", "April", "May"]

---

11. includes()

• The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

Example

let array1 = [1, 2, 3];
console.log(array1.includes(2));

output

true

---

12. fill()

• The fill() method changes all elements in an array to a given value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

Syntax

fill(value)
fill(value, start)
fill(value, start, end)

Example

let x = [1, 2, 3, 4, 5, 6];
console.log(x.fill('h', 1, 3));

output

[ 1, 'h', 'h', 4, 5, 6 ]

---

13. 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 the test implemented by the provided function.

Syntax

filter((element) => { /* … */ } )

Example

var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var final_a = a.filter((num) => num != 5);
console.log(final_a);

output

[ 0, 1, 2, 3, 4, 6, 7, 8, 9 ]

---

So, this was it for the methods of the javascript array. You will be more confident about the concept of javascript arrays only after some practice, so get started with the practicing part.

If you liked my article, then don't forget to drop a like, and please give your feedback in the comment section.

Happy, Learning! :)