Any way to use 'defined' operator on object keys?

Artur Müller Romanov

I have a v-if condition that fails if a state is undefined. The state is nested and pretty large (10k+ entries) and might take time to be constructed. A state's subitem [0].expand of boolean type has to be checked in order to pass the v-if condition:

v-if="
  // condition required to prevent index [0] from failing
  (state.priceClassData[type]
    ? state.priceClassData[type][0].expand
    : false)
  "

I've been trying to refactor this into something more human-readable. In production there are multiple such condition checks in one ternary operator and I am trying to find a way to replace it.

The easiest thing I thought would be to use the ? defined operator on state.priceClassData.type? but as you can see, type in my case is a key and has to be called like so:

state.priceClassData[type][0]

I've not found a way to apply ? here. Other attempts include computed:

const checkCondition = computed(() => {
  if (state.priceClassData[type] && state.priceClassData[type][0]) {
    return state.priceClassData[type][0].expand
  }
  return false
})

but I can't find a way to pass the type parameter into it, making it always return true. I've also tried ordinary functions:

function checkCondition(type) {
  return (state.priceClassData[type] && state.priceClassData[type][0])
    ? state.priceClassData[type][0].expand
    : false
}

but it only seems to be executed initially, returning false and never run again.

I've also tried combining functions and computed:

const checkCondition = (type) => computed(() => {
  return (state.priceClassData[type] && state.priceClassData[type][0])
    ? state.priceClassData[type][0].expand
    : false;
}

which always returns true or:

const checkCondition = computed({
  get() {
    return state.priceClassData
  },
  set() {
    return (state.priceClassData[type] && state.priceClassData[type][0])
    ? state.priceClassData[type][0].expand
    : false;
  }
})

which doesn't seem to accept the syntax.

Unmitigated

You can use optional chaining and nullish coalescing:

state.priceClassData[type]?.[0].expand ?? false

You can easily add more ? along the chain of property accesses to guard against intermediate values being null or undefined.

Note however, that you don't actually need to have the whole expression be strictly equal to false for v-if. undefined is also falsy, so v-if will not render the element if it's passed an expression evaluating to undefined. Thus v-if="state.priceClassData[type]?.[0].expand" should suffice.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Is there way to use the spread operator to merge two objects such that the result has the keys of one object, but the values of the second?

Is there any way to avoid use of Ternary Operator?

Is there a way to use variable keys in a JavaScript object literal?

Is there a way we can re-use value of defined keys in EDN?

Is there any way to use a numeric type as an object key?

Is there any way to rename js object keys using underscore.js

How can I loop through an object that has defined keys and use the keys to index an object of the same type?

Is there any way to use a string as a comparison operator in Javascript or with jQuery?

Where is == operator defined in Class "object"?

Is there a way to use a variable for an operator?

Is there any way to use an object across two STA threads in WPF?

Is there any way to use values from a JSON object in a SQL Select statement?

AWS CloudFormation - Any way to use an intrinsic function as an object key?

How to use a custom class as key with std::map if there is no logical way to have a comparison operator defined?

Can I change the way keys are compared in a Python dict? I want to use the operator 'is' instead of ==

Any modern way to disable sort in Object.assign if objects has numeric keys?

What would be the best way to check if any of the keys in an array of objects contain a value from an object of arrays array?

Does the ternary operator short circuit in a defined way

Any way to use EmbeddedNativeLibrary?

Is there any way to use more than one attribute/method with ampersand colon operator in Ruby?

Is there a way to match dynamic object keys?

Typescript dynamic object keys with defined values

The operator '[]' isn't defined for the class 'Object'. Dart

Flutter The operator '[]' isn't defined for the type 'Object'

The operator '[]' isn't defined for the class 'Object?'

The operator '[]' isn't defined for the type 'Object' with Flutter

Is there any way to create a user defined signal in Linux?

Any way to get a list of functions defined in a module?

Is there a way to use or operator || on char in java?