Join Array Into String

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will be exploring the concept of joining elements of an array into a single string using JavaScript. We will be using the Array.prototype.reduce() method to combine the elements of the array and a separator to specify how the elements should be joined together. By the end of this lab, you will have a better understanding of how to manipulate arrays in JavaScript and create more efficient code.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28455{{"`Join Array Into String`"}} javascript/data_types -.-> lab-28455{{"`Join Array Into String`"}} javascript/arith_ops -.-> lab-28455{{"`Join Array Into String`"}} javascript/comp_ops -.-> lab-28455{{"`Join Array Into String`"}} javascript/higher_funcs -.-> lab-28455{{"`Join Array Into String`"}} end

How to Join an Array Into a String

To join all the elements of an array into a string, follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Use the function join() with the following parameters:
    • arr: the array to be joined.
    • separator (optional): the separator to be used between the elements of the array. If not specified, the default separator , will be used.
    • end (optional): the separator to be used between the last two elements of the array. If not specified, the same value as separator will be used by default.
  3. The join() function uses Array.prototype.reduce() to combine the elements of the array into a string.
  4. The final string is returned.

Here's the code for the join() function:

const join = (arr, separator = ",", end = separator) =>
  arr.reduce(
    (acc, val, i) =>
      i === arr.length - 2
        ? acc + val + end
        : i === arr.length - 1
          ? acc + val
          : acc + val + separator,
    ""
  );

And here are some examples of how to use the join() function:

join(["pen", "pineapple", "apple", "pen"], ",", "&"); // 'pen,pineapple,apple&pen'
join(["pen", "pineapple", "apple", "pen"], ","); // 'pen,pineapple,apple,pen'
join(["pen", "pineapple", "apple", "pen"]); // 'pen,pineapple,apple,pen'

Summary

Congratulations! You have completed the Join Array Into String lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like