Learn the basics of modern JavaScript (ES6+)

10 modern features you should start using in your code

Published in

Geek Culture

4 min readSep 5, 2022

You probably already know JavaScript is a feature-rich programming language, which keeps getting enhanced on each update.

There’s a lot to keep up to, and you might still find yourself doing things the old way. So here is 10 ways you can modernize your JavaScript code.

1.  Arrow Functions2.  Default Parameters3.  Object Instead of Switch4.  Optional Chaining5.  Destructuring6.  Ternary Operator7.  Nullish Coalescing Operator8.  Map and Set9.  Object.hasOwnProperty()10. Iterating an Object

1. Arrow Functions

A compact alternative to the traditional function expression. There’s some limitations, like not having this binding, but it will still do the job for your average needs.

Here’s a traditional anonymous function compared to an arrow function:

It’s already more concise, but we can do better. When the function body is made of one line, body brackets and return keyword can be omitted, so here we implicitly return a + 5:

(a) => a + 5;

The party doesn’t stop here. When there’s a single argument, we can also omit the argument parentheses:

a => a + 5;

What if we need it to be a named function? We just declare it in a variable:

const sum = a => a + 5;

2. Default Parameters

Sometimes you want an optional parameter to have a default value. That’s the value used when the parameter is omitted from the function invocation.

Here’s what a traditional solution looks like, compared to the use of default parameters:

It’s a lot more concise now. We can do the same with arrow functions:

const print = (a = 5) => console.log(`The number is ${a}`);

3. Object Instead of Switch

The switch statement is a staple of software development, as it can tackle a variety of scenarios. Sometimes though, it can be quite verbose, so we might want a simpler alternative.

Here is how we can substitute a switch with an object:

The pairing is done through the object map . Then, we use the bracket property accessor to get the corresponding value.

4. Optional Chaining

The optional chaining operator ? is very useful when you want to access a property safely, but still have your code compact.

Let’s see an example without and with optional chaining:

The same applies for function invocation or array item accessing:

5. Destructuring

A very convenient expression which allows you to extract properties from objects or values from arrays:

We have used brackets and then specified inside of them the property to extract. Here’s an example with arrays:

Here we’ve used square brackets to extract the first and second item from the array.

We can take it to the next level and access nested properties like the following:

Or we could even mix both array and object destructuring:

6. Ternary Operator

An operator that takes three operands: a condition, an expression to execute if the condition is truthy, an expression to execute if the condition is falsy. It is a compact alternative to the if else statement.

You might also go for more complex use cases by nesting conditions:

I suggest you use this operator with caution as it can get tricky readability-wise. For more complex use cases, you should probably avoid it.

7. Nullish Coalescing Operator

Often you have to provide a default value for your variable. Some time ago your only concise option was to use the logical OR operator || . You had to be careful about one thing though (and you still do). The default value is used in case the left operand is falsy, not false.

Sometimes that could make a big difference, resulting in unexpected behaviours. Let’s see an example:

Those two functions will work just fine for the majority of users. However, for the user which id is 0, the two functions will behave much differently: In the top one, the output will be wrong, since the id with value 0 is falsy, therefore defaulting to the placeholder.

The bottom one however will work correctly. Since we have used the ?? operator, it only considers false left operands, therefore treating 0 as a valid value, which in this case is what we want.

Both operands are very useful and you should use one or the other depending on what’s the behaviour you’re looking for.

8. Map and Set

A mistake juniors often make is using arrays for everything. There are other data structures!

The Map class is convenient when you want to pair keys with values. It is similar to Objects, but there are also some differences which could make Map more suitable for some use cases. For instance, Map’s keys can be something different than strings.

Here’s an example:

Retrieving a value by key is very easy

The Set class on the other hand is very handy when you need to store a list of values which are unique. That means, each value appears only once in the Set.

Checking for a value existence or deleting it is very easy

Mutating the Set is very easy compared to an array. Of course, the Set class is only intended for certain use cases.

9. Object.hasOwnProperty()

A method that returns true if the object it gets invoked on has the specified property. It is also fairly reliable as it only considers the object’s own properties and not any inherited property.

Here’s a usage example:

10. Iterating an object

Sometimes you might need to iterate through an object’s properties. Now of course you can’t just do that since an object isn’t iterable. Here’s three methods that can help you with that:

Each method has a different outcome, whether you need to iterate the object’s keys, values, or both.

Wrapping It Up

All right, that was it for today, I hope you found it useful!

Thanks for reading. Stay tuned for more!

References

Cover image

Photo by Mohammad Rahmani on Unsplash