Develop Reference

Best practice using null in a ternary operator in JavaScript

Hey first time poster/user, I have been working through some coding exercises. I wrote a piece of code that passed tests but I am unsure if this is best practice
In this sample I am iterating over an array using the filter function. I am using a call back function that will return words with length greater than 5.
sample code
const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];
const interestingWords = words.filter(word => {
return word ? word.length > 5 : null
})
In my head if the condition isn't met it shouldn't even try to return. What is happening when I return a null? or is this a case where I wouldn't use ternary at all.
The best I got was from MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
The value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. Instead, null expresses a lack of identification, indicating that a variable points to no object. In APIs, null is often retrieved in a place where an object can be expected but no object is relevant.
So should I refrain from returning a null in this context?

All .filter's callback cares about is the truthy or falsey value returned inside it. Here, it'd be better to return that comparison directly, no conditional operator needed:
const interestingWords = words.filter(word => word.length > 5);
A construction like
return word ? word.length > 5 : null
could make sense if you needed to check a sub-property, but only if the array element existed first, eg:
const objects = [
null,
{ word: 'foo' },
{ word: 'barbar' },
null
];
const interestingObjects = objects.filter(
obj => obj ? obj.word.length > 5 : null
);
console.log(interestingObjects);

If elements of the array might be null or undefined, you can use the optional chaining operator.
const interestingWords = words.filter(word => {
return word?.length > 5
})

What is Simpler Way to Write Code That Sums Up Length of Strings including nulls and undefineds in JavaScript

