DEV Community

Cover image for Array Methods in JS - join()
Shubham Tiwari
Shubham Tiwari

Posted on • Edited on

Array Methods in JS - join()

#javascript #webdev #beginners #tutorial

Hello guys today i will be discussing join method in javascript.

What is join() used for?
It is used to join the elements of array and returns them as a string
Example -
arr -> ["A","B","C","D"]
After applying join() method on this array
result -> A,B,C,D

Syntax -
array.join(separator)

  • separator is the thing which will be applied to all the elements for joining them

Example -

let arr = [1,2,3,4,5] let joiner = arr.join("-") console.log(joiner)
Enter fullscreen mode Exit fullscreen mode

Output- 

1-2-3-4-5
Enter fullscreen mode Exit fullscreen mode
  • As you can see it joins all the elements using the separator "-"

Let's understand this deeply with codes

Example 1 Default join without separator() 

const emptyArray = [] const numberArray = [1,2,3,4,5]; const stringArray = ["A","B","C","D"]; const objectArray = [ { name:"Shubham", age:21 }, { name:"Shivam", age:25 }, { name:"Abhishek", age:22 } ] console.log(emptyArray.join()) console.log(numberArray.join()) console.log(stringArray.join()) console.log(objectArray.join())
Enter fullscreen mode Exit fullscreen mode

Output - 

 1,2,3,4,5 A,B,C,D [object Object],[object Object],[object Object]
Enter fullscreen mode Exit fullscreen mode
  • As you can see it returns an empty string for empty array
  • It joins the array of numbers and strings with comma(,) but for object array it return something different means it can't join array of objects.

Example 2 Join with Separator - 

const numberArray1 = [1,2,3,4,5]; const numberArray2 = [6,7,8,9,10]; const stringArray1 = ["A","B","C","D"]; const stringArray2 = ["E","F","G","H"]; const mixedArray = [1,2,3,4,5,"E","F","G","H"] const exceptionArray = [null,undefined,true,false] console.log(numberArray1.join("+")) console.log(numberArray2.join("*")) console.log(stringArray1.join("[")) console.log(stringArray2.join("z")) console.log(mixedArray.join("mixed")) console.log(exceptionArray.join("-"))
Enter fullscreen mode Exit fullscreen mode

Output - 

1+2+3+4+5 6*7*8*9*10 A[B[C[D EzFzGzH 1mixed2mixed3mixed4mixed5mixedEmixedFmixedGmixedH --true-false
Enter fullscreen mode Exit fullscreen mode
  • As you can see we have used different types of separator to join the elements of array.
  • Also in exceptionArray you can see that it return empty strings for null and undefined.

Example 3 Applying join on array passed in function parameters 

const normalParameter = (arr) => { console.log(arr.join("*")) } const restParameter = (...args) => { console.log(args.join("-")) } normalParameter([1,2,3,4,5]) restParameter(1,2,3,4,5)
Enter fullscreen mode Exit fullscreen mode

Output - 

1*2*3*4*5 1-2-3-4-5
Enter fullscreen mode Exit fullscreen mode
  • It works with arrays passed as function parameters also.

Example 4 Join with other methods - 

const arr = [1,2,3,4,5] // join with reverse let reverseMethod = arr.reverse().join("") console.log(reverseMethod) // join with split method to reverse the array let splitMethod = arr.join("").split("") console.log(splitMethod)
Enter fullscreen mode Exit fullscreen mode

Output - 

54321 [ '5', '4', '3', '2', '1' ]
Enter fullscreen mode Exit fullscreen mode
  • It works with other array and strings method too.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl

Top comments (2)

Collapse
 
smlka profile image
Andrey Smolko •

I would say that phrase - "join method in javascript" is not a correct one. Method is a function which is combined with an object. Join() is a method of Array.prototype object. So 'Array.prototype.join method in JS' is more correct.

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Sure I will change it to that