Javascript - Generalize a function that can be used in two different ways but in the same context

Question

CODE

I have implemented a function that "responsify" dimensions (responsive dimensions).

This is my current method:

export default (originalDimensions, finalWidth = WINDOW_WIDTH) => {
  const responsiveWidth = finalWidth;

  const responsiveHeight = ruleOfThree(
    originalDimensions.height,
    originalDimensions.width,
    responsiveWidth
  );

  return {
    width: responsiveWidth,
    height: responsiveHeight,
  };
};

/* Helper */

function ruleOfThree (originalX, originalY, finalY, direct = true) => {
  if (direct) {
    return (originalX * finalY) / originalY;
  }

  return (originalY * finalY) / originalX;
};

Problem

As you can see, it just returns an object with responsive dimensions. The main problem I am experiencing is that it only adapts the given dimensions to a given "finalWidth". But what if, instead of a finalWidth, I receive a final height (so that the method adapts the original width to that final height)?

How can I add flexibility to the method in order to be able to solve that scenario without having to create another different method?

Any design pattern or idea?

Note

If I pass the final height (instead of a final width) as follows: responsifyDimensions(photo.dimensions, /*finalHeight = 100*/)

then, the method will have to do:

export default (originalDimensions, finalHeight = WINDOW_HEIGHT) => {
  const responsiveHeight = finalHeight; <----

  const responsiveWidth = ruleOfThree(
    originalDimensions.width,
    originalDimensions.height, <-----
    responsiveHeight <-----
  );

  return {
    width: responsiveWidth,
    height: responsiveHeight,
  };
}

Codes look really similar... so I suppose that there could be a simple way to make the original method more "flexible"

Answer 1

I'd go for object deconstructing in the last parameter, and then, depending on which value is set, I'd switch width/height, like so:

export default (originalDimensions, { finalWidth, finalHeight } = {}) => {
  if (finalHeight) {
    return {
      width: ruleOfThree(
        originalDimensions.height,
        originalDimensions.width,
        finalHeight
      ),
      height: finalHeight,
    };
  }

  const width = finalWidth ?? WINDOW_WIDTH;

  return {
    width,
    height: ruleOfThree(
      originalDimensions.width,
      originalDimensions.height,
      width
    ),
  };
};

/* Helper */

function ruleOfThree (originalX, originalY, finalY, direct = true) => {
  if (direct) {
    return (originalX * finalY) / originalY;
  }

  return (originalY * finalY) / originalX;
};

/* usage */

// Fit width
const dimsWidth = responsifyDimensions(photo.dimensions, { finalWidth: 100 });
// Fit height
const dimsHeight = responsifyDimensions(photo.dimensions, { finalHeight: 100 });
// Fit default (WINDOW_WIDTH as width)
const dimsDefault = responsifyDimensions(photo.dimensions);