带有三元运算符的 Javascript 对象声明

Question

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.

Answer 1

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);

Answer 2

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)

Answer 3

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)

Answer 4

While this can be done in a "one-liner" IMO to preserve readability it shouldn't be.

Instead, check usertype and create an object to include in the resulting data object. This way the changes based on usertype are isolated and easy to reason about. It also allows for additional changes based on usertype as it's isolated from the static properties.

const deptInfo = usertype === 'teacher' ? { teacherDepartment: tDepartment }
  : { studentDepartment: sDepartment }

const data = {
  ...deptInfo,
  user: id,
  userRole: role,
}