Unexpected string concatenation of literals

Question

I keep getting this error when i am trying to connect my string using the + sign. Although, when I use the comma, it only logs "watermelon" the last word in the string. It works when i use the + sign, but I wanna get rid of the error. Whats happening here?

const fruits = ["apple<br>" + "banana<br>" + "grape<br>" + "pear<br>" + "watermelon"];

let output = '';

//code goes here
function listFruits() {
  for (let i = 0; i < fruits.length; i++) {
    output = fruits[i];
  }
}
/*
let output = `
apple: 2 <br>
banana: 3 <br>
grape: 2 <br>
pear: 2 <br>
watermelon: 4 <br>
`;
*/

listFruits();
document.getElementById("app").innerHTML = output;

`output = fruits[i]` is not concating anything. You will always end up with the last item in list. You should just store fruits in the array and use [join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) `fruits.join('
')` for what you wish to accomplish. Data should be stored without layout. — Lain, Aug 05 '20 at 06:12
`document.getElementById("app").innerHTML = fruits.join('
');`. Yet be aware to avoid `innerHTML` if possible. — Lain, Aug 05 '20 at 06:16
Does this answer your question? [Javascript how to show each element of array on a new line](https://stackoverflow.com/questions/10982913/javascript-how-to-show-each-element-of-array-on-a-new-line) — Lain, Aug 05 '20 at 06:16

score -2 · Answer 1 · answered Aug 05 '20 at 06:28

-2

Well firstly, that is not how you define an array. What happens when you write const fruits = ["apple " + "banana " + "grape " + "pear " + "watermelon"];. If you do this, the array looks like this: fruits = ["apple banana grape pear watermelon"];

Secondly, string concantination can be easily done using join method (which you can learn more about here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join#:~:text=The%20join()%20method%20creates,returned%20without%20using%20the%20separator.)

In your case, this would be fruits.join(' '), which will result in document.getElementById("app").innerHTML = fruits.join(' ')

answered Aug 05 '20 at 06:28

Jiri Kralovec

1,487
1
10
18

1

Was it really necessary to answer on an already solved duplicate? Just flag it as duplicate and all good. – JavaScript Aug 05 '20 at 06:33
While writing the answer, I have not noticed it. Is it really such a big problem to provide an explanation of what is happening in his/her code? Because apparently, just by looking at the array declaration in the example, the author has limited knowledge on the subject. Even though it is a simple issue, it would be nice if everybody provided detailed explanation to the issues. One of the problems of StackOverflow is the amount of hacks presented as solutions. They aren't. Please try to explain the issues, the solutions, and help the authors learn where the actual problem is, not how to hack – Jiri Kralovec Aug 05 '20 at 08:07
The link provided contains the exact same example: `var arr = ['apple','banana','mango']; arr.join('
')`. This is a repository and not a code teaching/writing service. Secondly you do not explain why his code does not work. It would work if he added `output += fruits[i]`, which you do not mention at all. – JavaScript Aug 05 '20 at 08:37
1

Thanks that was very helpful. And yeah i do agree, when i ask questions on here i mostly get shortcuts when i really need the basics because, as you said, i don't have a ton of practice yet with the language and am just starting to try and create my own work. thanks again. – Ethan N Aug 05 '20 at 19:14

Unexpected string concatenation of literals

1 Answers1