JavaScript - join() method

revision:

Category : array

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

The join() method returns an array as a string. It does not change the original array. Any separator can be specified. The default is comma (,).

Syntax : 

        array.join()
        array.join(separator)

Parameters:

separator : optional. Specifies a string to separate each pair of adjacent elements of the array. The separator is converted to a string if necessary. If omitted, the array elements are separated with a comma (","). If separator is an empty string, all elements are joined without any characters in between them.

Examples: 

            const elements = ['Fire', 'Air', 'Water'];
            console.log(elements.join());
            // Expected output: "Fire,Air,Water"
            console.log(elements.join(''));
            // Expected output: "FireAirWater"
           console.log(elements.join('-'));
            // Expected output: "Fire-Air-Water"

Practical examples

example: join matrix elements

code: 
                    <div>
                        <p id="join-1"></p>
                        <p id="join-2"></p>
                        <p id="join-3"></p>
            
                    </div>
                    <script>
                        const matrix = [
                            [1, 2, 3],
                            [4, 5, 6],
                            [7, 8, 9],
                        ];
                        console.log(matrix.join()); // 1,2,3,4,5,6,7,8,9
                        console.log(matrix.join(";")); // 1,2,3;4,5,6;7,8,9
                        document.getElementById("join-1").innerHTML = "matrix.join:" + matrix.join();
                        document.getElementById("join-2").innerHTML = "matrix.join:" + matrix.join('');
                        document.getElementById("join-3").innerHTML = "matrix.join:" + matrix.join(' - ');
                    </script>

example: joining an array in four different ways.

code: 
                    <div>
                        <p id="join-4"></p>
                        <p id="join-5"></p>
                        <p id="join-6"></p>
                        <p id="join-7"></p>
                    </div>
                    <script>
                        const a = ["Wind", "Water", "Fire"];
                        console.log(a.join()); // 'Wind,Water,Fire'
                        console.log(a.join(", ")); // 'Wind, Water, Fire'
                        console.log(a.join(" + ")); // 'Wind + Water + Fire'
                        console.log(a.join("")); // 'WindWaterFire'
                        document.getElementById("join-4").innerHTML = "words.join:" + a.join();
                        document.getElementById("join-5").innerHTML = "words.join:" + a.join(", ");
                        document.getElementById("join-6").innerHTML = "words.join:" + a.join(" + ");
                        document.getElementById("join-7").innerHTML = "words.join:" + a.join("");
                    </script>

example: different separators

join() returns an array as a string:

code: 
                    <div>
                        <p>join() returns an array as a string:</p>
                        <p id="join-8"></p>
                        <p id="join-9"></p>
                    </div>
                    <script>
                        const fruits = [" Banana", " Orange", " Apple", " Mango"];
                        let text = fruits.join();
                        document.getElementById("join-8").innerHTML = "fruits : " + text;
                        let text2 = fruits.join(" and ");
                        document.getElementById("join-9").innerHTML = "fruits : " + text2;
                    </script>