Every web-developer around the world uses JavaScript for creating and customizing some fabulous websites that we see and use every day. I want to be very specific from the beginning that I am writing this blog mainly targeting the computer geeks out there or for the web-developers or wanna-be developers.
Still, if you are curious enough that what JavaScipt is and what are the uses of Javascript and what are the three JavaScript Array methods that every developer should know ( that is what we are going to discuss today), then you are most welcome to stick to blog till the end as we are going to discuss a lot.
Firstly, before directly jumping into the topic let’s give you an idea about what Javascript is and how this programming language is making a difference.
JavaScript – the lifeline of website development.
A high level interpreted scripting language with a curly bracket syntax and dynamic typing prototype-based object-oriented programming language, JavaScript is often known as JS.
Besides HTML and CSS, JavaScript is widely used in creating the World Wide Web. It is one of the core technologies of web page development.
There are several APIs that are working with texts, arrays, dates, and DOM. The language depends upon the host environment to have features like network storage and graphics facilities.
As said before, JavaScript is mainly used for web page development but it can be used in other areas too. So let us have a look at the different uses of JavaScript in today’s date.
- Web Development.
- Web Applications.
- Presentations.
- Server Applications.
- Web Servers.
- Game Development.
- Art.
- Smartwatch Application.
- Mobile Application.
- Flying robots or drones.
Now let’s get to the point and have a discussion about the topic that we are focusing today in this article. That is we are going to discuss three functions of JS that are join (), split(), sort().
Every developer should know that arrays are important components that you should put in your codes.
1. Join():
Join() function is used in JS language to convert elements of an array into a complete string. If a user wants the elements of an array in a or string format then join() function is to be used. In the syntax, you only have to write array.join(separator)
Sometimes the separator is not that important and is optional. If there are no arguments passed then the elements are separated by a simple comma.
As for example,
const array1=[1,2,3,’My’,’Name’,’is’,’Ney’]
const string1=array1.join()
const string2=array1.join(”)
const string3=array1.join(‘,’)
const string4=array1.join(‘and’)
const string5=array1.join(‘-‘)
const string6=array1.join(‘=’)
const string7=array1.join(‘:’)
const string8=array1.join(‘ ‘)
console.log(array1)
// [ 1, 2, 3, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
console.log(string1)
// 1,2,3,My,Name,is,Ney
console.log(string2)
//123MyNameisNey
console.log(string3)
// 1,2,3,My,Name,is,Ney
console.log(string4)
// 1and2and3andMyandNameandisandNey
console.log(string5)
// 1-2-3-My-Name-is-Ney
console.log(string6)
// 1=2=3=My=Name=is=Ney
console.log(string7)
// 1:2:3:My:Name:is:Ney
console.log(string8)
// 1 2 3 My Name is Ney
You can put any amount fo space between two strings and you will get the output result accordingly.
2. Split():
Well, the function of split() is just like the opposite of join() and you can tell this by the name too. By using a split() function you can convert strings back into array elements. The function deduces the input string into substrings of an array and then returns the new array to the user.
Once the string is converted into array elements then you can perform many tasks and other functions. First, let’s have a look at the syntax of the function.
string.split (separator, limit)
In the above syntax, the separator is the character or word which is used to split the string. Suppose the value of the separator is null, then the whole string will be converted into a single element array.
Secondly, the limit specifies the number of splits that you want to make. This function means that the string elements which came after the set limit will not be included in the array.
For example,
const string1 = `1,2,3,My,Name,is,Ney`
const array1 = string1.split(‘,’)
const arrayWithLimit = string1.split(‘,’, 4)
const arrayWithoutSeperator = string1.split()
console.log(array1, arrayWithLimit, arrayWithoutSeperator)
//[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ] [ ‘1’, ‘2’, ‘3’, ‘My’ ] [ ‘1,2,3,My,Name,is,Ney’ ]
const string2 = `123MyNameisNey`
const array2 = string2.split(”)
console.log(array2)
//[ ‘1’, ‘,’, ‘2’, ‘,’, ‘3’, ‘,’, ‘M’, ‘y’, ‘,’, ‘N’, ‘a’, ‘m’, ‘e’, ‘,’, ‘i’, ‘s’, ‘,’, ‘N’, ‘e’, ‘y’ ]
const string3 = `1,2,3,My,Name,is,Ney`
const array3 = string3.split(‘,’)
console.log(array3) //[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
const string4 = `1and2and3andMyandNameandisandNey`
const array4 = string4.split(‘and’)
console.log(array4) //[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
const string5 = `1-2-3-My-Name-is-Ney`
const array5 = string5.split(‘-‘)
console.log(array5) //[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
const string6 = `1=2=3=My=Name=is=Ney`
const array6 = string6.split(‘=’)
console.log(array6) //[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
const string7 = `1:2:3:My:Name:is:Ney`
const array7 = string7.split(‘:’)
console.log(array7) //[ ‘1’, ‘2’, ‘3’, ‘My’, ‘Name’, ‘is’, ‘Ney’ ]
const string8 = `1 2 3 My Name is Ney`
const array8 = string8.split(‘ ‘)
console.log(array8)
Now let’s look at the commands differently.
array1, string1: Split every string into an array whenever there is a comma.
arrayWithLimit : A limit has been specified. So, the array only has four starting elements as per the limit.
arrayWithoutSeperator: If there is no separator mentioned by the user then the whole strings converts into one single element array.
array2: Here the split() function separated each character including the spaces, commas, etc.
array4: In the output you can see that all the “and” was missing. In this case, the whole string will become a single element of the array.
array3, array5, array, array7: All the strings work in the same manner.
3. Sort().
As per the name, the sort() function sorts the elements of an array. In a statement like this, the function sort() will start working by default.
let greekLetter = [‘beta’,’alpha’,’delta’,’gamma’];
console.log(greekLetter.sort()) // [ ‘alpha’, ‘beta’, ‘delta’, ‘gamma’ ]
There can be issues that may arise when you are dealing with numbers. Suppose you are sorting from 100 to 25. The function will call 100 before 25 as 1 of 100 comes before 2 of 25.
let num1 = [25, 100, 23]
console.log(num1.sort()) //[ 100, 23, 25 ]
let num2 = [’25’, ‘100’, ’23’]
console.log(num2.sort()) //[ ‘100’, ’23’, ’25’ ]
To avoid these kinds of problems you can use the “compare function”.
The syntax: function(a, b){return a-b}
let num = [25, 100, 23]
console.log(num.sort((a, b) => {
return a – b
}))
//[ 23, 25, 100 ]
The working of the sort() function includes comparing two values. The function sends those values to the “compare function” section. Then the “compare function” sorts those values according to user inputs.
We can take reference from the given examples.
If the result is negative, a will be sorted before b.
If the result is positive, b will be sorted before a.
If the result is 0, there will be no changes in the sorting order of the two values.
The compare functions compare all the values in the array with two values at a time.
If you are going to compare between 25 and 100, the sort() function calls the compare function to do the task.
The above function will calculate 25-100 (a, b) and will give a negative result (-75). The sort() function will show 25 as a lower value than 100.
And Finally
We have come to the end of this blog. I know it is quite boring and complex for those readers who are new in this field, that is why in the beginning I have mentioned that I am writing this blog targeting the computer geeks.
The blog gives you a complete scenario of the three arrays of JavaScript that every developer and wanna-be developer should know. I have discussed each and every array in a very descriptive way so that you find it easy to read and can make a meaning out of it.