Categories
JavaScript

Good Parts of JavaScript — Array Methods From the Standard Library

Spread the love

JavaScript is one of the most popular programming languages in the world. It can do a lot and have some features that are ahead of many other languages.

In this article, we’ll look at some useful array methods from the JavaScript standard library.

Array

The JavaScript standard library has many useful array methods.

array.concat(item…)

The concat method is used to combine multiple arrays into one or make a shallow copy of an array.

For instance, we can write:

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = a.concat(b, 7);

We can pass in array or values into an array.

And we get [1, 2, 3, 4, 5, 6, 7] as the value of c .

array.join(separator)

The join method is used to combine all the entries of an array into a string with a given separator between them.

For instance, we can write:

const a = [1, 2, 3];
const b = a.join(',');

Then b is '1,2,3' .

array.pop( )

pop lets us remove the last element from an array and return the removed item.

For instance, we can write:

const a = [1, 2, 3];
const b = a.pop();

We get 3 for b because we removed 3 from a .

[1, 2] is the value for a .

array.push(item…)

push lets us add one or more items to the end of the array.

The new length of the array is returned.

For instance, we can write:

const a = [1, 2, 3];
const b = a.push(4, 5);

We get that a is [1, 2, 3, 4, 5] and b is 5.

array.reverse( )

The reverse method reverses the array entries within an array and returns the new array with the entries reversed.

For instance, we can write:

const a = [1, 2, 3];
const b = a.reverse();

Then we get that b is [3, 2, 1] .

array.shift( )

shift removes the first element of an array and returns it.

If the array is empty, then undefined is returned.

shift is usually a lot slower than pop .

For instance, we can write:

const a = [1, 2, 3];
const b = a.shift();

The b is 1 and a is [2, 3] .

array.slice(start,end)

slice returns a shallow copy of an array. While the slice operator is being done, we can modify it by specifying the start and end indexes.

For instance, we can write:

const a = [1, 2, 3];
const b = a.slice(0, 1);

Then we get that b is [1] since we return the portion of a between index 0 and 1.

array.sort(comparefn)

The sort method lets us sort the contents of an array in place.

By default, it assumes the elements that are sorted are strings.

It doesn’t test the content of the elements before sorting them.

All it does is convert them to strings then sort them.

Therefore, if we write:

const a = [3, 15, 16, 23];
a.sort();

We get the new value of a is:

[15, 16, 23, 3]

which is probably not what we want.

sort takes a callback which we can use to sort items our way.

So we can pass in a callback to sort numbers properly.

If we want to sort numbers in ascending order, we can write:

const a = [3, 15, 16, 23];
a.sort((a, b) => a - b);

Then a becomes [3, 15, 16, 23] .

The callback takes 2 parameters, which are 2 numbers to compare, and a negative number is returned if we want the first to come after the second.

And positive if we want to reverse the order.

0 should be returned by the callback if we want the order to stay the same.

array.splice(start, deleteCount, item…)

splice can be used to remove elements from an array and also replace the slow with new items.

For instance, we can write:

const a = ['a', 'b', 'c', 'd', 'e'];
const b = a.splice(1, 1);

The code above removes one element starting with index 1.

So 'b' is removed and returned by splice . So b is [“b”] .

a is [“a”, “c”, “d”, “e”] .

We can replace 'b' with 'f' and 'g' by writing:

const b = a.splice(1, 1, 'f', 'g');

and we get a is [“a”, “f”, “g”, “c”, “d”, “e”] while b is the same.

Conclusion

There’re many useful array methods that make our lives much easier when we have to work with JavaScript arrays.

We should use them instead of loops.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *