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);Use a ternary operator to do it cleaner.
const data = {
apple: document.documentElement.clientWidth <= 1280 ? "Red" : "Yellow",
};
console.log(data);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);
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',
}