I'm declaring an object inside one of my components like below:
const data = {
user: id,
userRole: role,
teacherdepartment: department
}
But now I wanted to do this declaration dynamically depends on a specific value, like below:
let usertype='teacher';
const data = {
user: id,
userRole: role,
if(usertype=='teacher'?(teacherdepartment:tdepartment):(studentDepartment:sdepartment))
}
Is this possible. I know I can do it with nested ternary operator. But inside the object structure any simple line that can do that trick?
Update: object values can be easily set using ternary inside the object declaration, but this is for object key so this is not a duplicate of this. Also, in the above example I have put a simple object. Image if the objects have some child and ternary conditions within.
Try with conditional operator for both key and value. Keys can be made dynamic by adding [] around the key expression.
Pseude Code
const data = {
user: id,
userRole: role,
[usertype=='teacher'? 'teacherdepartment' : 'studentDepartment']: usertype=='teacher'? tdepartment: sdepartment,
}
Working Code
const usertype = 'student';
const tdepartment = 'tdepartment';
const sdepartment = 'sdepartment';
const id = 'id';
const role = 'role';
const data = {
user: id,
userRole: role,
[usertype=='teacher'? 'teacherdepartment' : 'studentDepartment']: usertype=='teacher'? tdepartment: sdepartment,
};
console.log(data)I'd avoid a ternary operator altogether because they're confusing to read in a lot of situations. Instead I would create a dictionary that maps user types to string values, and then create the property dynamically with that information.
const userType = 'teacher';
const dict = { teacher: 'tdepartment', student: 'sdepartment' };
const data = {
user: 'id',
userRole: 'role',
[`${userType}Department`]: dict[userType]
}
console.log(data);I think this could be refactored into
let usertype = 'teacher';
let departmentProperty = usertype === 'teacher' ? 'teacherdepartment' : 'studentDepartment';
let departmentValue = usertype === 'teacher' ? 'teacherdepartmentValue' : 'studentDepartment';
const data = {
user: 'id',
userRole: 'role',
[departmentProperty]: departmentValue,
};
console.log(data)