DEV Community

Akshat Sharma
Akshat Sharma

Posted on

Day 10 of 30 of JavaScript

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

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

JavaScript Array pop()

The pop() method removes the last element from an array.
Image description

Deleting from random index

The delete() method is used to delete an element from array.
But it leaves undefined holes in array.
Image description
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
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

slice() method

The slice() method slices out a piece of an array into a new array.
Image description

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

shift() and unshift() method

The shift() method removes the first array element and "shifts" all other elements to a lower index.
Image description
The shift() method returns the value that was "shifted out".
Image description

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements.
Image description

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

include() method

This allows us to check if an element is present in an array.
Image description
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

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
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:)

Top comments (3)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

We can't use negative indexes directly with arrays, but we can make them work using a Proxy:

const arr = [1, 2, 3, 4]

const handler = {
  get(target, prop, receiver) {
    // try to convert property to a number
    const n = +prop
    // if it's a number less than zero, return the correct item from the array
    if (!isNaN(n) && n<0) {
      return Reflect.get(target, target.length + n, receiver)
    // otherwise continue as normal with the property
    } else {
      return Reflect.get(...arguments)
    }
  }
}

const myArr = new Proxy(arr, handler)

console.log(myArr[0])  // 1
console.log(myArr[2])  // 3
console.log(myArr[-1])  // 4
console.log(myArr[-3])  // 2
Enter fullscreen mode Exit fullscreen mode
Collapse
 
akshat0610 profile image
Akshat Sharma

Thanks for taking this into my consideration but it is better to use at() to make negative index work.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Yes, of course. Was just pointing out a way it can be done 👍