JS-Array-Concat-&-Join.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Array Concat & Join</title>
    <style>
      * {
        font-family: Arial, Helvetica, sans-serif;
      }

      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 50%;
      }

      td,
      th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }

      code[class*="language-"],
      pre[class*="language-"] {
        color: black;
        background: none;
        background-color: rgba(0, 0, 0, 0);
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      :not(pre) > code[class*="language-"]::after,
      pre[class*="language-"]::after {
        right: 0.75em;

        left: auto;

        -webkit-transform: rotate(2deg);

        -moz-transform: rotate(2deg);

        -ms-transform: rotate(2deg);

        -o-transform: rotate(2deg);

        transform: rotate(2deg);
      }
      pre[class*="language-"]::before,
      pre[class*="language-"]::after {
        content: "";

        z-index: -2;

        display: block;

        position: absolute;

        bottom: 0.75em;

        left: 0.18em;

        width: 40%;

        height: 20%;

        max-height: 13em;

        -webkit-transform: rotate(-2deg);

        -moz-transform: rotate(-2deg);

        -ms-transform: rotate(-2deg);

        -o-transform: rotate(-2deg);

        transform: rotate(-2deg);
      }

      :not(pre) > code[class*="language-"],
      pre[class*="language-"] {
        background-color: #fdfdfd;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        margin-bottom: 1em;
      }
      pre[class*="language-"] {
        position: relative;

        margin: 0.5em 0;

        margin-bottom: 0.5em;

        overflow: visible;

        padding: 0;
      }
      code[class*="language-"],
      pre[class*="language-"] {
        color: black;

        background: none;

        background-color: rgba(0, 0, 0, 0);

        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

        font-size: 1em;

        text-align: left;

        white-space: pre;

        word-spacing: normal;

        word-break: normal;

        word-wrap: normal;

        line-height: 1.5;

        -moz-tab-size: 4;

        -o-tab-size: 4;

        tab-size: 4;

        -webkit-hyphens: none;

        -moz-hyphens: none;

        -ms-hyphens: none;

        hyphens: none;
      }
      pre {
        display: block;

        font-size: 87.5%;

        color: #212529;
      }
      pre {
        margin-top: 0;

        margin-bottom: 1rem;

        overflow: auto;

        -ms-overflow-style: scrollbar;
      }
      code,
      kbd,
      pre,
      samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;

        font-size: 1em;
      }

      pre[class*="language-"] > code {
        position: relative;
        border-left: 10px solid #358ccb;
        box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
        background-color: #fdfdfd;
        background-image: linear-gradient(
          transparent 50%,
          rgba(69, 142, 209, 0.04) 50%
        );
        background-size: 3em 3em;
        background-origin: content-box;
        background-attachment: local;
      }

      code[class*="language"] {
        max-height: inherit;
        height: inherit;
        padding: 0 1em;
        display: block;
        overflow: auto;
      }

      code[class*="language-"],
      pre[class*="language-"] {
        color: black;
        background: none;
        background-color: rgba(0, 0, 0, 0);
        background-attachment: scroll;
        background-image: none;
        background-size: auto;
        background-origin: padding-box;
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal;
      }

      code {
        font-size: 87.5%;
        color: #e83e8c;
        word-wrap: break-word;
      }
      code,
      kbd,
      pre,
      samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;
        font-size: 1em;
      }
      *,
      ::after,
      ::before {
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>JS Array Concat & Join</h1>
    <h1>Array concat()</h1>
    <p>
      The JavaScript Array concat() Method is used to merge two or more arrays
      together. This method does not alter the original arrays passed as
      arguments but instead, returns a new Array.
    </p>
    <h3>Syntax:</h3>
    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript"><span class="token keyword">let</span> newArray1 <span class="token operator">=</span> oldArray<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> newArray2 <span class="token operator">=</span> oldArray<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>value0<span class="token punctuation">)</span>
<span class="token keyword">let</span> newArray3 <span class="token operator">=</span> oldArray<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>value0<span class="token punctuation">,</span>value1<span class="token punctuation">)</span>
     <span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span>
     <span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span>
<span class="token keyword">let</span> newArray <span class="token operator">=</span> oldArray<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>value1 <span class="token punctuation">,</span> <span class="token punctuation">[</span> value2<span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token operator">...</span><span class="token punctuation">,</span><span class="token punctuation">[</span> valueN<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span></code></pre>
    <h3>Parameters:</h3>
    <p>
      The parameters of this method are the arrays or the values that need to be
      added to the given array. The number of arguments to this method depends
      upon the number of arrays or values to be merged.
    </p>
    <h3>Return value:</h3>
    <p>
      This method returns a newly created array that is created after merging
      all the arrays passed to the method as arguments.
    </p>
    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Hamza"</span><span class="token punctuation">,</span><span class="token string">"Umar"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    
    <span class="token keyword">var</span> b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token string">"Zaid"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
    <h1>Concat Two arrays</h1>
    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Sohail"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Rehman"</span><span class="token punctuation">,</span><span class="token string">"Hamza"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>

    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
    <h3>Concat multiple arrays</h3>
    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Hamza"</span><span class="token punctuation">,</span><span class="token string">"Umar"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Hamza"</span><span class="token punctuation">,</span><span class="token string">"Umar"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> d <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Neha"</span><span class="token punctuation">,</span><span class="token string">"Aisha"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">,</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>

    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
    <h3>Array join()</h3>
    <p>
      The&nbsp;<code>join()</code>&nbsp;method returns an array as a string.
    </p>
    <p>
      The&nbsp;<code>join()</code>&nbsp;method does not change the original
      array.
    </p>
    <p>Any separator can be specified. The default is comma (,).</p>
    <hr />
    <h3>Syntax</h3>
    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">array<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>separator<span class="token punctuation">)</span>
</code></pre>
    <h3>Parameters</h3>
    <table class="table table-bordered table-striped">
      <tbody>
        <tr></tr>
        <tr>
          <td>Parameter</td>
          <td>Description</td>
        </tr>
        <tr>
          <td><em>separator</em></td>
          <td>
            Optional.<br />
            The separator to be used.<br />
            Default is a comma.
          </td>
        </tr>
      </tbody>
    </table>
    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Hamza"</span><span class="token punctuation">,</span><span class="token string">"Rehman"</span><span class="token punctuation">,</span><span class="token string">"Hamza"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Zaid"</span><span class="token punctuation">,</span> <span class="token string">"Hamza"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>c <span class="token operator">+</span> <span class="token string">"&lt;br&gt;&lt;br&gt;"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> d <span class="token operator">=</span> c<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">" - "</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
  </body>
  <script>
    let ary = ["Hamza", "UMAR", "Khan"];
    document.write(ary + "<br>");
    let concat = ary.concat("Zaid", "Hamza Khan");
    document.write(concat + "<br>");
    let join = concat.join(" _ ('-') _");
    document.write(join + "<br>");
  </script>
</html>