Array Methods in JS - join()
Tags: javascript, webdev, beginners, tutorial
Published: 2022-08-17 15:46:00

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 - 
```js
let arr = [1,2,3,4,5]
let joiner = arr.join("-")
console.log(joiner)
```

### Output-
```
1-2-3-4-5
```

* 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()

```js
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())
```

## Output -
```

1,2,3,4,5
A,B,C,D
[object Object],[object Object],[object Object]
```

* 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 - 
```js
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("-"))

```

## Output - 
```
1+2+3+4+5
6*7*8*9*10
A[B[C[D
EzFzGzH
1mixed2mixed3mixed4mixed5mixedEmixedFmixedGmixedH
--true-false
```

* 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 
```js
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)

```

## Output - 
```
1*2*3*4*5
1-2-3-4-5
```

* It works with arrays passed as function parameters also.

## Example 4 Join with other methods - 

```js
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)
```

## Output - 
```
54321
[ '5', '4', '3', '2', '1' ]
```

* 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