Javascript loop for dynamic variables (and values) from array without eval

Question

i'd like to shorten my code, here is what i want to generate :

left_top = {position:"absolute", xPercent:0, yPercent:0, left:"0%", top:"0%"};
left_center = {position:"absolute", xPercent:0, yPercent:-50, left:"0%", top:"50%"};
left_bottom = {position:"absolute", xPercent:0, yPercent:-100, left:"0%", top:"100%"};

center_top = {position:"absolute", xPercent:-50, yPercent:0, left:"50%", top:"0%"};
center_center = {position:"absolute", xPercent:-50, yPercent:-50, left:"50%", top:"50%"};
center_bottom = {position:"absolute", xPercent:-50, yPercent:-100, left:"50%", top:"100%"};

right_top = {position:"absolute", xPercent:-100, yPercent:0, left:"100%", top:"0%"};
right_center = {position:"absolute", xPercent:-100, yPercent:-50, left:"100%", top:"50%"};
right_bottom = {position:"absolute", xPercent:-100, yPercent:-100, left:"100%", top:"100%"};

And here is how i do it :

var output="";
xPos = ["left", "center", "right"];
yPos = ["top", "center", "bottom"];

for (i=0;i<=2;i++){
    xVal = 50*i;
    for(j=0;j<=2;j++){
        yVal = 50*j;
        eval( xPos[i] + "_" + yPos[j] + " = {position:'absolute', xPercent:" + (-xVal) + ", yPercent:" + (-yVal) + ", left:'" + xVal + "%', top:'" + yVal + "%'}");

    }
}

I know that eval is a bad practice so how should i proceed?

Thanks a lot

can I ask why you want to shorten the code? the first example you gave is way more readable and maintainable than the second example... — sngregory
– sngregory, Commented Jul 26, 2018 at 13:57
@sngregory true. In less there's a lot of cases where you need to run that similar code, there's no need for a loop. — Isaac Abramowitz
– Isaac Abramowitz, Commented Jul 26, 2018 at 13:58
@sngregory i do some html5 banners and i try to to get the lightest code i can, but you're surely right, i don't gain so much Ko doing this loop... — bernard
– bernard, Commented Jul 26, 2018 at 14:09
My personal philosophy is to prefer readability of my code over the size of the file. You can always use an automated task to minify the source before deploying to production. — sngregory
– sngregory, Commented Jul 26, 2018 at 14:32

sngregory · Accepted Answer · 2018-07-26 14:07:19Z

1

Something like this would work:

    var output = "";
    xPos = ["left", "center", "right"];
    yPos = ["top", "center", "bottom"];

    var getObj = function (x, y) {
        return { position: "absolute", xPercent: x * - 1, yPercent: y * -1, left: x + '%', top: y + '%' };
    }

    var results = {};

    for (i = 0; i <= 2; i++) {
        xVal = 50 * i;
        for (j = 0; j <= 2; j++) {
            yVal = 50 * j;
            var key = xPos[i] + "_" + yPos[j];
            var obj = getObj(xVal, yVal);
            results[key] = getObj(xVal, yVal);


        }
    }

answered Jul 26, 2018 at 14:07

sngregory

4062 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bernard Over a year ago

works fine, now i'll have to understand how... results[key] = getObj(xVal, yVal); results is an object first, it seems very complicated for me the way you use the getObj function then...

bernard Over a year ago

if you can explain the steps, it would be helpful, anyway thanks a lot

sngregory Over a year ago

I created the results object as a way to dynamically create psuedo variables as properties on the object. You can use the [] operator on an object to dynamically create/access fields on the object. It was the only way I could think of to satisfy your requirement of dynamic variable names without using eval.

bernard Over a year ago

I'm really sorry but actually your code don't work.... i forgot to comment the original code :'D

sjahan · Accepted Answer · 2018-07-26 14:08:27Z

0

Why not using a function?

const getStyle = (horizontal, vertical) => ({
  position: 'absolute',
  xPercent: horizontal === 'left' ? 0 : horizontal === 'center' ? -50 : -100,
  yPercent: vertical === 'top' ? 0 : vertical === 'center' ? -50 : -100,
  left: horizontal === 'left' ? '0%' : horizontal === 'center' ? '50%' : '100%',
  top: vertical === 'top' ? '0%' : vertical === 'center' ? '50%' : '100%'
});

const left_top = getStyle('left', 'top');
const left_bottom = getStyle('left', 'bottom')
const center_center = getStyle('center', 'center');
// etc.
console.log(left_top, left_bottom, center_center);

Just be careful that any unexpected value will fallback to right/bottom.

edited Jul 26, 2018 at 14:08

answered Jul 26, 2018 at 14:03

sjahan

5,9804 gold badges24 silver badges46 bronze badges

Collectives™ on Stack Overflow

Javascript loop for dynamic variables (and values) from array without eval

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related