Benchmark: Bechmark mapper - MeasureThat.net

1st

const generateResponsiveStyles = (styles) => {
  const responsiveObject = {};
  for (const breakpoint in styles) {
    if (styles[breakpoint]) {
      for (const property in styles[breakpoint]) {
        responsiveObject[property] = {
          ...responsiveObject[property],
          [breakpoint]: styles[breakpoint][property],
        };
      }
    }
  }
  return responsiveObject;
};

console.log('res', generateResponsiveStyles({
      fontSize: "14px",
      fontWeight: 600,
      lineHeight: "145%",
      letterSpacing: "-0.05em",
      textDecoration: "none",
      textTransform: "none",
    }));

2nd

const generateResponsiveStyles = (styles) => {
  return Object.entries(styles).reduce(
    (responsiveObject, [breakpoint, properties]) => {
      Object.entries(properties).forEach(([property, value]) => {
        responsiveObject[property] = {
          ...(responsiveObject[property] || {}),
          [breakpoint]: value,
        };
      });
      return responsiveObject;
    },
    {}
  );
};

console.log('res', generateResponsiveStyles({
      fontSize: "14px",
      fontWeight: 600,
      lineHeight: "145%",
      letterSpacing: "-0.05em",
      textDecoration: "none",
      textTransform: "none",
    }));

3rd

const generateResponsiveStyles = (styles) => {

  return Object.entries(styles).reduce(

    (mainAcc, [currentBreakpointKey, currentBreakpointValue]) => {

      if (!currentBreakpointValue) return mainAcc;

      return _.merge(

        mainAcc,

        Object.entries(currentBreakpointValue).reduce(

          (propertyAcc, [currentPropertyKey, currentPropertyValue]) => ({

            ...propertyAcc,

            [currentPropertyKey]: {

              [currentBreakpointKey]: currentPropertyValue,

            },

          }),

          {}

        )

      );

    },

    {}

  );

}
console.log('res', generateResponsiveStyles({
      fontSize: "14px",
      fontWeight: 600,
      lineHeight: "145%",
      letterSpacing: "-0.05em",
      textDecoration: "none",
      textTransform: "none",
    }));

Bechmark mapper (version: 0)

Comparing performance of: 1st vs 2nd vs 3rd

Created: 2 years ago by: Registered User

Jump to the latest result

1st

2nd

3rd

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Test case name	Result
1st
2nd
3rd