An array is a data structure that holds a collection of elements of the same type. JavaScript provides several built-in methods that you can use to manipulate arrays. So we use the array method to manipulate the array.
let's explore some methods in the array.
push(): Adds one or more elements to the end of an array and returns the new length of the array.
let fruits = ['apple', 'banana'];
fruits.push('orange', 'grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']
The push() method to add the elements "orange" and "grape" to the end of the fruits array.
pop(): Removes and returns the last element of an array.
let numbers = [1, 2, 3, 4, 5];
let lastNumber = numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4]
console.log(lastNumber); // Output: 5
The pop() method to remove the last element of the numbers array and store it in the lastNumber variable.
shift(): Removes and returns the first element of an array.
let numbers = [1, 2, 3, 4, 5];
let firstNumber = numbers.shift();
console.log(numbers); // Output: [2, 3, 4, 5]
console.log(firstNumber); // Output: 2
The shift() method remove the first element of the numbers array and store in the firstnumber variable.
unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
let numbers = [2, 3, 4, 5];
let newLength = myArray.unshift(1);
console.log(myArray); // Output: [1, 2, 3, 4, 5]
console.log(newLength); // Output: 5
An array numbers with values [2, 3, 4, 5]. We then use the unshift() method to add the value 1 to the beginning of the array. The resulting array will be [1, 2, 3, 4, 5], and the newLength variable will contain the value 5.
concat(): Joins two or more arrays and returns a new array.
let myArray1 = [1, 2, 3];
let myArray2 = [4, 5, 6];
let newArray = myArray1.concat(myArray2);
console.log(myArray1); // Output: [1, 2, 3]
console.log(myArray2); // Output: [4, 5, 6]
console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]
we create two arrays myArray1 and myArray2 with values [1, 2, 3] and [4, 5, 6] respectively. We then use the concat() method to merge the two arrays into a new array newArray. The resulting array will be [1, 2, 3, 4, 5, 6]. You can also concat() more than two arrays.
slice(): Returns a portion of an array as a new array.
let numbers = [1, 2, 3, 4, 5];
let slice1 = numbers.slice(1, 3);
let slice2 = numbers.slice(-2);
console.log(slice1); // Output: [2, 3]
console.log(slice2); // Output: [4, 5]
In this example, we use the slice() method to extract a portion of the numbers array. The first slice1 variable will contain elements from index 1 to 2 (not including 3), while the second slice2 variable will contain the last two elements of the array.
splice(): Adds or removes elements from an array and returns the removed elements.
In this code snippet, we remove elements from an array.
let myArray = ["apple", "banana", "cherry", "date"];
myArray.splice(1, 2);
console.log(myArray); // Output: ["apple", "date"]
In this example, we Adding elements to an array:
let myArray = ["apple", "banana", "cherry", "date"];
myArray.splice(2, 0, "orange", "kiwi");
console.log(myArray); // Output: ["apple", "banana", "orange", "kiwi", "cherry", "date"]
The splice() method to add two new elements, "orange" and "kiwi", at index position 2. The resulting array will be ["apple", "banana", "orange", "kiwi", "cherry", "date"].
There are some other uses of splice() method like replacing elements in the array.
indexOf(): Returns the first index at which a given element can be found in an array, or -1 if it is not present.
let fruits = ['apple', 'banana', 'orange', 'grape'];
let index1 = fruits.indexOf('banana');
let index2 = fruits.indexOf('pear');
console.log(index1); // Output: 1
console.log(index2); // Output: -1
we use the indexOf() method to find the index of the element "banana" in the fruits array. The first index1 variable will contain the value 1, which is the index of the "banana" element. The second index2 variable will contain the value -1, which indicates that the "pear" element is not present in the array.
forEach(): Calls a function for each element in an array.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number * 2);
});
// Output:
// 2
// 4
// 6
// 8
// 10
The forEach() method to iterate over the numbers array and print each element multiplied by 2 to the console.
map(): Creates a new array with the results of calling a provided function on every element in the original array.
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
we use the map() method to create a new array containing each element of the numbers array multiplied by 2. The resulting doublednumbers array will contain the values [2, 4, 6, 8, 10].
every() to test if all elements in an array satisfy a condition or not.
let numbers = [1, 2, 3, 4, 5];
let result1 = numbers.every(function(number) {
return number > 0;
});
let result2 = numbers.every(function(number) {
return number > 3;
});
console.log(result1); // Output: true
console.log(result2); // Output: false
The every() method to test if all elements in the numbers array satisfy a specified condition. The first result1 variable will be true because all numbers in the array are greater than 0, while the second result2 variable will be false because not all numbers in the array are greater than 3.
sort() to sort the elements in an array
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
console.log(numbers); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
find() to retrieve the first matching element from an array.
let students = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
let result1 = students.find(function(student) {
return student.id === 2;
});
let result2 = students.find(function(student) {
return student.name === 'David';
});
console.log(result1); // Output: { id: 2, name: 'Bob' }
console.log(result2); // Output: undefined
The some() method to test if at least one element in the numbers array satisfies a specified condition. The first result1 variable will be true because there is at least one number in the array greater than 3, while the second result2 variable will be false because there are no negative numbers in the array.
some() to test if at least one element in an array satisfies a condition.
let numbers = [1, 2, 3, 4, 5];
let result1 = numbers.some(function(number) {
return number > 3;
});
let result2 = numbers.some(function(number) {
return number < 0;
});
console.log(result1); // Output: true
console.log(result2); // Output: false
The some() method to test if at least one element in the numbers array satisfies a specified condition. The first result1 variable will be true because there is at least one number in the array greater than 3, while the second result2 variable will be false because there are no negative numbers in the array.
In this blog, we only talk about some important array methods but there are lots of array methods that exist in the array like reverse and so many method
Thank you.