After watching tutorials online or just watching other developers write code I’ve picked up a few helpful Javascript Features I think are pretty cool. I use them quite frequently now and it has definitely changed the way I think and write code.
Null Coalesce
The first javascript feature I would like to talk about is null coalesce. I recently found this javascript operator while I was trying to set default values. I would then call the function that I had the default values in but in the call I would set one of arguments to undefined or zero. Using the (logical OR) || operator the zero would be evaluated as false and the default value would then be used instead of the zero. The same would happen with an undefined or null argument. I could do a quick if statement conditional and it would work just the same but with using null coalesce we end up writing less code more effectively. The null coalesce operator is similar to the (logical Or) || but instead of checking for falsely values null coalesce checks for null or undefined.
Here is the result of using a (logical Or) || operator. As you see the default values are working as planned but when we get a zero value which is evaluated to falsey in javascript the logical or operator will use the default value. The next example is the use of null coalesce which again check only for null or undefined values.
The results from the console.log show that we are able to override the default values using falsey values such as an empty string “ ” or zero. This is very cool and particular operator when working with default values.
Styling Console.log in the console
This is a fun feature that can help when console logging a bunch of information at once or taking another step in your debugging process. We can use css styles in our log that will brighten up our console logs.
Using a %c also know as a css format specifier, everything after the %c is what we would like to style in our console.log. Then using a comma to separate the string we would like to style we apply any css style we would like i.e. font-style, color, font-size, text-shadow, and the list goes on. In the above example I have set the first %c to be styled with a font color blue. With another %c I chose to style the price with a font color of green. We are able to style as many strings as we would like, using the commas to separate which string we would like to style.
Thanks for reading and happy coding! Connect with me on LinkedIn and check out my latest repos on github.