DEV Community: Phantom

ES2020 'nullish coalescing operator' by example

Phantom — Wed, 13 May 2020 19:40:14 +0000

Recently, I presented the 'Optional Chaining' operator. In this article, I'm going to cover another useful feature that comes with ECMA-Script version 11 or ES2020: the 'Nullish Coalescing' operator.
It is a perfect example that such a straightforward topic is wrapped into an allegedly complex expression.

Basically, what the nullish coalescing operator does, is, that it checks a value of its left-hand side whether it's null or undefined. If one of these two suspects is given, the right-hand side of the logical operator is returned, also called a fallback.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured())

// OUTPUT
// 'Fallback Value' ✅

Now you might ask yourself: 'Hey, what about the default value you can set with the logical OR operator?'. That's a valid question indeed. The logical OR operator checks the left-hand side for a falsy value and if it's the case it takes the default value on the right side. Falsy values are 0, false, an empty string, undefined, null and NaN. But what if the value on the left-hand side is supposed to be an empty string, a zero or the boolean false even? Well, then the OR operator wouldn't work as expected.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured || 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// 'Fallback Value' ❌
// expected false

And here comes the 'Nullish Coalescing Operator'. Replace the two pipes with two question marks and the magic has happened. The expression will now only take the default value if the left-hand side is undefined or null.

function setIsFeatured(isFeatured) {
  const featuredVideo = isFeatured ?? 'Fallback Value';
  return featuredVideo; 
}

console.log(setIsFeatured(false))

// OUTPUT
// false ✅

Keep in mind that you cannot chain the 'Nullish Coalescing Operator' with the AND or OR operator directly. You must use parenthesis in order to make it work. Now let's evaluate the if-condition. true || null gives us true. true !== undefined or null so we flow inside the block.

if ((true || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉

Replace true with undefined. undefined || null gives us null and thus, the nullish coalescing operator returns the value of its right-hand side 'Chaining Is Training'. The string is a truthy value and gets type-coerced to true since JavaScript is a weakly or loosely typed language. The if-condition is therefore fulfilled and we get the console.log as well.

if ((undefined || null) ?? 'Chaining Is Training') {
  console.log("I'd like to get logged");
}

// OUTPUT
// "I'd like to get logged" 🎉

What the 'Nullish Coalescing Operator' and the 'Optional Chaining' operator have in common, is, that they both treat undefined and null as specific values.

You're very welcome to subscribe to my YouTube channel for more informative videos: Subscribe! 📹

If you liked the post/video I'd appreciate to see you as a follower on my social media:
➡ YouTube
➡ Twitter
➡ Facebook

ES2020 'optional chaining' by example

Phantom — Tue, 28 Apr 2020 07:47:50 +0000

One of the most anticipated features of ES2020 is 'Optional Chaining'. To recognize its enrichment for the JavaScript developers you first have to understand what it improves. Imagine you make an HTTP request to a server to get a list of employees. In this example, I use the HTTP library 'axios' that makes an XHR request to the server. Since this is promised based I use async-await to make it more readable and wrap it into a try-catch-block.

const apiUrl = 'http://dummy.restapiexample.com/api/v1/employees';

async function fetchEmployees(url) {
  try {

    const response = await axios.get(url);
    const employees= await response.data;

    return employees;

  } catch (error) {
    console.error(error);
  }
}

fetchEmployees(apiUrl);

Let's assume that for some reason, the endpoint is flawed and you get an error. But the error is too generic and you want to have more details about it. Inside the catch-block, we take the error parameter and check with a conditional-statement, whether it has the response, the data and at long last the message property attached to it. And if it's the case we want to console log the message.

if (error.response && error.response.data && error.response.data.message) {
    console.log('Here is the message:', error.response.data.message);
}

Have a second look at the conditional. That looks so repetitive. This is were 'Optional Chaining' makes your coding sessions more comfortable. Instead of digging deeper into the target-property, we can just write it down quite alone but with one difference. Replace the dots in between the chained properties with a question mark followed by a dot. Now 'Optional Chaining' looks up the deeply nested-subproperty 'message' without writing all the references between it.

if (error?.response?.data?.message) {
    console.log('Here is the message:', error.response.data.message);
}

And what about function calls?

You can even use 'Optional Chaining' with function calls of course! Assume we have a Car-Class that has two methods: 'accelerate' and 'brake'. We create a new Car-Instance and let myCar accelerate.

class Car {
  accelerate() {
    return 'Brrr';
  }
  brake() {
    return 'Shhh';
  }
}

const myCar = new Car();

myCar.accelerate(); // 'Brrr'
myCar.brake(); // 'Shhh'

Now it would we neat to brake as well. We call the brake-method and stopping the car. But all of a sudden the brakes are dysfunctional and you cannot brake anymore. In our scenario, our application would crash and so would the car. But not with 'Optional Chaining'. Use the question mark before the dot to make use of it. Your application will not crash anymore but it console logs undefined. And what happens with the car is up to your imagination :-).

myCar.brake?.(); // 'undefined'

If you liked the post/video I'd appreciate to see you as a follower on my social media:
➡ YouTube
➡ Twitter
➡ Facebook

5 JavaScript tips and tricks that are worth using

Phantom — Mon, 27 Apr 2020 07:15:49 +0000

My first dev video on YouTube and thus my first dev article on dev.to. I appreciate to have the opportunity to share my creativity combined with productive content for web developers. I hope you can get something out of the video/article and you might have tips for me to provide better content.

Introduction

There are thousands of useful JavaScript tips and tricks outside, that probably one day our code only consists of tips and tricks. In this article, I'm going to present you my 5 favorite JS tips and tricks to write more readable, more predictable, and thus much cleaner code to make you an efficient developer.

1.) swap variables with destructuring

