I'm declaring an object inside one of my ponents 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.

I'm declaring an object inside one of my ponents 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.

• javascript
• conditional-operator

• Does this answer your question? Is it possible to add dynamically named properties to JavaScript object? – Heretic Monkey Commented Oct 20, 2021 at 15:44

4 Answers 4

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)

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)

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,
}