Make code easier to read: Imperative vs Functional Performance

by Cristi Salcescu

JavaScript

const tasks = createALotOfTasks();
executeAndMeasure(processInTerativeStyle);
executeAndMeasure(processInFunctionalStyle);


function executeAndMeasure(process){
  const t0 = performance.now();

  const data = process();

  const t1 = performance.now();
  console.log("Duration: " + (t1 - t0) + " milliseconds.");
}

function processInTerativeStyle(){
  let filteredTasks = [];
  for(let i=0; i<tasks.length; i++){
      let task = tasks[i];
      if (task.type === "RE" && !task.completed) {
         filteredTasks.push({ ...task, userName: task.user.name });
      }
  }
  return filteredTasks;
}

function processInFunctionalStyle(){
	let filteredTasks = tasks.filter(isPriorityTask).map(toTaskView);
  return filteredTasks;
}


//Functional
function isPriorityTask(task){
  return task.type === "RE" && !task.completed;
}

function toTaskView(task) {
  return { ...task, userName: task.user.name };
}
  
//Generate tasks
function createALotOfTasks(){
  const arr = [];

  for(i=0; i < 100000; i++){
    let isReview = Math.round(Math.random());
    arr.push({ 
      id : i,
      type : (isReview) ? "RE" : "NC",
      desc : "task" + i,
      user : { id: i, name: "user" + i},
      completed : false
    });
  }
  return arr;
}