You've most probably heard of destructuring in JavaScript and once you understand it, it's an excellent feature of ES2015 you don't want to miss out. Destructuring lets you extract the values inside an array into individual variables by merely declaring your new variables on the left side of the equality operator. The array, you want to get the values out of, sits on the right side. Now, the variable cat is assigned to Danny, dog to Catherine, and turtle to Tommy. But something seems to be wrong here right? What if you made a mistake and you interchanged Danny the dog with Catherine the cat by accident? Well, it turns out that you can easily swap the values. On the left side of the equality operator is the array holding the variable you want to swap. The same on the right side with the difference that you change the positions of the two variables. That's it! Catherine and Danny are now in the right shape.

const myPets = ['Danny', 'Catherine', 'Tommy'];

// ES2015 destructuring
[cat, dog, turtle] = myPets;

// swap vars
[cat, dog] = [dog, cat];

2.) fallback / default value with OR

The logical OR operator analyses at least two values of their truthiness. If one value is falsy the other must be truthy in order to get a boolean value of true. But assume you have an object property that gets its value dynamically from - for example - a parameter of a function. What if the parameter is undefined or even null? You could use default parameters that were introduced in ES6 or use a default value if the first value is nothing but void. In this example, we imagine getting two values from a form: firstname and username. The username is optional and if the user does not provide one, the backend creates an anonymouse one using a default/fallback value by typing the logical OR operator after the parameter followed by the default value. In case 'username' is not defined or not existent the object property takes 'phantomCode' rather than 'undefined 'or 'null'.

function sendForm(firstname, username) {
  const userObj = {
    firstname,
    username: username || 'Phantom',
  }
  return userObj;
  // firstname: 'Tailor'
  // username: 'Phantom'
}

sendForm('Tailor');

3.) Remove duplicates inside an array

An array can hold different data types. Basically, you can create an array-ception and make a tremendous amount of nested arrays. Think of an array that holds hundreds of names with a lot of duplicates. You as a developer would like to diminish the array to only hold unique names. There is a cumbersome way to do it by making use of the Array.prototype.filter method and check if the indexes match. But you can do it with a one-liner by just creating a set. A set has the characteristic to only hold unique values. So what we do is we create a new set out of our existing array by passing it as an argument to the Set constructor function. In order to convert it to an array just wrap the whole function inside the Array.from method. Now you have created an ordered set of data that only contains unique strings.

const myNames = ['Jack', 'Christine', 'Alan', 'Lisa', 'Albert', 'Brandon', 'Tim', 'Lisa', 'Marc', 'Jack', 'Alan'];

// cumbersome solution
const myCumbersomeArray = myNames.filter((currentValue, index) => {
  return myNames.indexOf(currentValue) === index;
});

// most convenient way
Array.from(new Set(myNames));

4.) Spread operator at the beginning

Just three dots can make your life as a web developer so much more relaxed. You know what I am talking about: the spread-operator. It allows you to easily concatenate arrays. But did you know that it matters in which place you put your spread-operation in to from a performance perspective? Well, at least it matters in Google Chrome due to their optimized V8 engine.
Consider this example: the function concatenates two arrays that are passed as arguments. It returns a new array that consists of a string and two arrays. And this is the perfect timing to gain a performance boost by solely moving the spread-operations to the front. By changing the position from the end to the front it gives a performance boost of up to 50 % which you probably won't recognize but it matters if you have larger applications and more complex functions. This is due to the so-called 'fast-path optimization' for spread operations. You can dig into the topic very deep by reading the article by the v8 developers.

const part1 = [1, '+', 1];
const part2 = ['=', 2];

function concateArrays(arr1, arr2) {
  // return ['Simple math ...', ...arr1, ...arr2];
  return [...arr1, ...arr2, 'Simple math ...']; // better
}

concateArrays(part1, part2);

5.) for ... of loop

The next tip is about the for-of-loop. It was created to loop over iterable objects like strings, arrays, maps or even NodeLists. It's a neat alternative to other for-loops because it's concise, predictable and easy to read with one blink.
If you have an array you can just call for and pass in a temporary variable or constant followed by the keyword 'of' and then the array. Inside the block, you now have access to every item inside the iterable like in other for-loops.
Same with strings: just imagine an inspiring person and give that person a for-of-loop. What does he do? Well, he splits his name into separate letters.
Then there are so-called 'array-like'-objects. They can be treated as an array but in fact, they aren't. For example the arguments keyword of a function or a NodeList you gather from the DOM.
And for the sake of clarity here is an example with an object. It's slightly different. You have to make use of the Object.entries() method. Put your object as an argument inside and try to log the data. What you get is an array for every key-value-pair.

const shoppingCart = {
  bananas: 3,
  sweets: 1,
  water: 7,
}

for (const item of Object.entries(shoppingCart)) {
  console.log(item);
}

Summary

Alright, that were 5 useful JavaScript tips and tricks. I hope you've learned something new and you can go ahead to improve your code. If you sight anything wrong just let me know! Thanks for reading.

If you liked the post/video I'd appreciate to see you as a follower on my social media:
➡ YouTube
➡ Twitter
➡ Facebook