readability-vs-performance

JavaScript performance comparison

Test case created by koronya

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  const datas = [
    {
      name: "Tom",
      count: 3,
      quantity: 5
    },
    {
      name: "Sam",
      count: 2,
      quantity: 4
    },
    {
      name: "Tom",
      count: 5,
      quantity: 10
    },
    {
      name: "Sam",
      count: 3,
      quantity: 5
    },
    {
      name: "Tom",
      count: 8,
      quantity: 20
    },
    {
      name: "Sam",
      count: 5,
      quantity: 8
    }
  ]
  
  const infosObj = {
    Tom: {},
    Sam: {}
  }
  const getDifferenceArr = arr => {
    const arrLen = arr.length;
    const diffArr = [0];
  
    for (let i = 1; i < arrLen; i += 1) {
      diffArr.push(arr[i] - arr[i - 1]);
    }
  
    return diffArr;
  }
  
  
  const getObj = (infosObj, datas) => {
    // 초기화 로직
    Object.keys(infosObj).map(name => {
      const info = infosObj[name];
      info.countArr = [];
      info.quantityArr = [];
    });
  
    // countArr, quantityArr 추가 로직
    // datasLen만큼 순회(6번))
    for (let i = 0, datasLen = datas.length; i < datasLen; i += 1) {
      const data = datas[i];
      infosObj[data.name].countArr.push(data.count);
      infosObj[data.name].quantityArr.push(data.quantity);
    }
  
    // diffArr 추가 로직
    Object.keys(infosObj).map(name => {
      const info = infosObj[name];
      info.diffCountArr = getDifferenceArr(info.countArr);
      info.diffQuantityArr = getDifferenceArr(info.quantityArr);
    });
  
    return infosObj;
  };
  
  
  const getObj2 = (infosObj, datas) => {
    Object.keys(infosObj).map(name => {
      const info = infosObj[name]
      info.countArr = []
      info.quantityArr = []
  
      // datasLen만큼 순회 * infosObj의 key만큼 순회
      // 여기에서는 (6번(filter) + 3번(map)) * 2 = 18번만큼 순회?
      datas
        .filter(data => data.name === name)
        .map(data => {
          info.countArr.push(data.count)
          info.quantityArr.push(data.quantity)
        })
  
      info.diffCountArr = getDifferenceArr(info.countArr)
      info.diffQuantityArr = getDifferenceArr(info.quantityArr)
    })
  
    return infosObj
  }
  
  
  
  const getResultStructure = () => ({
    countArr: [],
    quantityArr: [],
    diffCountArr: undefined,
    diffQuantityArr: undefined
  });
  
  const getObj3 = datas => {
    return Object.entries(
      datas.reduce(
        (acc, { name, count, quantity }) => {
          const user = acc[name];
          user.countArr.push(count);
          user.quantityArr.push(quantity);
          return acc;
        },
        { 
          Tom: getResultStructure(),
          Sam: getResultStructure()
        }
      )
    )
    .reduce(
      (acc, [name, user]) => {
        acc[name] = user;
        user.diffCountArr = getDifferenceArr(user.countArr);
        user.diffQuantityArr = getDifferenceArr(user.quantityArr);
        return acc;
      },
      {}
    );
  };
  
  

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
getObj
getObj(infosObj, datas)
pending…
getObj2
getObj2(infosObj, datas)
pending…
getObj3 - from ENvironmentSet
getObj3(datas)
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments