Basic Array Methods in JavaScript

In this article, we will learn about different basic array methods in JavaScript.

Adding and Removing Elements

Some basic JavaScript array methods for adding and removing elements ?

Method Description
Array.push() To add elements to the end of the array.
Array.pop() To remove elements from the end of the array.
Array.unshift() To add elements to the front of the array
Array.shift() To remove elements from the front of the array.
Array.splice() To add or remove elements from the splice

Example

Following is the code for the basic array methods ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
 font-size: 18px;
 font-weight: 500;
 color: red;
}
.result {
 color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Basic array methods</h1>
<div class="sample">arr =</div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to apply the array methods on the above array</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = ["A", "B", 1, 2, 3, 5];
sampleEle.innerHTML += arr;
document.querySelector(".Btn").addEventListener("click", () => {
 arr.pop();
 resultEle.innerHTML += "arr.pop() = " + arr + "<br>";
 arr.push(22);
 resultEle.innerHTML += "arr.push(22) = " + arr + "<br>";
 arr.shift();
 resultEle.innerHTML += "arr.shift() = " + arr + "<br>";
 arr.unshift();
 resultEle.innerHTML += "arr.unshift(55) = " + arr + "<br>";
 arr.splice(3, 0, "D", "E", "F");
 resultEle.innerHTML += 'Array.splice(3,0,"D","E","F") = ' + arr;
});
</script>
</body>
</html>

Output

On clicking the ?CLICK HERE' button ?

Searching elements

Some basic JavaScript array methods for Searching elements ?

Method Description
Array.indexOf() Returns the index of the first occurrence of an element, or -1 if not found.
Array.includes() Checks if an array contains a specified element, returning true or false.

Example

Following is the code for the basic array methods ?


let names = ["Alice", "Bob", "Charlie"];
console.log(names.includes("Alice"));
console.log(names.indexOf("Bob"));

Output

true
1      

Iterating and transforming arrays

Some basic JavaScript array methods for Iterating and transforming arrays ?

Method Description
Array.forEach() Executes a provided function once for each array element.
Array.map() Creates a new array by applying a function to each element.
Array.filter() Creates a new array with elements that satisfy a specified condition.

Example

Following is the code for the basic array methods ?

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log("Original Numbers:");
numbers.forEach(num => console.log(num));


let squaredNumbers = numbers.map(num => num * num);
console.log("Squared Numbers:", squaredNumbers);

let evenSquares = squaredNumbers.filter(num => num % 2 === 0);
console.log("Even Squared Numbers:", evenSquares);

Output

Original Numbers: 1 2 3 4 5 6 7 8 9 10
Squared Numbers: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
Even Squared Numbers: [4, 16, 36, 64, 100]

Sorting and reversing

Some basic JavaScript array methods for Sorting and reversing ?

Method Description
Array.sort() Sorts the elements of an array in place.
Array.reverse() Reverses the order of elements in an array.

Example

Following is the code for the basic array methods ?

let numbers = [5, 2, 8, 1]
numbers.sort((a, b) => a - b);
console.log(numbers); 
let letters = ["a", "b", "c"];
letters.reverse();
console.log(letters);

Output

[1, 2, 5, 8]
["c", "b", "a"]
Alshifa Hasnain
Alshifa Hasnain

Converting Code to Clarity

Updated on: 2025-02-24T18:27:46+05:30

634 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements