Properties and subproperties undefined check [duplicate] - javascript

This question already has answers here:
Test for existence of nested JavaScript object key
(64 answers)
Closed 2 years ago.
I currently have this JavaScript function lying around within my code:
getCoverPhoto(item) {
if (item != undefined && item.gallery != undefined && item.gallery[0] != undefined)
return item.gallery[0].media;
return "";
}
How can I simplify the if condition above? And if it can't be simplified, can it be written in a better way?

For example with ternary operator:
getCoverPhoto(item) {
return item && item.gallery && item.gallery[0] ? item.gallery[0].media : '';
}
Read further in the documentation:
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.
Or with ES6+:
const getCoverPhoto = item => item && item.gallery && item.gallery[0] ? item.gallery[0].media : '';
I hope that helps!

Here is a more simplified version of your code.
getCoverPhoto(item) {
if (item && item.gallery && item.gallery[0])
return item.gallery[0].media;
return "";
}

Use destructing to reduce the conditions. Below code should work for you.
getCoverPhoto(item) {
const { gallery = [] }= item; // this is destructing with default value assignment.
return item.gallery[0] ? item.gallery[0].media : '';
}

Related

How can I input a conditional statement in ternary operator to return true or false in React? [duplicate]

This question already has answers here:
Check variable equality against a list of values
(16 answers)
Closed 6 months ago.
I have the values ​​lightsstasut1error, lightsstasut2error, lightsstasut3error and the strips contain either "Y" or "N". At this time, I want to return true if at least one of the values ​​is N, and false if all of them are Y. So I wrote the code, and if there is even one N, it keeps returning false. How do I fix my code?
this is my code
const errors2 = (lightstasut1error || lightstasut2error || lightstasut3error) === "N" ? true : false;
CHange this to this
const errors2 = (lightstasut1error === "N" || lightstasut2error === "N" || lightstasut3error === "N")
Please check now
Hope it helps, feel free for doubts

Nested ternary into an independent statement typescript?

I am getting the above error with the example code below, I am quite new to nested ternary operations so your help would be appreciated. Example code below:
get notEmptyProduct(): string[] {
return this.contractSettings.allowedRegularEstimateProducts && this.contractSettings.allowedRegularEstimateProducts.length ? this.contractSettings.allowedRegularEstimateProducts : this.contractSettings.allowedControlEstimateProducts && this.contractSettings.allowedControlEstimateProducts.length ? this.contractSettings.allowedControlEstimateProducts : [];
}
Extract this nested ternary operation into an independent statement.
Try moving nested ternary to a separate variable.
notEmptyProduct(): string[] {
const nestedTernaryResult = this.contractSettings.allowedControlEstimateProducts && this.contractSettings.allowedControlEstimateProducts.length ? this.contractSettings.allowedControlEstimateProducts : [];
return this.contractSettings.allowedRegularEstimateProducts && this.contractSettings.allowedRegularEstimateProducts.length ? this.contractSettings.allowedRegularEstimateProducts : nestedTernaryResult;
}
You can make use of Optional chaining and how javascript process Falsy and Truthy values. The last empty array is to make sure that it returns an empty array in case of other failures to comply with method's return type. This is better than having nested ternary operators I believe.
get notEmptyProduct(): string[] {
return (this.contractSettings.allowedRegularEstimateProducts?.length && this.contractSettings.allowedRegularEstimateProducts) || (this.contractSettings.allowedControlEstimateProducts?.length && this.contractSettings.allowedControlEstimateProducts) || [];
}

if/else statement with prompt and || [duplicate]

This question already has answers here:
Check variable equality against a list of values
(16 answers)
Closed 2 years ago.
I have a condition:
if (item == 'a' || item == 'b' || item == 'c' || item == 'd' || item == 'e') {
// statements
}
How can I reduce the branching? Is there any other way to write this in JavaScript.
You can also use the newer Array.includes
if (['a','b','c','d','e'].includes(item)) {
...
}
Another option (for the very specific case you posted) would be to compare unicode point values using </>
if (item >= 'a' && item <= 'e') {
...
}
Use Array#indexOf method with an array.
if(['a','b','c','d','e'].indexOf(item) > -1){
//.........statements......
}
You can use an array as shown below.
var arr = ['a','b','c','d','e'];
if(arr.indexOf(item) > -1)
{
//statements
}
This would work nicely:
if('abcde'.indexOf(item) > -1) {
...
}
You could also use the newer String.prototype.includes(), supported in ES6.
if('abcde'.includes(item)) {
...
}

