The js array join method

The js array join prototype method can be used to join all elements of an array into a string. When doing so a string can be given as the first argument that is used as a separator between each element in the array. This is of course just one of many such methods that a javaScript developer should be aware of when it comes to what there is to work with in the array prototype, without having to look for or write some kind of user space option.

One of the great things about the js array join method is that it has been part of javaScript for a real long time. So no need to bother with polyfills with this one, it will even work in browsers as old as IE 5.5. Even so there is a join method in lodash anyway, but when it comes to that it would seem that is just there for the sake of consistency and is not one of the most compelling methods in lodash to warrant a need to continue using it when it comes to the so called safety net aspect of using lodash.

So this will just be a quick post on the js array join method as well as some quick related topics that are mainly just for interest to that of new javaScript developers, as this is a trivial topics for more advanced developers.

1 - basic js array join method example

The basic idea of array join is to just call it off an instance of a javaScript array, and a string that consists of all the values of the array joined together will be what is returned. When doing so I just pass a string that I want to have between each element in the resulting string produced form the array with js array join.

1
2
3
4
var arr = [3,9,2020],
str = arr.join('/');
console.log(str); '3/9/2020'

There is more than just the array join method to work with after all and not just with respect to the other array prototype methods. When using join often other methods will be used before hand, so maybe some more examples are called for with this one.

2 - js array join and empty string as a separator

An empty string can be given as the argument to the array join method. Doing so is what I would want to do if I do not want anything at all to be between each element with the resulting string that is returned my array join.

1
2
3
4
5
6
7
var arr = [1,2,3,3],
a = parseInt(arr.join('')),
b = a + 1;
console.log(b); // 1234

3 - String split and js array join

The string split method is another method that comes to mind when dealing with the array join method as it is an inversion of the method. Where the js array join method will create a string from an array the string split method will split a string into an array of elements.

1
2
3
4
5
6
7
var n = 12345;
var a = parseInt(String(n).split('').map(function (n) {
return Math.pow(2, n);
}).join(''));
console.log(a); // 2481632

4 - Using array map before hand when working with an array of objects

For some arrays something might have to happen before joining all the elements together. For example say you have an array of objects and you want to join together all the values of a single property of each nested object together. In this kind of situation the array map method can be used as a way to create an array of primitive values before hand, and then that is what can be joined together.

1
2
3
4
5
6
7
let arr = [ {a: 42}, {a: 30}, {a: 50} ];
let str = arr.map((obj) => {
return obj.a;
}).join('-');
console.log(str); // '42-30-50'

3 - Conclusion

So the js array join method is one of many array prototype methods that I find myself using all the time when and where using it is called for. If I have an array of elements and I want to join them all together into a string then the array join method is there to do just that right away and allow me to continue on with my code.