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.

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.

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.

JavaScript Array pop()

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

Deleting from random index

The delete() method is used to delete an element from array.
But it leaves undefined holes in array.

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.

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.

slice() method

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

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.

shift() and unshift() method

The shift() method removes the first array element and "shifts" all other elements to a lower index.

The shift() method returns the value that was "shifted out".

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

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.

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.

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.

include() method

This allows us to check if an element is present in an array.

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.

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.

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

Comments

[Jon Randy 🎖️]

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

[Akshat Sharma]

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

[Jon Randy 🎖️]

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