Best way to address "cannot read property * of undefined"?

This error comes up a lot in javascript development.
cannot read property join of undefined
Is there a best way of dealing with this issue?
Some of the techniques I've used are:
Initialisation
question.tags = question.tags || [];
console.log(question.tags.join(', ');
If statements
if(question.tags) {
console.log(question.tags.join(', ');
}
You can use if..else, Object.hasOwnProperty(), Array.isArray() to determine if question exists and object has property tags and question.tags is an array
if (typeof question === "object"
&& question.hasOwnProperty("tags")
&& Array.isArray(question.tags)) {
//do stuff
} else {
// do other stuff, e.g
// question = {};
// question.tags = [];
}
There is no specific and exact way to do it. If there is an instance of the Array or Object or String, it inhertits the prototypal functions. Like an instance of array has a splice(), String instance has a replace ().
Now when this instance is undefined, it throws JS error. Lets assume a is supposedly an array. You can put a dirty check either by a logical ||
(a || []).length;
or a if block or a ternary property
return a ? a.length || undefined;
or a type check
(Array.isArray(a) || []).length
question.tags ? question.tags : []
You can use === and !== operators in if condition like
if(object.property !== undefined)
{
///write your code here
}
This operator will match your value + type so its easy to identify if mentioned property is undefined or not..hope this will help:)

Testing nested objects as undefined in Javascript [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
javascript test for existence of nested object key
I'm attempting to construct an error message for a formset by testing if a certain object is not undefined, and if it's not undefined, then I end up populating it with that error message. The main problem is that I have to validate if each nested object is undefined, which results in some pretty ugly code. Here's the example:
errorsForField: function(fieldName, formsetName, formNumber) {
if (typeof this.model.errors != 'undefined'){
var fieldError = document.createElement('span');
$(fieldError).addClass('field-error');
// THE FOLLOWING LINE THROWS ERROR.
if (formsetName && _.isUndefined(this.model.errors[formsetName][fieldName]) != true) {
$(fieldError).text(this.model.errors[formsetname][fieldName]);
} else if (typeof this.model.errors[fieldName] != "undefined"){
$(fieldError).text(this.model.errors[fieldName]);
}
this.errors[fieldName] = fieldError.outerHTML;
return fieldError.outerHTML;
}
return false;
},
I get an error stating that I cannot determine [fieldName] of an undefined object this.model.errors[formsetName]. In other words, I have to first determine if this.model.errors[formsetName] is empty and then test if [fieldname] is undefined.
This seems like a really cumbersome solution. Any suggestions for changing this?
You can create a library function that takes property names as parameters and returns the final value if it exists, or null:
function TryGetPropertyValue(o, propertyName1 /*, ... propertyNameN */) {
var names = [].slice.call(arguments, 1);
while (o && names.length) {
o = o[names.shift()];
}
return names.length ? null : o;
}
Call it like:
var err = TryGetPropertyValue(this.model.errors, formsetName, fieldName) ||
TryGetPropertyValue(this.model.errors, fieldName);
if (err != null) {
$(fieldError).text(err);
}
If you want it to return undefined instead of null if the field is not found, you can change the function slightly:
function TryGetPropertyValue(o, propertyName1 /*, ... propertyNameN */) {
var names = [].slice.call(arguments, 1);
while (o && names.length) {
o = o[names.shift()];
}
if (names.length == 0) {
return o;
}
}
http://jsfiddle.net/HbggQ/
As Paul suggested, this is an inherent limitation of Javascript. Even Coffeescript (which is just a layer of syntactic sugar on top of JS) doesn't really solve the problem; it just hides the workaround under it's syntactic sugar (which admittedly is really handy)
If you want to stick to Javascript, you basically have two options: use ternary operators, or use boolean operators. Here's examples of each that check A.B.C.D (where A, B, C or D might not exist):
// Returns A.B.C.D, if it exists; otherwise returns false (via ternary)
return !A ? false :
!A.B ? false :
!A.B.C ? false :
A.B.C.D ? A.B.C.D : false;
// Returns A.B.C.D, if it exists; otherwise returns false (via booleans)
return A && A.B && A.B.C && A.B.C.D;
Obviously the latter is a lot shorter. Both solutions rely on Javascript's "truthiness" (ie. that the values 0, "", null, and undefined count as false). This should be fine for your case, as none of those values will have an errors property. However, if you did need to distinguish between (say) 0 and undefined, you could use the ternary style, and replace !A with typeof(A) == 'undefined'.

Categories