3 JavaScript Array Methods Every Developer Should Know

In this article, we will discuss:

1. join()
2. split()
3. sort()

Why should every JavaScript developer know these methods? Arrays are important elements you’ll need in your code. These methods can help make your code more elegant and presentable.

You can make your project run without these methods but for that, you will have to write unnecessary lines of code, of which there was no use in the first place.

So, let’s get started. We will first see some basic methods like join() and split(), and then we will move to sort().

1. Join()

Think of a scenario where the users input some values in the array and later wants to see it as a message (string).

This is where the join() method comes in, it converts elements of an array into a string.

toString() is also used to convert a string into an array but with join() we can use a separator argument, so it’s better practice to use join().

The syntax is very simple, you just use:

array.join(separator)

Here, the separator is optional for the argument you pass, to define how you want the elements in the array to separate. It can be a space, a dot, a comma, a word, etc.

If no argument is passed, its elements are separated by a comma.

Let’s see it in action

A few examples for you above. The important thing I want to talk about is string8 and string2.

In string2, there’s nothing between the quotation marks while there is a space between them in string8.

You can put any amount of spaces between them and the result will change accordingly.

2. Split()

So, we have seen that we can convert elements in an array to a string.

What about converting a string into elements of an array? That’s what the split() method does.

split() can come in very handy in situations where you have to take an input message and see if it contains a specific word or not. You can easily do so by converting it to an array and using the includes() method. We’ll talk about that soon.

You can also do many other functions once the string is converted into an array. Technically, split() is a string method but I will discuss it here.

First, let us look at its syntax:

string.split(separator, limit)

• Separator specifies the character or words used to split the string. If it’s left blank then the whole string will convert into a single element in the array.
• Limit is an optional argument and is rarely used. It is an integer that specifies the number of splits. Items after the split limit will not be included in the array

Let’s see some examples.

I will use the examples from the join() method above and try to reverse it into a string with split().

Now, let’s see the above example one-by-one.

• array1, string1: Split into an array wherever there was a comma.
• arrayWithLimit : I have specified a limit so the resulting array has only four starting elements, which was the limit.
• arrayWithoutSeperator: I’ve already discussed that, if no separator is given, the whole string converts into a single element of the array.
• array2: As the quotation in the argument was empty, split() separated each character, including white spaces, commas, and any other character if there was any.
• array4: You will see all the ‘and’ was missing from the string and the string that was left out became a single element of the array. If there was even a single alphabet in the argument, the result would be a single element with a string missing the specified element. Try it out yourself. So, be careful when using words or strings as a separator.
• array3, array5, array, array7, array8: The same string is seen as a result after splitting in all of the above, which is correct as we just undo what join() did with respective characters.

Practice: create a function with join(), split(), and reverse()

You could now practice creating a function with join(), split(), and reverse() to check if the user input string is a palindrome.

If you aren’t familiar with the reverse() method, it just reverses the elements of an array.

Here is an example:

This concludes our split() method. Try the practice problem and share the GitHub repository to your code in the comments.

3. Sort()

As the name suggests, the sort() method sorts the elements of an array.

By default, the sort() function sorts values as strings.

Now, a problem arises when you sort numbers.

Because, if I were to sort numbers, let’s say 100 and 25, 100 will come before 25, as 1 of 100 comes before 2 of 25.

It can be fixed using a compare function, where a function is passed to syntax: function(a, b){return a — b}

( I have used an arrow function instead of traditional function declarations as given in the syntax above.)

Let’s understand this compare function. It should return a negative, zero, or positive value, depending on the arguments — whether a is larger or b.

When the sort() function compares two values, it sends the values to the compare function and sorts the values according to the returned (negative, zero, positive) value.

• If the result is negative, a is sorted before b.
• If the result is positive, b is sorted before a.
• If the result is 0, no changes are made with the sort order of the two values.
• The compare function compares all the values in the array, two values at a time (a,b)
• When comparing 25 and 100, the sort() method calls the compare function (25, 100).
• The function calculates 25–100 (a,b) and as the result is negative (-75), the sort function will sort 25 as a value lower than 100.

Conclusion

This brings us to the end of this discussion.

We have successfully covered join(), split(), and sort().

In my next post, I will discuss the map() and filter() functions and why they are important to a programmer.

Thanks for reading!

---