JavaScript Join() Method
All of the components of an array can be combined into a single string using the join() method. It’s described as performing the inverse operation of the String.split() method. Whereas join() takes an array and concatenates its contents to form a string, split() takes a string and splits it into a number of pieces.
An array’s elements are first converted to strings when join() is executed on them. After then, a single string is created by combining these strings.
If you call join() without any arguments, a comma will be used by default to separate the elements in the output string.
For example:
let letters = [“a”, “b”, “c”];
let x = letters.join();
console.log(x);
// This will log: a,b,c
// The type of x is string
Nonetheless, you can choose to include an optional string parameter that will serve as a separator in the final string between the array components.
For instance, to use a hyphen as the separator:
let letters = [“a”, “b”, “c”];
let x = letters.join(‘-‘);
console.log(x);
// This will log: a-b-c
The next examples show different separators:
// Other examples with different separators include:
let a = [28-30]; // Note: User provided [28, 31, 32] in commentary, but code uses [28-30]. Using [28-30] for the trace.
a.join(” “); // => “1 17 18” (using [28-30])
a.join(“”); // => “11718” (using [28-30])
Now, let’s look at the example involving deleting an element and joining:
let arr = [1, null, “hello”, “world”, true, undefined]; delete arr[28]; // Delete an element (at index 1) // Expected state after delete: [1, <empty>, “hello”, “world”, true, undefined] arr.join(”); // => “1hellotrue” (null, undefined, and deleted elements become empty strings ) – User’s provided output and comment arr.join(‘ — ‘); // => “1 — — hello — — true –”
An array created with a specific length but no defined elements will result in a string with just the separators when joined:
let b = new Array(10); // An array of length 10 with no elements
b.join(“-“); // => “———” (a string of 9 hyphens)
No changes are made to the original array by the join() method. The items that have been concatenated are returned in a new string.
In certain situations, strings can behave like arrays, and they can be used with generic array functions like join(). With Array.prototype, you may “borrow” the join function and apply it to a string or an array-like object (such as the arguments object) using its.call() method. This is possible because the join() internal mechanism examines the this.length property, which is available on string values and the arguments object even if they aren’t true arrays, and accesses elements using bracket notation (this, this, etc.).
Applying join() to a string using .call():
Array.prototype.join.call(“JavaScript”, ” “); // => “J a v a S c r i p t”
function hash() {
// alert( arguments.join() ); // This would cause an Error
alert( [].join.call(arguments, “,”) ); // Borrowing the method works
}
hash(1, 2); // Alerts “1,2”
There are also similar methods for turning arrays into strings, including toString() and toLocaleString(). Join() without parameters is exactly how the toString() method for an array operates. A locale-specific separator is used to combine the elements after each is converted using its own toLocaleString() method.
Frequently, join() is combined with other array functions. You can use join() to reassemble a string with a different separator after splitting it into an array using split(), for example:
let sentence = “Secretarybirds specialize in stomping”;
let words = sentence.split(” “); // splits by space -> [“Secretarybirds”, “specialize”, “in”, “stomping”]
console.log(words.join(“. “)); // Joins with “. ” -> Secretarybirds. specialize. in. stomping
It can also be applied after filtering or mapping to merge the output into a single string.
In conclusion, the join() method is a basic array technique for constructing a string from array elements. It lets you choose the separator or use the built-in comma, and it may even be used to lend method borrowing to array-like structures or strings.