JavaScript Arrays
JavaScript
concatjoins two arrays together andjointurns an array into a string.
Both return something new and leave the original arrays alone.
join is the usual way to display a list on a page.
Example
javascript
const a = [1, 2];
const b = [3, 4];
console.log(a.concat(b).join("-"));The output is 1-2-3-4.
concat returns a new array containing the elements of both.
join returns a string with every element separated by the text you choose.
Neither method changes the arrays they are called on.
Syntax
javascript
array1.concat(array2);
array.join(separator);The default separator for join is a comma.
concat accepts more than one array.
Example
javascript
const a = [1];
const b = [2];
const c = [3];
console.log(a.concat(b, c).join(","));The output is 1,2,3.
Modern code often uses spread instead, which reads a little more directly.
Example
javascript
const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b].join(","));The result is the same as concat.
Any string can be the separator, including an empty one.
Example
javascript
const letters = ["a", "b", "c"];
console.log(letters.join(""));
console.log(letters.join(" and "));An empty separator glues the elements together with nothing between them.
Empty values become empty strings rather than the words null or undefined.
Example
javascript
const list = ["a", null, "c"];
console.log(list.join("-"));The output is a--c, with nothing where the null was.
toString() is the same as join(",") with no choice of separator.
Example
javascript
const list = [1, 2, 3];
console.log(list.toString());Use join when you want to control the separator.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript concat and join</title>
</head>
<body>
<h1>JavaScript concat and join</h1>
<p id="result"></p>
<script>
const first = ["Ada", "Grace"];
const second = ["Alan"];
const all = first.concat(second);
document.getElementById("result").innerHTML = all.join(" · ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a different separator:
Change the join to join(", ") and compare the output.
concat returns a new array holding both lists.concat.join turns an array into a string.null and undefined become empty strings in the result.concat combines arrays and join turns one into text.
Both leave the original arrays untouched.
join is how most lists end up on the page.