Unexpected comma using map()

Question

I\'ve an array with a list of elements and I\'m trying to append this list to an HTML element using template strings:

Answer 1

As others have pointed out (which I'm going to repeat for completeness sake), Array.prototype.map returns a new array which contains the elements that are altered in the function that is passed to it.

When you concatenate an array to a string (which is what is happening here), it will convert the array to a string as well. And when an array is converted to a string, it is automatically joined using commas.

const arr = ['', ''];

console.log(arr + ""); // ,

Besides using .join() to explicitly pass an empty string as the separator, you can also use Array.prototype.reduce to reduce the array to a single value.

description.reduce((acc, work) => acc + `
${work}
`, '')

So the complete code would look like this:

var description = [
  'HTML & CSS',
  'Javascript object-oriented programming',
  'Progressive Web apps (PWAs)',
  'Website Performance Optimization',
  'Webpack and Gulp workflows',
  'Fullstack React.js',
  'Web Components',
  'Responsive web design',
  'Sketch design',
  'GraphQL and Relay'
]

$('body').append(
  `
  

    

     ${
        description.reduce((acc, work) => acc + `
${work}
`, '')
      }
    
  
  `
)