Ysia Tamas

1573611289

JavaScript | How to handling null and undefined in JavaScript

One aspect of JavaScript development that many developers struggle with is dealing with optional values. What are the best strategies to minimize errors caused by values that could be null, undefined, or otherwise uninitialized at runtime?

Some languages have built-in affordances for those circumstances. In some statically typed languages, you can say that null and undefined are illegal values, and let your programming language throw a TypeError at compile time, but even in those languages, that can’t prevent null inputs from flowing into the program at runtime.

To get a better handle on this problem, we need to understand where these values can come from. Here are some of the most common sources:

  • User input
  • Database/network records
  • Uninitialized state
  • Functions which could return nothing

User Input

When you’re dealing with user input, validation is the first and best line of defense. I often rely on schema validators to help with that job. For example, check out react-jsonschema-form.

Hydrating Records from Input

I always pass inputs I receive from the network, database, or user input through a hydrating function. For example, I’ll use redux action creators that can handle undefined values to hydrate user records:

const setUser = ({ name = 'Anonymous', avatar = 'anon.png' } = {}) => ({
  type: setUser.type,
  payload: {
    name,
    avatar
  }
});
setUser.type = 'userReducer/setUser';

Sometimes, you’ll need to display different things depending on the current state of the data. If it’s possible to display a page before all of the data is initialized, you may find yourself in that situation. For example, when you’re displaying money balances to a user, you could accidentally display a $0 balance before the data loads. I’ve seen this upset users a number of times. You can create custom data types which generate different outputs based on the current state:


const createBalance = ({
  // default state
  state = 'uninitialized',
  value = createBalance.empty
} = {}) => createBalance.isValidState(state) && ({
  __proto__: {
    uninitialized: () => '--',
    initialized: () => value,
    format () {
      return this[this.getState()](value);
    },
    getState: () => state,
    set: value => {
      const test = Number(value);
      assert(!Number.isNaN(test), `setBalance Invalid value: ${ value }`);
      return createBalance({
        state: 'initialized',
        value
      });
    }
  }
});
createBalance.empty = '0';
createBalance.isValidState = state => {
  if (!['uninitialized', 'initialized'].includes(state)) {
    throw new Error(`createBalance Invalid state: ${ state }`);
  }
  return true;
};
const setBalance = value => createBalance().set(value);
const emptyBalanceForDisplay = createBalance()
  .format();
console.log(emptyBalanceForDisplay); // '--'
const balanceForDisplay = setBalance('25')
  .format(balance);
console.log(balanceForDisplay); // '25'
// Uncomment these calls to see the error cases:
// setBalance('foo'); // Error: setBalance Invalid value: foo
// Error: createBalance Invalid state: THIS IS NOT VALID
// createBalance({ state: 'THIS IS NOT VALID', value: '0' });

The code above is a state machine which makes it impossible to display invalid states. When you first create the balance, it will be set to an uninitialized state. If you try to display a balance while the state is uninitialized, you’ll always get a placeholder value (“--”) instead.

To change that, you have to explicitly set a value by calling the .set method, or the setBalance shortcut we defined below the createBalance factory.

The state itself is encapsulated to protect it from outside interference to make sure that other functions can’t grab it and set it to an invalid state.

Note:* If you’re wondering why we’re using strings instead of numbers for this, it’s because I represent money types with big number strings with lots of decimal precision to avoid rounding errors and accurately represent values for cryptocurrency transactions, which can have arbitrary significant decimal precision.*

If you’re using Redux or Redux architecture, you can declare state machines with Redux-DSM.

Avoid creating null and undefined values

In your own functions, you can avoid creating null or undefined values to begin with. There are a couple ways to do that built into JavaScript that spring to mind. See below.

Avoid null

I never explicitly create null values in JavaScript, because I never really saw the point of having two different primitive values that essentially mean “this value does not exist.”

Since 2015, JavaScript has supported default values that get filled in when you don’t supply a value for the argument or property in question. Those defaults don’t work for null values. That is usually a bug, in my experience. To avoid that trap, don’t use null in JavaScript.

If you want special cases for uninitialized or empty values, state machines are a better bet. See above.

New JavaScript Features

There are a couple of features that can help you deal with null or undefined values. Both are stage 3 proposals at the time of this writing, but if you’re reading from the future, you may be able to use them.

As of this writing, optional chaining is a stage 3 proposal. It works like this:

const foo = {};
// console.log(foo.bar.baz); // throws error
console.log(foo.bar?.baz) // undefined

Nullish Coalescing Operator

Also a stage 3 proposal to be added to the specification, “nullish coalescing operator” is basically a fancy way of saying “fallback value operator”. If the value on the left is undefined or null, it evaluates to the value on the right. It works like this:

let baz;
console.log(baz); // undefined
console.log(baz ?? 'default baz');
// default baz
// Combine with optional chaining:
console.log(foo.bar?.baz ?? 'default baz');
// default baz

If the future hasn’t arrived, yet, you’ll need to install @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator.

Asynchronous Either with Promises

If a function may not return with a value, it might be a good idea to wrap it in an Either. In functional programming, the Either monad is a special abstract data type that allows you to attach two different code paths: a success path, or a fail path. JavaScript has a built-in asynchronous Either monad-ish data type called Promise. You can use it to do declarative error branching for undefined values:

const exists = x => x != null;
const ifExists = value => exists(value) ?
  Promise.resolve(value) :
  Promise.reject(`Invalid value: ${ value }`);
