Day 10 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-05-19 07:24:51

Hey reader. Hope you are doing well.
In the last post we have read about arrays and some of its methods, taking our discussion further in this post we are going to look at some of the more array methods. 
So let's get started:)

## Converting Array to String

The JavaScript method `toString()` converts an array to a string of (comma separated) array values.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nev2wwvh9bdnk2borrx.png)

## Accessing negative index

We cannot use negative index directly JavaScript, i.e. we can't use arr[-2] as it will generate error. To resolve this problem `at(index)` was introduced in ES2022.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgy5uoezw4g64armzg6l.png)
So in this -2 represents the last second element.

## JavaScript Array `join()`

The `join()` method also joins all array elements into a string.
It behaves just like `toString()`, but in addition you can specify the separator.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux6me2jx5t3oo08i4d1h.png)

## JavaScript Array `pop()`

The `pop()` method removes the last element from an array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5x8zgcyetbec2j2xs4g.png)

## Deleting from random index

The `delete()` method is used to delete an element from array.
But it leaves `undefined` holes in array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5g2znynhse5z8hkhx9b.png)
If you look at above image closely you'll find `,,` at 2nd index.

To resolve this issue we have splice method.

## `Splice()` Method

With clever parameter setting, we can use splice() to remove elements without leaving "holes" in the array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y8sr1dx6qm590rn3vfp.png)
In this method the first argument is starting index and the second argument is the number of items to be removed.

Note that this method makes changes in original array. To resolve this problem we have `toSpliced()` method introduced in 2023 version.

## `toSpliced()` method

The Array toSpliced() method is a safe way to splice an array without altering the original array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opra9q47v4vw1xj9ohoy.png)

## `slice()` method

The `slice()` method slices out a piece of an array into a new array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41k4eoq48alvgap7nplf.png)

The difference between `splice()` and `slice()` is that `slice()` method does not remove elements from original array.
The important point is `slice()` returns a segment of an array whereas `toSpliced()` is mainly for making modifications and copying them to new array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uh260do61vsx1dfcnxy.png)

## `shift()` and `unshift()` method

The **`shift()`** method removes the first array element and "shifts" all other elements to a lower index.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5b7v1aby4z52xkjg1bh.png)
The `shift()` method returns the value that was "shifted out".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzvasbuxkpxmynffzeoq.png)

The **`unshift()`** method adds a new element to an array (at the beginning), and "unshifts" older elements.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfwj1s9kbzn8lt2jz22e.png)

## Merging Arrays

Concatenating two arrays or strings means joining them end-to-end.
We have different methods for concatenating arrays.

**`concat()` method**

The concat() method creates a new array by merging (concatenating) existing arrays.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaairp5o4r98k2eat7rc.png)
The `concat()` method does not change the existing arrays. It always returns a new array.
The `concat()` method can take any number of array arguments.

## Search Methods

**`indexOf()` method**

The `indexOf()` method searches an array for an element value and returns its position.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09jnzqaxhjhesb9olswl.png)
`indexOf()` returns -1 if the item is not found.
If the item is present more than once, it returns the position of the first occurrence.

**`lastIndexOf()` method**

`lastIndexOf()` is the same as `indexOf()`, but returns the position of the last occurrence of the specified element.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab3dzzgalj272j784apn.png)

**`include()` method**

This allows us to check if an element is present in an array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9dme65wapi0hkxa32gn.png)
`includes()` allows to check for NaN values. Unlike `indexOf()`.

**`find()` method**

The `find()` method returns the value of the first array element that passes a test function.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31af4hwy063watccbv1f.png)

Similary we have `findIndexOf()` method that returns index of first element that passes the test.
Also we have `findLast()` and `findLastIndexOf()` methods for finding last element that passes the test.

## Reversing an Array

The `reverse()` method reverses the elements in an array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i84v3nrnmo6ybnevle1g.png)
The `reverse()` method makes changes in original array to avoid this we have **`toReversed()`** method which is a safe way of reversing array without altering original array.

We have few more methods which we will discuss in next post. 
I hope you have understood it well.For any queries please comment.I'll try my best to solve your queries.
Till then stay connected and don't forget to follow me.
If you like the post please leave some reaction:)