How to most efficiently generate string from array of objects in javascript?

Question

I have the following:

var students = [{name:"Jordan", age:"6"},{name:"Jake", age:"7"},{name:"Mark", age:"10"}]

I want to generate a string like this: "Jordan,6|Jake,7|Mark,10"

What is the most efficient way to do this?

I am currently using:

var studentstr = "";
for(var i = 0; i < students.length; i++) {
  studentstr = students['name'] + "," + students['age'] + "|"
}
studentstr = studentstr.substring(0, studentstr.length - 1);

Also, performance-wise, if I had an array of 2,000 items, is it "costly" to perform this transformation? The resulting string contains both keys in the object and not a single join on one object in the property.

possible duplicate of [Javascript perform .join on value in object array](http://stackoverflow.com/questions/16607557/javascript-perform-join-on-value-in-object-array) — toskv, Sep 02 '15 at 15:56

score 2 · Answer 1 · answered Sep 02 '15 at 15:56

2

You can map each student object to a string and then join them all with |:

var studentstr = students.map(function (student) {
    return student.name + ',' + student.age;
}).join('|');

Also, performance-wise, if I had an array of 2,000 items, is it "costly" to perform this transformation?

No.

answered Sep 02 '15 at 15:56

Ry-

218,210
55
464
476

Does anyone know if this performs better or worse than Guffa's answer? Or is .map effectively doing the same thing under the hood? – Setsuna Sep 02 '15 at 17:24
@Setsuna: `.map` is doing the same thing under the hood, but it will likely perform “worse” because of the function calls. With 2,000 items, however, you won’t notice any difference, and your original version is probably best in that regard (except for the final `substring`). – Ry- Sep 02 '15 at 17:34

Guffa · Accepted Answer · 2015-09-02T16:00:05.940

1

Yes, using string concatenation in a loop is costly. The string grows for each iteration, and each time you have to copy the entire previous string to create the new version. The execution time of the loop grows exponentially to the number of items.

You can put the string for each object in an array, then join them together:

var students = [{name:"Jordan", age:"6"},{name:"Jake", age:"7"},{name:"Mark", age:"10"}];

var items = [];
for (var i = 0; i < students.length; i++) {
  items.push(students[i].name + ',' +students[i].age);
}
var str = items.join('|');

// display result in snippet
document.write(str);

edited Sep 02 '15 at 16:00

answered Sep 02 '15 at 15:56

Guffa

687,336
108
737
1,005

*“Yes, using string concatenation in a loop is costly. The string grows for each iteration, and each time you have to copy the entire previous string to create the new version.”* Modern JavaScript engines are smart about this, and `push`/`join` tends to be slower. See https://stackoverflow.com/questions/7299010/why-is-string-concatenation-faster-than-array-join. – Ry- Sep 02 '15 at 15:59
@minitech: That may be true for some engines, but until we can say that it's true for all of them, the impact is horrible in enough of them. – Guffa Sep 02 '15 at 16:05
It’s true for the current versions of all major web browsers. But anyway, it’s an implementation detail, so you should add a note about when your advice applies. – Ry- Sep 02 '15 at 16:10
Does anyone including Guffa know if this is more effective than a ".map" function? – Setsuna Sep 02 '15 at 17:23
@Setsuna: The `map` function creates an array from the items, so that is the same principle. There may be some small performance difference, but they would react the same to a changed number of items. – Guffa Sep 02 '15 at 17:34

score 1 · Answer 3 · answered Sep 02 '15 at 15:56

1

map works well for this:

var students = [{name:"Jordan", age:"6"},{name:"Jake", age:"7"},{name:"Mark", age:"10"}];
var result = students.map(function(student) {
    return student.name + ',' + student.age;
});
alert(result.join('|'));

answered Sep 02 '15 at 15:56

LostMyGlasses

3,074
20
28

score -1 · Answer 4 · answered Sep 02 '15 at 15:57

Try this and see your console:

var string = '';
for (var s in students) {
    string += students[s].name + ', ' + students[s].age + ' | ';
}

console.log(string);

Fiddle: http://jsfiddle.net/80ss0u14/

I do not think it is costly to go on with such approach. It may be the most efficient way to iterate through the data.

How to most efficiently generate string from array of objects in javascript?

4 Answers4