What is finally exported from the file, is it array or object after manipulation shown on the screenshot?

Question

I actually have ESlint errors which don't allow me to do so. I have copy-pasted this this piece of code from the styled-system official website.

So, in the end, what do I get in breakpoints? Is it object or array?

Answer 1

You can desctructure it like this.

const breakpoints = [{ id: 1, size: 512 }, {id: 2, size: 768}, { id: 3, size: 1024 }, { id: 4, size: 1280}]

const breakpointsOriginal = [512, 768, 1024, 1280]

const [sm, md, lg, xl] = breakpoints; // You can use it like sm.size and the sm.size value is = 512
const [small, medium, large, extra_large] = breakpointsOriginal; // You can use small and the small value = 512

Answer 2

export const breakpoints = [512, 768, 1024, 1280];

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;

Tested it in JSFiddle with this code:

const breakpoints = [512, 768, 1024, 1280];

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;

console.log(breakpoints.sm);
console.log(breakpoints.md);
console.log(breakpoints.lg);
console.log(breakpoints.xl);

Worked fine for me. Note that I needed to remove the export in JSFiddle and I also needed to add semicolons for it to work properly.

Edit:

I cannot judge your actual scenario, but I would personally try to avoid extending an array object with such additional properties, unless I really need to access those breakpoints both by property name and by array index, depending on the scenario.

Since I normally only want a single strategy (either array indices or object properties), I would create a "regular" object and add four properties to it.

I could initialize those properties with array destructuring:

const bpArr = [512, 768, 1024, 1280];
const breakpoints = {};

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = bpArr;

But if there would not be a source array with the numeric values of the breakpoints already, I would simply use an object literal for the breakpoints, which is a lot simpler and easier to read:

const breakpoints = {
  sm: 512,
  md: 768,
  lg: 1024,
  xl: 1280
};

Ultimately it's up to you to keep the code as clear and simple as possible and make it only as complex as necessary. ;)

Answer 3

[breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl] = breakpoints;

This will not work as you cannot mix deconstructing and assigning.

Try this:

[sm, md, lg, xl] = breakpoints;