Javascript features that every Web Developer should know

Explore the new Javascript features for faster development.

In recent years, Javascript has emerged as a giant in web development. Each year, a new version of ECMAScript is released, the latest one being ECMAScript2020 (ES11). With the emergence of various JS frameworks like Angular, ReactJs, VueJs, NodeJs etc, the need to keep adapting to the newer javascript features has increased.

In this post, I’ve made a compilation of all the new topics in Javascript that I feel every web developer should know. These topics range between ES6 and ES11.

Rest and Spread Operators

Rest Parameters

With the rest parameter, we can represent an indefinite number of arguments as an array. We can pass the arguments in the function prefixed with ... and this will cause all the arguments to be placed within an array.

(You can read more about it here)

function getArgs(x, y, ...otherNum) {
  console.log("x", x)
  console.log("y", y)
  console.log("otherNum", otherNum)
}
getArgs(1, 2, 3, 4, 5);
// expected output: 
// x, 1
// y, 2
// otherNum, [3, 4]

Spread Operator

The spread operator allows expanding an array or an object. It is the reverse of rest parameters i.e. it can be used in function calls instead of function definitions. It can be used for merging arrays, copying array, add elements to an array, or passing array elements etc, in a function call.

(You can read more about it here)

var foo = [1, 2, 3, 4];
var bar = [...foo, 5, 6];
console.log(bar);
// expected output: [1, 2, 3, 4, 5, 6]

Destructuring Assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

(You can read more about it here)

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
// Swap two variables
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
[firstName, lastName] = "Gurseerat Kaur".split(" ");
console.log(firstName) // "Gurseerat"
console.log(lastName) // "Kaur"

Nullish Coalescing

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

In logical OR operator(||), the right-hand side operand is returned when the left-hand side operand is false, 0, null or undefined.

(You can read more about it here)

var defaultVal = false;
console.log(defaultVal ?? 'foo'); // false
console.log(defaultVal ||'bar'); // bar

Optional chaining

By using optional chaining, we can read the value of a property that is deeply stored in an object without validating each reference in the chain. We’ve often encountered the error, “TypeError: Cannot read property ‘value’ of undefined”. We now have an option to access the value by using ?.

(You can read more about it here)

// Traditional Way
if(this.object && this.object.key1 && this.object.key1.key2) {
  value = this.object.key1.key2;
}
// Optional Chaining
value = this.object?.key1?.key2;

Dynamic Import

The static import in javascript evaluates all the code during the load time, whereas, in dynamic import, we can import the modules on-demand or conditionally.

(You can read more about it here)

import('/path/to/my-file.js')
  .then((func) => {
    // Do something with the module.
  });
// Using with await
let module = await import('/path/to/my-file.js');

Short Circuit Evaluation

In short circuit evaluation, expressions with logical AND (&&) and OR (||) operators are evaluated from left to right.

For && operator, if the first expression evaluates to false then the whole expression will be false and the rest of the expressions will not be evaluated.

For || operator, if the first expression evaluates to true then the whole expression will be true and the rest of the expressions will not be evaluated.

var val = 20;  
val == 20 && doSomething(); 
// if (val == 20) doSomething();
val == 10|| doSomething(); 
// if (val != 10) doSomething();

Let’s take another example,

var x = 150;
var value = (x < 100 && 'Below 100') || (x > 200 && 'Above 200') || 'Between 100-200';
console.log(value);
// expected output: 'Between 100-200'

Comma operator

The comma operator(,) evaluates each of its operands from left to right and then returns the value of the right operand. We have to add the expressions wrapped inside parentheses and separated with commas (expr1, expr2) for the comma operator to work.

(You can read more about it here)

var a = 0; 
var b = ( a++, 2 ); 
console.log(a);  // 1
console.log(b);  // 2

In this post, we’ve covered many useful topics in Javascript. These features will really help you in faster development and reduce your code lines. If you have any queries, ask them in the response section. Hope you found the post helpful.

Happy Coding! 😄

References

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript