Latest JavaScript Features Every Web Developer Should Know

Hello 👋 and welcome to Codipher. Today we are going to take look at the latest javascript features that are introduced recently in javascript. At the last of this post, I will also share some unique tips and tricks that are going to be very useful while coding.

So without wasting time let’s get started.

Javascript Features

1. Numeric Separator

Large numeric literals are difficult for the human eye to parse quickly.

The numeric separator allows you to add underscores between digits in literal numbers, which makes them more readable.

let value1 = 245000000000
let value2 = 245_000_000_000

The underscores will be stripped out automatically when the files get parsed.

2. Nullish Coalescing

The nullish coalescing operator (??) allows us to check nullish values instead of falsy values.

let count1 = 0
let result1 = count ?? 1
console.log(result1) //output: 0

let count2 = null
let result2 = count2 ?? 1
console.log(result2) //output: 1

Nullish Coalescing operator (??) is a better choice than the logical OR operator (||) if you want to assign a default value to a variable.

3. Bigint

The maximum number you can store as an integer in javascript is 2⁵³ – 1.

BigInt allows you to go even beyond that, such that it provides a way to represent whole numbers larger than 2⁵³ – 1.

Also Read: Best VSCode Extensions you should consider in 2022

A Bigint is created by appending n to the end of an integer literal or by calling the function BigInt that creates BigInts from strings, numbers, etc.

const bigint = 12345678901234567890n

const sameBigint = BigInt("12345678901234567890")

const bigIntFromNumber = BigInt(10) // same as 10n

4. Optional Chaining

The optional chaining operator allows you to access properties of potentially undefined or null values without throwing an exception.

It allows you to access nested object properties without worrying if the property exists or not.

const user = {
  dog: {
    name: "cheems"
  }
}

console.log(user.monkey?.name) //undefined
console.log(user.dog?.name) //cheems

5. Promise.any()

Promise.any() takes an iterable of promise objects.

It returns a single promise that resolves as soon as any of the promises in the iterable fulfills, with the value of the fulfilled promise.

const promise1 = /* some code */
const promise2 = /* some code */
const promise3 = /* some code */

const promises = [promise1, promise2, promise3]

Promise.any(promises).then((value)=>console.log(value))

6. Private Fields

Just for context let me tell you that private properties or methods can only be accessed from inside of a class.

By default, all properties in ES6 classes are public and can be examined or modified outside the class.

Starting from ECMAScript 2022, private class fields can be defined using a hash # prefix.

class Counter{
  //public property (can be accessed anywhere)
  defaultCount = 1

  //private property (can only be accessible within the class)
  #count = 24

  //private method (can only be called within the class)
  #increaseCount(){
    console.log("I am increaseCount")
  }
}

let newCount = new Counter()
console.log(newCounter.defaultCount) //output- 1
console.log(newCounter.count) //output- undefined
newCounter.increaseCount() //this will throw TypeError (newCounter.increaseCount is not a function)

7. replaceAll()

Until now we had to use regex to replace all the character/word occurrences in a string.

But the new replaceAll() method made it very easier to replace all instances of the character/word occurrences in a string.

//without replaceAll
const str1 = "Hi+i+am+codipher"
const resultantStr1 = str1.replace(/\+/g, " ")
console.log(resultantStr1) //output- Hi i am codipher

//with replaceAll
const str2 = "You+are+awesome"
const resultantStr2 = str2.replaceAll("+", " ")
console.log(resultantStr2) //output- You are awesome

Also Read: GitHub Repos That You Won’t Believe Exist

8. Logical OR assignment (||=)

The logical OR assignment operator (||=) is a short-circuit operation just like the logical OR operator (||).

Consider the below example

let x = 0
let y = 15
x ||= y
console.log(x) //output- 15

x||=y actually means x||(x=y).

That means y will only be assigned to x if x is a falsy value.

In our code x contains 0 which is a falsy value and hence assignment happens and x becomes 15.

Suppose if x was a truthy value then the assignment will not happen and x will retain its original value.

9. Logical AND assignment (&&=)

The logical AND assignment operator (&&=) is the opposite of the logical OR assignment operator.

Consider the below example

let x = 20
let y = 15
x &&= y
console.log(x) //output- 15

x &&= y actually means x&& (x=y).

That means y will only be assigned to x if x is a truthy value.

In our code x contains 20 which is a truthy value and hence assignment happens and x becomes 15.

Now suppose if x was a falsy value then the assignment will not happen and x will retain its original value.

Also learn, How To Use JavaScript Date() Object, Fast and Easy

10. Logical nullish assignment (??=)

Similar to the Nullish Coalescing operator (??) an assessment is performed only when the left operand is nullish or undefined.

Consider the below example

let x = null
let y = 56
x ??= y
console.log(x) //output- 56

x ??= y actually means x??(x=y).

That means y will only be assigned to x if x is a nullish (i.e. either null or undefined)

In the code x is nullish hence assignment will happen and y will become 56.

