JavaScript arrays are one of the most powerful and versatile data structures in web development. They allow us to store and manipulate collections of data in a variety of ways. This blog post will teach you the most important JavaScript array methods, including push(), pop(), unshift(), shift(), unshift(), indexOf(), splice(), slice(), join(), and reduce(). By learning these methods, you can write more efficient and powerful code.
1. push()
By utilizing the push() method, you can effortlessly append an element to the end of an array, like in the instance below where “banana” is added to the fruits array’s end:
fruits = ['apple', 'orange', 'pear'];
fruits.push('banana');
console.log(fruits);
// Output ['apple', 'orange', 'pear', 'banana']
2. pop()
By utilizing the pop() method, the last item within an array can be extracted and deleted, with its value being returned. For instance, take the following code where the last element of the fruits array is removed and stored within the lastFruit variable:
fruits = ['apple', 'orange', 'pear']; lastFruit = fruits.pop(); console.log(lastFruit); // Output: pear console.log(fruits); // Output: ['apple', 'orange']
3. unshift()
The unshift() method adds an element to the beginning of an array. For example, the following code would add the element “banana” to the beginning of the array fruits:
fruits = ['apple', 'orange', 'pear'];
fruits.unshift('banana');
console.log(fruits);
// Output ['banaba', 'apple', 'orange', 'pear']
4. shift()
The shift() method removes the first element from an array and returns it. For example, the following code would remove the first element from the array fruits and store it in the variable firstFruit:
fruits = ['apple', 'orange', 'pear']; firstFruit = fruits.shift(); console.log(firstFruit); // Output: apple console.log(fruits); // Output: ['orange', 'pear']
5. indexOf()
The indexOf() method returns the first index at which a given element can be found in an array, or -1 if it is not present.
const fruits = ['apple', 'banana', 'orange'];
const orangeIndex = fruits.indexOf('orange');
console.log(orangeIndex); // Output: 2
6. join()
The join() method creates and returns a new string by concatenating all of the elements in an array.
const fruits = ['apple', 'banana', 'orange'];
const fruitString = fruits.join(', ');
console.log(fruitString); // Output: 'apple, banana, orange'
7. concat()
The concat() method returns a new array that consists of the elements from two or more arrays.
const fruits = ['apple', 'banana']; const vegetables = ['tomato', 'broccoli']; const food = fruits.concat(vegetables); console.log(food); // Output: ['apple', 'banana', 'tomato', 'broccoli']
8. splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.
const fruits = ['apple', 'banana', 'orange', 'pear']; fruits.splice(1, 2, 'grape', 'kiwi'); console.log(fruits); // Output: ['apple', 'grape', 'kiwi', 'pear']
9. slice()
The slice() method returns a shallow copy of a portion of an array into a new array object. This method does not modify the original array.
const fruits = ['apple', 'banana', 'orange', 'pear']; const citrus = fruits.slice(1, 3); console.log(citrus); // Output: ['banana', 'orange']
10. reduce()
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. The reduce() method does not modify the original array.
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue); console.log(sum); // Output: 15
