Javascript object declaration with ternary operator

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.

Does this answer your question? [Is it possible to add dynamically named properties to JavaScript object?](https://stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object) — Heretic Monkey, Oct 20 '21 at 15:44

Nitheesh · Answer 1 · 2021-10-20T15:48:51.107

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)

score 1 · Answer 2 · answered Oct 20 '21 at 15:39

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)

Dave Newton · Answer 3 · 2021-10-20T15:55:35.603

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

score 1 · Answer 4 · answered Oct 20 '21 at 15:53

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

Javascript object declaration with ternary operator

4 Answers4