If x was not nullish then the assignment will not happen and x will retain its original value.

9 Common Javascript Math Functions

The Math object in javascript allows us to perform mathematical tasks on numbers.

So let’s understand some helpful methods of the math object in javascript.

1. Math.trunc()

It returns only the integer part of the given number by simply removing fractional units.

console.log( Math.trunc(-0.5) ) //output- -0
console.log( Math.trunc(2.9) ) //output- 2
console.log( Math.trunc(5.05) ) //output- 5
console.log( Math.trunc(-60.2) ) //output- -60

2. Math.floor()

The Math.floor(x) returns the value of x rounded down to its nearest integer. Where x will be a number.

Also Read: Scss vs Bootstrap vs Tailwind CSS

console.log( Math.floor(2.5) ) //output- 2
console.log( Math.floor(5.99) ) //output- 5
console.log( Math.floor(-4.05) ) //output- -5
console.log( Math.floor(-6.25) ) //output- -7

3. Math.ceil()

The Math.ceil(x) returns the value of x rounded up to its nearest integer. Where x will be a number.

console.log( Math.ceil(2.5) ) //output- 3
console.log( Math.ceil(5.99) ) //output- 6
console.log( Math.ceil(-4.05) ) //output- -4
console.log( Math.ceil(-6.25) ) //output- -6

4. Math.abs()

This method returns the absolute i.e. positive value of the given number.

console.log( Math.abs(20.2) ) //output- 20.2
console.log( Math.abs(-10.2) ) //output- 10.2
console.log( Math.abs(-66.1) ) //output- 66.1
console.log( Math.abs(-22.9) ) //output- 22.9

5. Math.random()

This method returns a random number between 0 (inclusive) and 1 (exclusive).

console.log( Math.random() ) //output- 0.0537804676952407
//note- the output will be random everytime

6. Math.pow()

This method takes two parameters i.e. Math.pow(x,y) and it returns the valueof x to the power of y.

console.log( Math.pow(6,3) ) //output- 216
console.log( Math.pow(2,10) ) //output- 1024

7. Math.sqrt()

This method simply returns the square root of the given number.

console.log( Math.sqrt(64) ) //output- 8
console.log( Math.sqrt(100) ) //output- 10
console.log( Math.sqrt(150) ) //output- 12.24744871391589

8. Math.min()

It returns the lowest value from a list of numeric values passed as parameters.

console.log( Math.min(21,40,52,80,10) ) //output- 10
console.log( Math.min(-2,-100,22,50) ) //output- -100

9. Math.max()

It returns the highest value from a list of numeric values passed as parameters.

console.log( Math.max(21,40,52,80,10) ) //output- 80
console.log( Math.max(-2,-100,22,50) ) //output- 50

Must Know Javascript Tips And Tricks

1. Removing Duplicates

If I have many duplicates in an array this is useful.

let array = [1,2,3,4,5,6,7,8,9]
let outputArray = Array.form(new set(array))

2. Populating An Array

I work with value boolean, strings, and numbers.

let output = new array(arraysize).fill(null).map(()=>)(
{
  "hello": 'bye'
})

3. Disable Right Click

Block access to the context menu on your site

<body oncontextmenu="return false">

4. Number To String

The simplest way to convert numbers into strings in javascript.

Also Read: Speed Up Your Website With These Simple CSS Tips

let num = 15
let n = num.tostring()

5. Sum All The Values From An Array

let numbers = [3,5,7,2]
let sum = numbers.reduce((x,y) => x + y)
console.log(sum) //returns 17

6. Using Length To Resize An Array

let array = [11, 12, 13, 14, 15]
console.log(arrays.length) //5

arrays.length = 3
console.log(array.length) //3
console.log(array) //[11,12,13]

array.length = 0
console.log(arrays.length) //0
console.log(array) //[]

7. Shuffle Elements From Array

let list = [1,2,3,4,5,6,7,8,9]
console.log(list.sort(function() {
    return Math.random() - 0.}))
//[4,8,2,9,1,3,6,5,7]

8. Filtering For Unique Values

const my_array = [1,2,2,3,3,4,5,5]
const unique_array = [...new Set(my_array)]
console.log(unique_array) //[1,2,3,4,5]

9. Comma Separator

The comma separator (,) evaluates each of its operands (from left to right) and returns the value of the last operand.

let x = 1
x = (x++, x)
console.log(x) //expected output: 2
x = (2,3)
console.log(x) //expected output: 3

10. Swap Values With Array Destructuring

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) //output: 2
console.log(b) //output: 1

11. Short Circuit Conditionals

if (hungry) {
    goToFridge()
}

We can make it shorter by using variables with the function.

hungry && goToFridge()

5 Best Online Courses To Learn JavaScript

Also Read 40 Best Websites Every Developer and Designer Should Follow

That’s it for this post guys. I hope you liked this article and learned something new from here. If you want to read more articles like this then click here. It will take you to the homepage of our site Codipher, where you will find a lot of content on programming.