ifExists(null).then(log).catch(log); // Invalid value: null
ifExists('hello').then(log).catch(log); // hello

You could write a synchronous version of that if you want, but I haven’t needed it much. I’ll leave that as an exercise for you. If you have a good grounding in functors and monads, the process will be easier. If that sounds intimidating, don’t worry about it. Just use promises. They’re built-in and they work fine most of the time.

Arrays for Maybes

Arrays implement a map method which takes a function that is applied to each element of the array. If the array is empty, the function will never be called. In other words, Arrays in JavaScript can fill the role of Maybes from languages like Haskell.

What is a Maybe?

A Maybe is a special abstract data type that encapsulates an optional value. The data type takes two forms:

  • Just — A Maybe that contains a value

  • Nothing — a Maybe with no value

Here’s the gist of the idea:

const log = x => console.log(x);
const exists = x => x != null;
const Just = value => ({
  map: f => Just(f(value)),
});
const Nothing = () => ({
  map: () => Nothing(),
});
const Maybe = value => exists(value) ?
  Just(value) :
  Nothing();
const empty = undefined;
Maybe(empty).map(log); // does not log
Maybe('Maybe Foo').map(log); // logs "Maybe Foo"

This is just an example to demonstrate the concept. You could build a whole library of useful functions around maybes, implementing other operations like flatMap and flat (e.g., to avoid Just(Just(value)) when you compose multiple Maybe-returning functions). But JavaScript already has a data type that implements a lot of those features out-of-the-box, so I usually reach for that instead: The Array.

If you want to create a function which may or may not produce a result (particularly if there can be more than one result), you may have a great use-case to return an array.

const log = x => console.log(x);
const exists = x => x != null;
const arr = [1,2,3];
const find = (p, list) => [list.find(p)].filter(exists);
find(x => x > 3, arr).map(log); // does not log anything
find(x => x < 3, arr).map(log); // logs 1

I find the fact that map won’t be called on an empty list very useful for avoiding null and undefined values, but remember, if the array contains null and undefined values, it will call the function with those values, so if the function you’re running could produce null or undefined, you’ll need to filter those out of your returned array, as demonstrated above. That could have the effect of changing the length of the collection.

In Haskell, there’s a function maybe that (like map) applies a function to a value. But the value is optional and encapsulated in a Maybe. We can use JavaScript’s Array data type to do essentially the same thing:


// maybe = b => (a => b) => [a] => b
const maybe = (fallback, f = () => {}) => arr =>
  arr.map(f)[0] || fallback;

// turn a value (or null/undefined) into a maybeArray
const toMaybeArray = value => [value].filter(exists);

// maybe multiply the contents of an array by 2,
// default to 0 if the array is empty
const maybeDouble = maybe(0, x => x * 2);

const emptyArray = toMaybeArray(null);
const maybe2 = toMaybeArray(2);

// logs: "maybeDouble with fallback:  0"
console.log('maybeDouble with fallback: ', maybeDouble(emptyArray));
// logs: "maybeDouble(maybe2):  4"
console.log('maybeDouble(maybe2): ', maybeDouble(maybe2));

maybe takes a fallback value, then a function to map over the maybe array, then a maybe array (an array containing one value, or nothing), and returns either the result of applying the function to the array’s contents, or the fallback value if the array is empty.

For convenience, I’ve also defined a toMaybeArray function, and curried the maybe function to make it most obvious for this demonstration.

If you’d like to do something like this in production code, I’ve created a unit tested open source library to make it easier. It’s called Maybearray. The advantage of Maybearray over other JavaScript Maybe libraries is that it uses native JavaScript arrays to represent values, so you don’t have to give them any special treatment or do anything special to convert back and forth. When you encounter Maybe arrays in your debugging, you don’t have to ask, “what is this weird type?!” It’s just an array of a value or an empty array and you’ve seen them a million times before.

Happy Coding

#javascript

What is GEEK

Buddha Community

JavaScript | How to handling null and undefined in JavaScript

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Santosh J

1622036598

JavaScript compound assignment operators

JavaScript is unarguablly one of the most common things you’ll learn when you start programming for the web. Here’s a small post on JavaScript compound assignment operators and how we use them.

The compound assignment operators consist of a binary operator and the simple assignment operator.

The binary operators, work with two operands. For example a+b where + is the operator and the a, b are operands. Simple assignment operator is used to assign values to a variable(s).

It’s quite common to modify values stored in variables. To make this process a little quicker, we use compound assignment operators.

They are:

  • +=
  • -+
  • *=
  • /=

You can also check my video tutorial compound assignment operators.

Let’s consider an example. Suppose price = 5 and we want to add ten more to it.

var price = 5;
price = price + 10;

We added ten to price. Look at the repetitive price variable. We could easily use a compound += to reduce this. We do this instead.

price += 5;

Awesome. Isn’t it? What’s the value of price now? Practice and comment below. If you don’t know how to practice check these lessons.

Lets bring down the price by 5 again and display it.
We use console.log command to display what is stored in the variable. It is very help for debugging.
Debugging let’s you find errors or bugs in your code. More on this later.

price -= 5;
console.log(price);

Lets multiply price and show it.

price *=5;
console.log(price);

and finally we will divide it.

price /=5;
console.log(price);

If you have any doubts, comment below.

#javascript #javascript compound assignment operators #javascript binary operators #javascript simple assignment operator #doers javascript