Basic Array Methods
push() - adding elements to the end of an array
To add one or more elements to the end of an array, use the
It's like adding one extra candy bar to your candy jar; it makes your array sweeter.
let candies = ['gummies', 'lollipops', 'chocolate']; candies.push('jelly beans'); console.log(candies); // Output: ['gummies', 'lollipops', 'chocolate', 'jelly beans']
pop() - removing elements from the end of an array
We can take elements out of an array in the same way that we can add them.
Similar to plucking the last piece of candy out of your candy jar, the
pop() method removes the last element of an array.
candies.pop(); console.log(candies); // Output: ['gummies', 'lollipops', 'chocolate']
shift() - removing elements from the beginning of an array
shift() method works similarly to the
pop() method, except it removes the first element of an array instead of the last.
candies.shift(); console.log(candies); // Output: ['lollipops', 'chocolate']
unshift() - adding elements to the beginning of an array
unshift() method is used to add elements to the beginning of an array, similar to the
push() method but for the start of the array.
candies.unshift('gummies'); console.log(candies); // Output: ['gummies', 'lollipops', 'chocolate']
indexOf() - finding the index of an element in an array
You might occasionally need to know the array element's index.
You can do that by using the
let index = candies.indexOf('chocolate'); console.log(index); // Output: 2
slice() - extracting a portion of an array
By using the
slice() method, you can take a subset of an array and return it as a brand-new array. This is helpful if you wish to divide an array into sections for different uses.
let chocolates = candies.slice(2); console.log(chocolates); // Output: ['chocolate']
splice() - adding or removing elements from a specific index
splice() method is like a combination of
unshift(). It allows you to add or remove elements from a specific index in an array.
candies.splice(1, 0, 'jelly beans'); console.log(candies); // Output: ['gummies', 'jelly beans', 'lollipops', 'chocolate']; candies.splice(1, 1); console.log(candies); // Output: ['gummies', 'lollipops', 'chocolate']
Advanced Array Methods
map() - transforming each element in an array
This method allows you to "map out" a transformation for each element in an array. It's like having a GPS for your data, guiding it from point
A to point
For example, let's say you have a list of numbers and you want to square each one. The
map() method makes this a piece of cake:
const numbers = [1, 2, 3, 4, 5]; const squaredNumbers = numbers.map(num => num * num); console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
filter() - filtering elements based on a condition
This method is like a filter for your data, allowing you to select only the elements that meet certain conditions.
For example, let's say you have a list of temperatures and you only want to keep the ones that are above freezing. The
filter() method to the rescue!
const temperatures = [32, 45, 12, 67, -5]; const aboveFreezing = temperatures.filter(temp => temp > 32); console.log(aboveFreezing); // Output: [45, 67]
reduce() - reducing an array to a single value
This method reduces your array to a single value, like reducing a complex equation to a simplified answer.
For example, let's say you have a list of expenses and you want to find the total cost. The
reduce() method makes this a snap:
const expenses = [50, 100, 75, 200]; const totalCost = expenses.reduce((accumulator, expense) => accumulator + expense, 0); console.log(totalCost); // Output: 425
These techniques can be used to add or remove elements from arrays, find the index of an element, extract a section of an array, transform each element in an array, conditionally filter elements, and reduce an array to a single value.
So don't be hesitant to delve into the world of arrays and begin learning about these techniques. By mastering them, you will become a more capable and effective developer in addition to making your coding journey easier.
- Exploring Falsy & Truthy Values: A Comprehensive Guide
- Equality Operators: == vs. ===