Common Array Opreations
Tags: javascript, webdev, programming, productivity
Published: 2022-06-14 17:02:06

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.

```js 
// '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

```

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

```js 
const fruits = ['Apple', 'Banana'];
const fruitsString = fruits.join(', ');
console.log(typeof fruitsString,fruitsString);
//string
// "Apple, Banana"
```

3. **Access an array item by its index**

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

```js

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

 ```

4. ** 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**

```js
const fruits = ['Apple', 'Banana'];
console.log(fruits.indexOf('Banana'));

 ```

5. **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.

```js
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

 ```

6.**Append an item to an array**

 The push() method to append a new string to the fruits array.
```js
const fruits = ['Apple', 'Banana'];
const newLength = fruits.push('Orange');
console.log(fruits);
// ["Apple", "Banana", "Orange"]
console.log(newLength);
// 3

```

7.**Remove multiple items from the end of an array**

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

```js
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"]

```

8. **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.

```js
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"]

```

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.

```js

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

 ```

10.**Remove multiple items from the beginning of an array**

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

```js
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"]

 ```

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.

```js

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

 ```

12. **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".

```js 
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.
```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"]

13. **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.
 ```js
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"]

 ```

14. **Iterate over an array**

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

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

 ```

15.**Copy an array**

first by using **spread syntax**, then by using the **from()** method, and then by using the **slice()** method.
```js
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"]

 ```