JSFiddle - React, Tailwind, and code Playground

JavaScript

var arr = Array(10000).fill({status: 'decliend', message: 'message' });

let t0, t1;
const durations1 = [],
      durations2 = [],
      durations3 = [];
      
for (var j = 0; j < 500; j++) {

  t0 = performance.now();
  
  const result1 = arr.reduce(function(acc, el) {
    if (el.status === 'approved') {
      acc.message += el.message + '\n';
    }

    return acc;
  }, { 
    status: 'approved',
    message: '',
  });
  
  t1 = performance.now();
  durations1.push(t1 - t0);

  t0 = performance.now();
  
  const approvedMessages = arr.filter(n => n.status === 'approved').map(n => n.message);
  const result2  = {
    status: 'approved',
    message: approvedMessages.join('\n'),
  };
  
  t1 = performance.now();
  durations2.push(t1 - t0);
  
  t0 = performance.now();
  
  const result3 = {
    status: 'approved',
    message: [],
  };
  
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].status === 'approved') {
      result3.message.push(arr[i].message);
    }
  }
  result3.message.join('\n');
  
  t1 = performance.now();
  durations3.push(t1 - t0);
}

let getAverage = array => array.reduce((a, b) => a + b) / array.length;

console.log('durations1: ', durations1);
console.log('durations2: ', durations2);
console.log('durations3: ', durations3);

alert(`
  duration1: ${getAverage(durations1)}
  duration2: ${getAverage(durations2)}
  duration3: ${getAverage(durations3)}
`)