Solutions in JavaScript to return a Array as a String and manipulate it with performance tests and examples

array2String.js

/* eslint-disable
  require-jsdoc,
  no-var,
  camelcase,
  no-console,
  no-unused-vars
*/

/**
 * @fileOverview string2Array
    Solutions in JavaScript to return a Array as a String and manipulate it
    with performance tests and examples
 * @author Simon Gattner <github@0x38.de>
 * @license MIT
 * @version 1.1.0
 */

//
// function array2String()
// @param arr (array) [0,1,2,3,4,5,6,7,8,9...]
// @param delimiter (string) ', '
// @param list (string) ''

// function array2String(arr, delimiter, list) {
//   for (var i = 0, l = arr.length; i < l; i++) {
//     list = list + delimiter + arr[i];
//   }
//   return list;
// }

//
// (I)
// Take a look at https://youtu.be/o8NPllzkFhE?t=14m20s

//
// (Q)
// Maintainable
// Readable
// Inteligent
// Performant
// Scalable
//
// Do we always return a string?
// Do we use speaking var names?
// Do we have a scale and readable solution?
// What do we need to change if we like to render an unordered-list?
// What do we need to change if we like to render a hash-tag list?
//
// Do it better
//  - params object
//    - params.delimiter
//  - ..args / ...params
//  - error handling (try, catch / typeof)
//  - () =>
//  - are there other options?
//    - yield
//    - next Iterators
//  - for, while, join ...

// (R)
// You may run this script by copy and past it into your browser console

//
// examples

// examples 000
// base
function array2String__000(arr, delimiter, list) {
  for (var i = 0, l = arr.length; i < l; i++) {
    list = list + delimiter + arr[i];
  }
  return list;
}

// example 100
function array2String__100(arr, delimiter, list) {
  for (var i = 1, l = arr.length; i < l; i++) {
    list = list + delimiter + arr[i];
  }
  return arr[0] + list;
}

// example 101
function array2String__101(arr, delimiter, list) {
  for (const item of arr) {
    list = list + delimiter + item;
  }
  return list.slice(delimiter.length);
}

// example 102
function array2String__102(arr, delimiter, list) {
  for (const index in arr) {
    list = list + delimiter + arr[index];
  }
  return list.slice(delimiter.length);
}

// example 200
function array2String__200(arr, delimiter, list) {
  var deli = '';
  for (var i = 0, l = arr.length; i < l; i++) {
    if (i > 0) deli = delimiter;
    list = list + deli + arr[i];
  }
  return list;
}

// example 300
function array2String__300(arr, delimiter, list) {
  for (var i = 0, l = arr.length; i < l; i++) {
    list = (i === 0) ? arr[i] : list + delimiter + arr[i];
  }
  return list;
}

// example 400
function array2String__400(arr, delimiter, list) {
  for (var i = 0, l = arr.length; i < l; i++) {
    list = list + delimiter + arr[i];
  }
  return list.slice(delimiter.length);
}

// example 500
function array2String__500(arr, delimiter, list) {
  var n = 0;
  while (n < arr.length) {
    list = list + delimiter + arr[n];
    n++;
  }
  return list.substring(delimiter.length);
}

// example 600
function array2String__600(arr, delimiter, list) {
  function replacer(key, value) {
    return value.toString().replace(/,/g, delimiter);
  }
  return list + JSON.stringify(arr, replacer)
    .slice(1, -1);
}

// example 700
function array2String__700(arr, delimiter, list) {
  return list + arr.join(delimiter);
}

// example 800
function array2String__800(arr, delimiter, list) {
  return list + arr
    .toString()
    .replace(/,/g, delimiter);
}

//
//
// improve
function array2String__550(arr, delimiter, list) {
  var n = 1;
  while (n < arr.length) {
    list = list + delimiter + arr[n];
    n++;
  }
  return arr[0] + list;
}

