Exploring JavaScript Array Methods with Examples

JavaScript arrays are versatile and offer a wide range of built-in methods to manipulate, iterate, and manage data efficiently. Understanding these methods is crucial for effective programming. Let’s delve into some commonly used array methods with pra…


This content originally appeared on DEV Community and was authored by Suleman Ahmed

JavaScript arrays are versatile and offer a wide range of built-in methods to manipulate, iterate, and manage data efficiently. Understanding these methods is crucial for effective programming. Let's delve into some commonly used array methods with practical examples.

Array Methods

  • 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');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
  • pop(): Removes the last element from an array and returns that element. 
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
  • shift(): Removes the first element from an array and returns that removed element. 
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
  • unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array. 
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
  • forEach(): Executes a provided function once for each array element. 
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
  • map(): Creates a new array populated with the results of calling a provided function on every element in the calling array. 
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
  • filter(): Creates a new array with all elements that pass the test implemented by the provided function. 
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
  • find(): Returns the first element in the array that satisfies the provided testing function. 
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
  • reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. 
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
  • indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present. 
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
  • lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present. 
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3

These array methods are fundamental tools for manipulating data structures in JavaScript efficiently. By mastering these methods, you'll gain a powerful toolkit for handling arrays in various programming scenarios.


This content originally appeared on DEV Community and was authored by Suleman Ahmed


Print Share Comment Cite Upload Translate Updates
APA

Suleman Ahmed | Sciencx (2024-07-13T04:56:40+00:00) Exploring JavaScript Array Methods with Examples. Retrieved from https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/

MLA
" » Exploring JavaScript Array Methods with Examples." Suleman Ahmed | Sciencx - Saturday July 13, 2024, https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/
HARVARD
Suleman Ahmed | Sciencx Saturday July 13, 2024 » Exploring JavaScript Array Methods with Examples., viewed ,<https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/>
VANCOUVER
Suleman Ahmed | Sciencx - » Exploring JavaScript Array Methods with Examples. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/
CHICAGO
" » Exploring JavaScript Array Methods with Examples." Suleman Ahmed | Sciencx - Accessed . https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/
IEEE
" » Exploring JavaScript Array Methods with Examples." Suleman Ahmed | Sciencx [Online]. Available: https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/. [Accessed: ]
rf:citation
» Exploring JavaScript Array Methods with Examples | Suleman Ahmed | Sciencx | https://www.scien.cx/2024/07/13/exploring-javascript-array-methods-with-examples/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts