The Top 10 JavaScript Array Functions Every Developer Should Use

JavaScript provides a variety of array functions that make it easier to manipulate arrays. Here are some of the most commonly used and useful array functions with explanations.

1. push(): Adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['apple', 'orange'];
fruits.push('banana');
// fruits is now ['apple', 'orange', 'banana']

Explanation:

• We declare an array called fruits containing two elements.
• We use the push method to add the string 'banana' to the end of the fruits array.
• The push method modifies the original array, and the new length of the array is returned.

2. pop(): Removes the last element from an array and returns that element.

const fruits = ['apple', 'orange', 'banana'];
const lastFruit = fruits.pop();
// lastFruit is 'banana', fruits is now ['apple', 'orange']

Explanation:

• We declare an array called fruits containing three elements.
• We use the pop method to remove and retrieve the last element ('banana') from the fruits array.
• The removed element is stored in the variable lastFruit, and the modified array is ['apple', 'orange'].

3. shift(): Removes the first element from an array and returns that element.

const fruits = ['apple', 'orange', 'banana'];
const firstFruit = fruits.shift();
// firstFruit is 'apple', fruits is now ['orange', 'banana']

Explanation:

• We declare an array called fruits containing three elements.
• We use the shift method to remove and retrieve the first element ('apple') from the fruits array.
• The removed element is stored in the variable firstFruit, and the modified array is ['orange', 'banana'].

4. unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

const fruits = ['orange', 'banana'];
fruits.unshift('apple');
// fruits is now ['apple', 'orange', 'banana']

Explanation:

• We declare an array called fruits containing two elements.
• We use the unshift method to add the string 'apple' to the beginning of the fruits array.
• The unshift method modifies the original array, and the new length of the array is returned.

5. concat(): Combines two or more arrays.

const fruits = ['apple', 'orange'];
const vegetables = ['carrot', 'broccoli'];
const combined = fruits.concat(vegetables);
// combined is ['apple', 'orange', 'carrot', 'broccoli']

Explanation:

• We declare two arrays, fruits and vegetables, each containing two elements.
• We use the concat method to combine the fruits and vegetables arrays into a new array called combined.
• The original arrays remain unchanged, and combined is ['apple', 'orange', 'carrot', 'broccoli'].

6. slice(): Returns a shallow copy of a portion of an array.

const fruits = ['apple', 'orange', 'banana', 'kiwi'];
const slicedFruits = fruits.slice(1, 3);
// slicedFruits is ['orange', 'banana'], fruits is unchanged

Explanation:

• We declare an array called fruits containing four elements.
• We use the slice method to create a new array, slicedFruits, by extracting elements from index 1 to 2 (exclusive) from the fruits array.
• The original fruits array remains unchanged, and slicedFruits is ['orange', 'banana'].

const fruits = ['apple', 'orange', 'banana', 'kiwi', 'mango'];
const slicedFruits = fruits.slice(1, 4);
// slicedFruits is ['orange', 'banana', 'kiwi'], fruits is unchanged

Explanation:

• We declare an array called fruits with five elements.
• Using slice(1, 4), we create a new array called slicedFruits that includes elements from index 1 to 3 (excluding the element at index 4) from the fruits array.
• The original fruits array remains unchanged, and slicedFruits is ['orange', 'banana', 'kiwi'].

7. splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

Remove Elements

const fruits = ['apple', 'orange', 'banana', 'kiwi', 'mango'];
fruits.splice(2, 2);
// fruits is now ['apple', 'orange', 'mango']

Explanation:

• We declare an array called fruits with five elements.
• Using splice(2, 2), we remove two elements starting from index 2 in the fruits array.
• The modified fruits array is ['apple', 'orange', 'mango'].

Remove and Add Elements

const fruits = ['apple', 'orange', 'banana', 'kiwi', 'mango'];
fruits.splice(2, 1, 'grape', 'pineapple');
// fruits is now ['apple', 'orange', 'grape', 'pineapple', 'kiwi', 'mango']

Explanation:

• We declare an array called fruits with five elements.
• Using splice(2, 1, 'grape', 'pineapple'), we remove one element at index 2 and add two elements (‘grape’ and ‘pineapple’) at that position in the fruits array.
• The modified fruits array is ['apple', 'orange', 'grape', 'pineapple', 'kiwi', 'mango'].

Add Elements Without Removing

const fruits = ['apple', 'orange', 'banana', 'kiwi', 'mango'];
fruits.splice(2, 0, 'grape', 'pineapple');
// fruits is now ['apple', 'orange', 'grape', 'pineapple', 'banana', 'kiwi', 'mango']

Explanation:

• We declare an array called fruits with five elements.
• Using splice(2, 0, 'grape', 'pineapple'), we don’t remove any elements, but we add two elements (‘grape’ and ‘pineapple’) at index 2 in the fruits array.
• The modified fruits array is ['apple', 'orange', 'grape', 'pineapple', 'banana', 'kiwi', 'mango'].

8. indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['apple', 'orange', 'banana'];
const index = fruits.indexOf('orange');
// index is 1

Explanation:

• We declare an array called fruits containing three elements.
• We use the indexOf method to find the index of the element 'orange' in the fruits array.
• The variable index is assigned the value 1 since 'orange' is at index 1 in the array.

9. filter(): Creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers is [2, 4]

Explanation:

• We declare an array called numbers containing five elements.
• We use the filter method to create a new array, evenNumbers, containing only the elements of numbers that satisfy the condition (even numbers).
• The callback function checks if each number is even (num % 2 === 0), resulting in evenNumbers being [2, 4].

10. map(): Creates a new array with the results of calling a provided function on every element in the array.

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map(num => num * num);
// squaredNumbers is [1, 4, 9, 16]

Explanation:

• We declare an array called numbers containing four elements.
• We use the map method to create a new array, squaredNumbers, by applying a function that squares each element in the numbers array.
• The resulting squaredNumbers array is [1, 4, 9, 16].

To Learn More JavaScript Functions Click Here

“Mastering JavaScript Arrays: 10 Must-Know Functions for Developers”
“JavaScript Array Functions: A Comprehensive Guide to Boost Your Coding Skills”
“Unlocking the Power of Arrays: Top 10 Essential JavaScript Functions”

“JavaScript Wizardry: Dive into the Most Useful Array Functions for Efficient Coding”
“Arrays Unleashed: A Developer’s Guide to JavaScript’s Essential Functions”
“Code Like a Pro: 10 Game-Changing JavaScript Array Functions You Need to Know”

“JavaScript Array Mastery: Your Roadmap to the Most Powerful Functions”
“Boost Your Productivity: The Top 10 JavaScript Array Functions Every Developer Should Use”
“JavaScript Array Ninja: Unraveling the Secrets of the Most Valuable Functions”
“Efficient Coding with JavaScript Arrays: A Deep Dive into the Best Functions for Developers”