DEV Community

Shuvo
Shuvo

Posted on

Common Array Opreations

  1. Create An Array This example shows three ways to create new array: first using array literal notation, then using the Array() constructor, and finally using String.prototype.split() to build the array from a string.
// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits.length);
// 2

// 'fruits' array created using the Array() constructor.
const fruits = new Array('Apple', 'Banana');
console.log(fruits.length);
// 2

// 'fruits' array created using String.prototype.split().
const fruits = 'Apple, Banana'.split(', ');
console.log(fruits.length);
// 2

Enter fullscreen mode Exit fullscreen mode

2.Create a string from an array
Use the join() method to create a string from array.

const fruits = ['Apple', 'Banana'];
const fruitsString = fruits.join(', ');
console.log(typeof fruitsString,fruitsString);
//string
// "Apple, Banana"
Enter fullscreen mode Exit fullscreen mode
  1. Access an array item by its index

Access items in array by specifying the index number of their position in the array.


const fruits = ['Apple', 'Banana'];

// The index of an array's first element is always 0.
fruits[0]; // Apple

// The index of an array's second element is always 1.
fruits[1]; // Banana

// The index of an array's last element is always one
// less than the length of the array.
fruits[fruits.length - 1]; // Banana

// Using a index number larger than the array's length
// returns 'undefined'.
fruits[99]; // undefined

Enter fullscreen mode Exit fullscreen mode
  1. ** Find the index of an item in an array ** The indexOf() method to find the position (index) of the string "Banana" in the fruits array.If no item of that index, it returns -1
const fruits = ['Apple', 'Banana'];
console.log(fruits.indexOf('Banana'));

Enter fullscreen mode Exit fullscreen mode
  1. Check if an array contains a certain item The fruits array contains "Banana" and "Cherry": first with the includes() method, and then with the indexOf() method to test for an index value that's not -1.
const fruits = ['Apple', 'Banana'];

fruits.includes('Banana'); // true
fruits.includes('Cherry'); // false

// If indexOf() doesn't return -1, the array contains the given item.
fruits.indexOf('Banana') !== -1; // true
fruits.indexOf('Cherry') !== -1; // false

Enter fullscreen mode Exit fullscreen mode

6.Append an item to an array

The push() method to append a new string to the fruits array.

const fruits = ['Apple', 'Banana'];
const newLength = fruits.push('Orange');
console.log(fruits);
// ["Apple", "Banana", "Orange"]
console.log(newLength);
// 3

Enter fullscreen mode Exit fullscreen mode

7.Remove multiple items from the end of an array

Using The splice() method to remove the last 3 items from the fruits array.

const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

Enter fullscreen mode Exit fullscreen mode
  1. Truncate an array down to just its first N items

This example uses the splice() method to truncate the fruits array down to just its first 2 items.

const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

Enter fullscreen mode Exit fullscreen mode

9.Remove the first item from an array

The shift() method to remove the first item from the fruits array. It returns the removed item and modifies the original array.


const fruits = ['Apple', 'Banana'];
const removedItem = fruits.shift();
console.log(fruits);
// ["Banana"]
console.log(removedItem);
// Apple

Enter fullscreen mode Exit fullscreen mode

10.Remove multiple items from the beginning of an array

splice() method to remove the first 3 items from the fruits array.

const fruits = ['Apple', 'Strawberry', 'Cherry', 'Banana', 'Mango'];
const start = 0;
const deleteCount = 3;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Banana", "Mango"]
console.log(removedItems);
// ["Apple", "Strawberry", "Cherry"]

Enter fullscreen mode Exit fullscreen mode

11.Add a new first item to an array

unshift() method to add, at index 0, a new item to the fruits array — making it the new first item in the array.This method return the array new length and modifies the array.


const fruits = ['Banana', 'Mango'];
const newLength = fruits.unshift('Strawberry');
console.log(fruits);
// ["Strawberry", "Banana", "Mango"]
console.log(newLength);
// 3

Enter fullscreen mode Exit fullscreen mode
  1. Remove a single item by index

The splice() method to remove the string "Banana" from the fruits array — by specifying the index position of "Banana".

const fruits = ['Strawberry', 'Banana', 'Mango'];
const start = fruits.indexOf('Banana');
const deleteCount = 1;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Strawberry", "Mango"]
console.log(removedItems);
// ["Banana"]

13.**Remove multiple items by index**

The **splice()** method to remove the strings "Banana" and "Strawberry" from the fruits array  by specifying the index position of "Banana", along with a count of the number of total items to remove.
Enter fullscreen mode Exit fullscreen mode


js
const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango'];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Apple", "Mango"]
console.log(removedItems);
// ["Banana", "Strawberry"]

  1. Replace multiple items in an array

This example uses the splice() method to replace the last 2 items in the fruits array with new items.

const fruits = ['Apple', 'Banana', 'Strawberry'];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount, 'Mango', 'Cherry');
console.log(fruits);
// ["Apple", "Mango", "Cherry"]
console.log(removedItems);
// ["Banana", "Strawberry"]

Enter fullscreen mode Exit fullscreen mode
  1. Iterate over an array

for...of loop to iterate over the fruits array, logging each item to the console.

const fruits = ['Apple', 'Mango', 'Cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Cherry

Enter fullscreen mode Exit fullscreen mode

15.Copy an array

first by using spread syntax, then by using the from() method, and then by using the slice() method.

const fruits = ['Strawberry', 'Mango'];

// Create a copy using spread syntax.
const fruitsCopy = [...fruits];
// ["Strawberry", "Mango"]

// Create a copy using the from() method.
const fruitsCopy = Array.from(fruits);
// ["Strawberry", "Mango"]

// Create a copy using the slice() method.
const fruitsCopy = fruits.slice();
// ["Strawberry", "Mango"]

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
jeremyfarrance profile image
Jeremy Farrance

Note: you spelled "Operations" wrong in the title of your post.

Very nice collection of examples, great effort, thank you!!