// improve
function array2String__110(arr, delimiter, list) {
  for (const [index, value] of arr.entries()) {
    list = (index > 0) ? list + delimiter + value : value;
  }
  return list;
}

// scale
function array2String__998(arr, delimiter, list) {
  var n = 1;
  var l = arr.length;
  while (n < l) {
    list = list + delimiter + arr[n++];
  }
  return arr[0] + list;
}

// params / handle errors
function array2String__990(params) {
  if (
    typeof params === 'object' &&
    typeof params.array === 'object'
  ) {
    var delimiter = ', ' || params.delimiter;
    var list = '' || params.list;
    for (const [index, value] of params.array.entries()) {
      list = (index > 0) ? list + delimiter + value : value;
    }
    return list;
  } else {
    return false;
  }
}

function array2String__999(params) {
  if (
    typeof params === 'object' &&
    typeof params.array === 'object'
  ) {
    var delimiter = ', ' || params.delimiter;
    var list = '' || params.list;
    var n = 1;
    var len = params.array.length;
    while (n < len) {
      list = list + delimiter + params.array[n++];
    }
    return arr[0] + list;
  } else {
    return false;
  }
}

// iterator / next
function array2String__910(arr, delimiter, list) {
  var iterable = {
    [Symbol.iterator]() {
      var data = arr.slice();
      return {
        next() {
          return {
            done: data.length === 0,
            value: (data.length > 1) ? delimiter + data.pop() : data.pop(),
          };
        },
      };
    },
  };
  for (var e of iterable) {
    list = e + list;
  }
  return list;
}

//
//
// testing

// helper
function makeNumberArray(from, to) {
  var arr = [];
  var n = from;
  to = to + 1;
  while (n < to) {
    arr.push(n++);
  }
  return arr;
}

// var arr = makeNumberArray(0, 99); // dev
var arr = makeNumberArray(0, 99999); // testing
var list = '';
var delimiter = ', ';
var t0;
var t1;

//
// integration test
function testing(debug) {
  [
    '000', 100, 101, 102, 110, 200, 300, 400, 500,
    600, 700, 800, 550, 910, 990, 998, 999,
  ].forEach(function(e) {
    var evaled;
    var currentFunction = 'array2String__' +
      e.toString() + '(arr,delimiter,list)';
    console.log(currentFunction + ':');
    if (e !== 999 && e !== 990) {
      evaled = eval(currentFunction);
      if (debug) console.log(evaled);
    } else {
      evaled = eval('array2String__' + e.toString() +
        '({array: arr, delimiter: delimiter, list: list})');
      if (debug) console.log(evaled);
    }
    if (evaled === array2String__200(arr, delimiter, list)) {
      console.info(currentFunction + ' OK.');
    } else {
      console.warn(currentFunction + ' Error.');
    }
  });
}

//
// perform test
function perform() {
  t0 = performance.now();
  array2String__000(arr, delimiter, list); // return ', 1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__000 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__100(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__100 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__101(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__101 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__102(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__102 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__110(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__110 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__200(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__200 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__300(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__300 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__400(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__400 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__500(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__500 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__600(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__600 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__700(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__700 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__800(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__800 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__550(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__550 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__910(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__910 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__990({
    'array': arr,
    'delimiter': delimiter,
    'list': list,
  }); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__990 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__998(arr, delimiter, list); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__998 took ' + (t1 - t0) + ' milliseconds.');

  t0 = performance.now();
  array2String__999({
    'array': arr,
    'delimiter': delimiter,
    'list': list,
  }); // return '1, 2, 3, 4, 5 ...'
  t1 = performance.now();
  console.log('Call to array2String__999 took ' + (t1 - t0) + ' milliseconds.');
}

console.info('Run perform() to show performance of each function.');
console.info(
  'Run testing() to test each function. ' +
  'Run testing(true) will also show the return values of each function'
);

