Dynamic variables based on condition

user_19507498 0
Viewed 44

I'm trying to make the property value of an object to be dynamic based on a given condition.

For example, the property value would become Red if the viewport width is <= 1280 , else it would be Yellow .

I'm trying to use the if...else statement but it shows an error: SyntaxError: missing ) after formal parameters.

const firstData = {
  if (document.documentElement.clientWidth <= 1280) {
    apple: 'Red'
  } else {
    apple: 'Yellow'
  }
};

// Or

const secondData = {
  apple: if (document.documentElement.clientWidth <= 1280) {
    return "Red"
  } else {
    return "Yellow"
  }
};

console.log(firstData, secondData);

javascript
3 Answers

Use a ternary operator to do it cleaner.

const data = {
  apple: document.documentElement.clientWidth <= 1280 ? "Red" : "Yellow",
};

console.log(data);

user_142995980

If You want one line condition then above answer is best but with more conditions you can do something or define the function else where then run it

const obj = {
    apple: (() => {
        if (document.documentElement.clientWidth <= 1280) {
            return 'Red';
        } else {
            return 'Yellow';
        }
    })(),
};

or you can even define dynamic properties

const obj = {
    ...(() => {
        if (document.documentElement.clientWidth <= 1280) {
            return { color: 'Red' };
        } else {
            return { color1: 'Yellow' };
        }
    })(),
    color3: 'red',
};
console.log(obj);
user_132626830

You can't use statement as object value. Instead of this you can use ternary operator.

const object = {
    apple: document.documentElement.clientWidth <= 1280 ? 'Red' : 'Yellow', 
}
user_164777640
Related