Arrays Method

Array Methods in JavaScript

Arrays in JavaScript provide many built-in methods that help us add, remove, search, modify, and manipulate elements easily.

JavaScript provides many array methods. Some commonly used methods are:

• push()
• pop()
• unshift()
• shift()
• slice()
• splice()
• concat()
• join()
• indexOf()
• includes()
• reverse()
• sort()

1. push()

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

let fruits = ["Apple", "Mango"];

fruits.push("Orange");

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

The push() method modifies the original array.

We can also add multiple elements.

let fruits = ["Apple"];

fruits.push("Mango", "Orange");

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

2. pop()

The pop() method is used to remove the last element from an array.

let fruits = ["Apple", "Mango", "Orange"];

fruits.pop();

console.log(fruits);

Output:

["Apple", "Mango"]

Here, "Orange" is removed because it is the last element.

The pop() method also returns the removed element.

let fruits = ["Apple", "Mango", "Orange"];

let removedFruit = fruits.pop();

console.log(removedFruit);

Output:

Orange

3. unshift()

The unshift() method is used to add one or more elements to the beginning of an array.

let fruits = ["Mango", "Orange"];

fruits.unshift("Apple");

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

Here, "Apple" is added at the beginning.

4. shift()

The shift() method is used to remove the first element from an array.

let fruits = ["Apple", "Mango", "Orange"];

fruits.shift();

console.log(fruits);

Output:

["Mango", "Orange"]

Here, "Apple" is removed because it is the first element.

5. slice()

The slice() method is used to extract a portion of an array and return it as a new array.

It does not modify the original array.

let numbers = [10, 20, 30, 40, 50];

let result = numbers.slice(1, 4);

console.log(result);

Output:

[20, 30, 40]

The first argument is the starting index, and the second argument is the ending index.

The ending index is not included.

slice(1, 4)

Starts from index 1 → 20
Ends before index 4 → 50 is not included

The original array remains unchanged.

6. splice()

The splice() method is used to add, remove, or replace elements in an array.

Unlike slice(), the splice() method modifies the original array.

Removing Elements

let fruits = ["Apple", "Mango", "Orange", "Banana"];

fruits.splice(1, 2);

console.log(fruits);

Output:

["Apple", "Banana"]

Here:

• 1 is the starting index.
• 2 is the number of elements to remove.

Therefore, "Mango" and "Orange" are removed.

Adding Elements

let fruits = ["Apple", "Orange"];

fruits.splice(1, 0, "Mango");

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

Here:

• 1 is the position where the new element is added.
• 0 means no elements are removed.
• "Mango" is the element to add.

7. concat()

The concat() method is used to combine two or more arrays.

let frontend = ["HTML", "CSS"];
let backend = ["JavaScript", "Node.js"];

let technologies = frontend.concat(backend);

console.log(technologies);

Output:

["HTML", "CSS", "JavaScript", "Node.js"]

The concat() method returns a new array and does not modify the original arrays.

8. join()

The join() method is used to combine all array elements into a single String.

let languages = ["HTML", "CSS", "JavaScript"];

let result = languages.join(", ");

console.log(result);

Output:

HTML, CSS, JavaScript

We can use different separators.

let numbers = [1, 2, 3];

console.log(numbers.join("-"));

Output:

1-2-3

9. indexOf()

The indexOf() method is used to find the index position of an element.

let fruits = ["Apple", "Mango", "Orange"];

console.log(fruits.indexOf("Mango"));

Output:

1

Here, "Mango" is located at index 1.

If the element does not exist, indexOf() returns -1.

console.log(fruits.indexOf("Banana"));

Output:

-1

10. includes()

The includes() method checks whether an array contains a specific element.

It returns either true or false.

let fruits = ["Apple", "Mango", "Orange"];

console.log(fruits.includes("Mango"));

Output:

true

Another example:

console.log(fruits.includes("Banana"));

Output:

false

11. reverse()

The reverse() method is used to reverse the order of elements in an array.

let numbers = [1, 2, 3, 4];

numbers.reverse();

console.log(numbers);

Output:

[4, 3, 2, 1]

The reverse() method modifies the original array.

12. sort()

The sort() method is used to sort the elements of an array.

let fruits = ["Orange", "Apple", "Mango"];

fruits.sort();

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

By default, sort() converts elements to strings and sorts them alphabetically.

Sorting Numbers

When sorting numbers, we should provide a comparison function.

let numbers = [40, 10, 100, 5];

numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbers);

Output:

[5, 10, 40, 100]

Here, the numbers are sorted in ascending order.

For descending order:

let numbers = [40, 10, 100, 5];

numbers.sort(function(a, b) {
    return b - a;
});

console.log(numbers);

Output:

[100, 40, 10, 5]

Array Methods That Modify the Original Array

Some array methods directly modify the original array.

Method	Operation
push()	Adds elements to the end
pop()	Removes the last element
unshift()	Adds elements to the beginning
shift()	Removes the first element
splice()	Adds or removes elements
reverse()	Reverses the array
sort()	Sorts the array

Array Methods That Return a New Value

Some methods do not modify the original array.

Method	Operation
slice()	Returns a portion of an array
concat()	Combines arrays
join()	Converts elements into a String
indexOf()	Returns the index of an element
includes()	Checks whether an element exists

Conclusion

Array methods make it easier to work with arrays in JavaScript. Methods such as push() and unshift() are used to add elements, while pop() and shift() are used to remove elements. slice() and splice() are used to extract or modify parts of an array. Other methods such as concat(), join(), indexOf(), includes(), reverse(), and sort() help us perform different operations efficiently.

Understanding array methods is important because arrays are widely used in JavaScript applications for storing, managing, and manipulating collections of data.