/*
  Chrome
  Call to array2String__000 took 11.499999993247911 milliseconds.
  VM1410:302 Call to array2String__100 took 10.49999997485429 milliseconds.
  VM1410:307 Call to array2String__101 took 15.400000003864989 milliseconds.
  VM1410:312 Call to array2String__102 took 28.200000000651926 milliseconds.
  VM1410:317 Call to array2String__110 took 16.900000016903505 milliseconds.
  VM1410:322 Call to array2String__200 took 13.999999995576218 milliseconds.
  VM1410:327 Call to array2String__300 took 10.300000023562461 milliseconds.
  VM1410:332 Call to array2String__400 took 13.699999981326982 milliseconds.
  VM1410:337 Call to array2String__500 took 13.000000006286427 milliseconds.
  VM1410:342 Call to array2String__600 took 25.30000000842847 milliseconds.
  VM1410:347 Call to array2String__700 took 12.799999996786937 milliseconds.
  VM1410:352 Call to array2String__800 took 20.600000018021092 milliseconds.
  VM1410:357 Call to array2String__550 took 19.99999998952262 milliseconds.
  VM1410:362 Call to array2String__910 took 25.199999974574894 milliseconds.
  VM1410:371 Call to array2String__990 took 11.200000008102506 milliseconds.
  VM1410:376 Call to array2String__998 took 10.900000022957101 milliseconds.
  VM1410:385 Call to array2String__999 took 7.400000002235174 milliseconds.

  Firefox
  Call to array2String__000 took 9 milliseconds. debugger eval code:297:3
  Call to array2String__100 took 9 milliseconds. debugger eval code:302:3
  Call to array2String__101 took 18 milliseconds. debugger eval code:307:3
  Call to array2String__102 took 37 milliseconds. debugger eval code:312:3
  Call to array2String__110 took 19 milliseconds. debugger eval code:317:3
  Call to array2String__200 took 17 milliseconds. debugger eval code:322:3
  Call to array2String__300 took 10 milliseconds. debugger eval code:327:3
  Call to array2String__400 took 8 milliseconds. debugger eval code:332:3
  Call to array2String__500 took 8 milliseconds. debugger eval code:337:3
  Call to array2String__600 took 17 milliseconds. debugger eval code:342:3
  Call to array2String__700 took 3 milliseconds. debugger eval code:347:3
  Call to array2String__800 took 59 milliseconds. debugger eval code:352:3
  Call to array2String__550 took 4 milliseconds. debugger eval code:357:3
  Call to array2String__910 took 23 milliseconds. debugger eval code:362:3
  Call to array2String__990 took 17 milliseconds. debugger eval code:371:3
  Call to array2String__998 took 9 milliseconds. debugger eval code:376:3
  Call to array2String__999 took 9 milliseconds. debugger eval code:385:3

  Safari
  [Log] Call to array2String__000 took 7 milliseconds.
  [Log] Call to array2String__100 took 7 milliseconds.
  [Log] Call to array2String__101 took 35 milliseconds.
  [Log] Call to array2String__102 took 32.999999999992724 milliseconds.
  [Log] Call to array2String__110 took 44 milliseconds.
  [Log] Call to array2String__200 took 10 milliseconds.
  [Log] Call to array2String__300 took 28 milliseconds.
  [Log] Call to array2String__400 took 25 milliseconds.
  [Log] Call to array2String__500 took 11 milliseconds.
  [Log] Call to array2String__600 took 12 milliseconds.
  [Log] Call to array2String__700 took 5.000000000007276 milliseconds.
  [Log] Call to array2String__800 took 9 milliseconds.
  [Log] Call to array2String__550 took 7.999999999992724 milliseconds.
  [Log] Call to array2String__910 took 22 milliseconds.
  [Log] Call to array2String__990 took 47 milliseconds.
  [Log] Call to array2String__998 took 7 milliseconds.
  [Log] Call to array2String__999 took 8 milliseconds.
*/