I want to add some defensive coding to the following check. I have 3 strings and I want to know if any of them have anything in them (for my purposes, null or undefined means they do not have anything in them).
if (twitterUrl.length + facebookUrl.length + linkedInUrl.length > 0) {
This works, but feels like very bulky. I use TypeScript and not sure if there is anything there that can help me with this.
if ((twitterUrl ? twitterUrl.length : 0) +
(facebookUrl ? facebookUrl.length : 0) +
(linkedInUrl ? linkedInUrl.length : 0) > 0) {

You can use the fact that empty strings are falsy¹. If you know they'll be strings or null or undefined and you don't need to worry about strings with just whitespace in them (" " is truthy¹), then:
if (twitterUrl || facebookUrl || linkedInUrl) {
If you need to worry about trimming, then a helper function is probably in order:
function present(s) {
return s && (typeof s !== "string" || s.trim());
}
and
if (present(twitterUrl) || present(facebookUrl) || present(linkedInUrl)) {
or
if ([twitterUrl, facebookUrl, linkedInUrl].some(present)) {
¹ falsy and truthy: When you use a value in a condition (like an if), JavaScript will implicitly coerce the value to a boolean. A value that coerces to false is falsy; one that coerces to true is truthy. The falsy values are "", null, undefined, 0, NaN, and of course, false. All other values (including " ") are truthy.

You could define a function as the following one:
function getLength(s){
if(typeof s !== "string") return 0;
return s.length;
}
and then use it like below:
if (getLength(twitterUrl) > 0 || getLenght(facebookUrr) > 0 || getLength(linkedInUrl){
// code
}
Essentially, getLength check if the value you pass when you call the function is a string and if so it returns its length. Otherwise, it returns 0. So in order to achieve that you want, (I want to know if any of them have anything in them), you have to check one by one the strings you have, if the first string has a length greater than zero, there isn't any need to continue the check for the other two strings. Otherwise you call the function on the second string and so on and so forth.

Try like this, normal if statement also works
const socialLinks = [twitterUrl, facebookUrl, linkedInUrl];
const hasSomething = socialLinks.some(social => social);
Here is falsy value like null, undefined, '' and etc., https://developer.mozilla.org/en-US/docs/Glossary/Falsy
if social are empty string('') or null or undefined then it's return false. We omitted return keyword because arrow function has implicit return behaviour.

This is a solution using some(), which checks whether at least one element in the array passes the test implemented by the provided function.
var twitterUrl, facebookUrl, linkedInUrl;
linkedInUrl = 'nonEmpty';
result = [twitterUrl, facebookUrl, linkedInUrl].some(arrVal => arrVal);
console.log(result);

How to handle null values with lodash

This is simple json
{
home: 68
id: 1
name: "RL Conference Room"
nickname: null
setpoint: 32.34
sleep: 58
}
When I get empty key this lodash function works
_.get(room, 'keyName', 'whenKeyNotFound')
But as you can see above i am getting null value in nickname So I want to replace it with name but this doesn't work.
_.get(room, 'nickname', 'name')
Is there any function in lodash which does the trick?
Thank you!!!

In one level scenario and since (in your case) null is also an undesired result it seems you are better of without lodash and simply do this:
room.nickname || room.name
It would actually be shorter and achieve the same result in your case.
You could also do:
let name = _.defaultTo(room.nickname, room.name)
_.defaultTo to protects you from null, NaN and undefined
So in the case above you would get the obj.name but if you have nickname set you would get that.
In scenarios where you have a long path you can utilize _.isEmpty in a custom function like this:
const getOr = (obj, path, def) => {
var val = _.get(obj, path)
return _.isEmpty(val) ? def : val
}
This will handle your null as well as other scenarios as per _.isEmpty docs.
You can simply then use as:
getOr(room, 'nickname', room.name)
And you can nest it:
getOr(room, 'nickname', getOr(room, 'name', 'N/A'))

You can rely on the fact that null, undefined, etc. are falsy, and use the || operator.
_.get(room, 'nickname') || _.get(room, 'name')

Since null is falsy, you can do
_.get(room, 'nickname') || 'name'
.get only returns the third argument if the result is undefined
see: https://lodash.com/docs/4.17.10#get

How to handle missing JSON data when creating objects? (Typescript)

I am retrieving data from the Google Places API and casting it directly into objects for use elsewhere.
The problem is that sometimes the responses do not have all of the fields, so this causes my app to crash when the objects can't properly be created due to missing fields in the JSON response.
Here is an example of what I am talking about:
say the format of a response for example is this:
{ "a" : "some_str", "b" : "some_str", "c" : "some_str" }
but once in a while field "b" will be missing, so the response looks like this:
{ "a" : "some_str", "c" : "some_str" }
How can I account for this when I try to parse the JSON data into objects?
For example, here is a code that I would use to parse the data:
this.http.get(URL).subscribe(details => {
let detailsObj = details.json();
let myObj: SomeObject = {
"fieldA" : detailsObj.a,
"fieldB" : detailsObj.b,
"fieldC" : detailsObj.c,
}
});
If the field "b" doesn't exist on the JSON response, the value will be undefined on the "detailsObj" which causes a runtime error as it is trying to create an object with an undefined field.
How can I still create the object despite the partially undefined data? Ideally the data that is missing could be filled with a null.
Any pointers in the right direction would be greatly appreciated, thank you for your time!

Use || to fill in null when b is missing:
"fieldB" : detailsObj.b || null,
or be more robust and specifically check for undefined:
"fieldB" : detailsObj.b === undefined ? null : detailsObj.b,
The first option is more concise and easier to read, but it will set the value to null if b is 0 or false or some other falsey value.

Have you tried the LoDash _.get function? You can do
Const _ = require("lodash");
"fieldA": _.get(detailsObj, "a", null);

you can try this :
interface SampleInterface {
a ?: string;
b ?: string;
c ?: string;
}
var obj = { "a" : "some_str1", "c" : "some_str3" };
sampleInterface : SampleInterface = obj;
console.log(SampleInterface.b);

Comparing to multiple values using |

var newArr = arr.filter(function(val){
return val != false|null|0|""|undefined|NaN;})
I'm trying to filter our values that equal false, null, 0, "", undefined, NaN.
The code above seems to work for false, 0, and "" and I'm not sure if I'm writing null, undefined and NaN incorrectly or if the code is not supposed to work at all.
Please let me know if this is just wishful thinking

You should be able to achieve that by just returning the value itself (if you double "negate" you get a boolean)
var newArr = arr.filter(function(val){ return !!val })
That's possible because all of those values are "considered false" in javascript
If you want to clearly show all the options, then the easiest way is to use an && (AND) operator.
val !== false && val !== null && val !== 0
and so on... (or as mentioned by Jeremy Banks, use an Array together with indexOf)