Another way of implementing an If else statement for viewport check?-CodePudding

I am dealing with a simple premise that questions viewport and based on that i am returning different aspectRatios. Now, for some reason i always have else return as true and then millisecond later the viewport gets validated. The result is that i am picking 2 aspect ratios and that makes me download additional image, which presents as unnecessary. I am wondering if there is a way around it, or to write it differently?

const getResponsiveAspectRatio = (): {
    s: ValidRatios
    m: ValidRatios
    l: ValidRatios
  } => {
    if (viewport?.isWrapperWidthAndUp) {
      return { s: "4-3", m: "4-3", l: "4-3" }
    } else if (viewport?.isLargeDesktopAndUp) {
      return { s: "1-1", m: "1-1", l: "1-1" }
    } else if (viewport?.isDesktopAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else if (viewport?.isTabletAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else {
      return { s: "1-1", m: "1-1", l: "1-1" }
    }
  }

CodePudding user response：

Check for viewport explicitely first

const getResponsiveAspectRatio = (): {
    s: ValidRatios
    m: ValidRatios
    l: ValidRatios
  } => {

    if (!viewport) {
      // Viewport is not initialized
      return null; // return null or some value that the calling code can 
                   // handle and will not result in downloading resources
    }
    else if (viewport?.isWrapperWidthAndUp) {
      return { s: "4-3", m: "4-3", l: "4-3" }
    } else if (viewport?.isLargeDesktopAndUp) {
      return { s: "1-1", m: "1-1", l: "1-1" }
    } else if (viewport?.isDesktopAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else if (viewport?.isTabletAndUp) {
      return { s: "3-4", m: "3-4", l: "3-4" }
    } else {
      return { s: "1-1", m: "1-1", l: "1-1" }
    }
  }

CodePudding user response：

An approach which is entirely free of any if...else statement but two if's could be based on a combination of a guard for the nullish viewport parameter (if needed), destructuring assignments and default values as well as a form factor based ratio-config-map where the ratio-config-key is the result of an (early existing) some task.

const getResponsiveAspectRatio = (viewport = null) => {
  // guard for a nullish `viewport` parameter.
  if (viewport === null) {  
    return viewport;
  }
  let ratioConfigKey = '0'; // default config key value.

  const {
    isLargeDesktopAndUp = false,
    isDesktopAndUp = false,
    isTabletAndUp = false,
    isWrapperWidthAndUp = false,
  } = viewport;

  [!!isLargeDesktopAndUp, !!isDesktopAndUp, !!isTabletAndUp, !!isWrapperWidthAndUp]
    // take advantage of an early exiting `some`.
    .some((isFormFactor, idx) => {
      if (isFormFactor) {
        ratioConfigKey = String(idx   1);
      }
      return isFormFactor;
    });

  return ({
    '0': { s: "1-1", m: "1-1", l: "1-1" }, // fallback and/or default
    '1': { s: "1-1", m: "1-1", l: "1-1" }, // isLargeDesktopAndUp
    '2': { s: "3-4", m: "3-4", l: "3-4" }, // isDesktopAndUp
    '3': { s: "3-4", m: "3-4", l: "3-4" }, // isTabletAndUp
    '4': { s: "4-3", m: "4-3", l: "4-3" }, // isWrapperWidthAndUp
  })[ratioConfigKey];
}

console.log(
  'getResponsiveAspectRatio() ...',
  getResponsiveAspectRatio()
);
console.log(
  'getResponsiveAspectRatio({}) ...',
  getResponsiveAspectRatio({})
);
console.log(
  'getResponsiveAspectRatio({ isWrapperWidthAndUp: true }) ...',
  getResponsiveAspectRatio({ isWrapperWidthAndUp: true })
);
console.log(
  'getResponsiveAspectRatio({ isDesktopAndUp: true }) ...',
  getResponsiveAspectRatio({ isDesktopAndUp: true })
);
console.log(
  'getResponsiveAspectRatio({ isLargeDesktopAndUp: true }) ...',
  getResponsiveAspectRatio({ isLargeDesktopAndUp: true })
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

CodePudding user response：

Switch statement would be a better alternative for this type of conditional statements.

Refer this link https://www.javascripttutorial.net/javascript-switch-case/