Top Javascript Features You Should Know in 2021

In this article, we’ll see some tricky scenarios and will be solving them with modern techniques.

1. padStart and padEnd

If you have to show numbers in some standard or minimum digit count, you can use padStart or padEnd.

E.g If you’ve to show days in 2 digit count like 09 Days. So this was the old technique we use to solve this case.

let day = '9';
day < 10 ? `0${day}` : day

And now we can handle it or add multiple digits or characters at the start or end of any string.

day.padStart(2, 0) // this means minimum digit count should be 2 and add 0 at start if characters are less then 2

Similarly, you can use padEnd, which puts characters at end of the string. Also, padStart and padEnd only work with type string.

2. Swipe variables

If you’re dealing with an array or any variable you can easily swipe their values without using any extra variable.

let arr = [1, 2, 3, 4, 5];
[arr[0], arr[4]] = [arr[4], arr[0]]
console.log(arr); // [5, 2, 3, 4, 1]
------------ OR ------------
let a = 10, b = 5;
[a, b] = [b, a];
console.log(a, b); 5, 10

3. Remove duplicate elements/numbers from an Array

Javascript has a Set type that removes duplicate entries.

let arr = [1, 2, 2, 3, 1, 1];
console.log([...new Set(arr)]); // [1, 2, 3]

4. Random List Generator

If we’ve to render a random list we can use sort with Math.random function. Here 0.5 is given randomly to generate positive and negative values, as Math.random give values between 0 and 1.

[1, 2, 3, 4, 5].sort(() => Math.random() - 0.5);

5: valueAsNumber or valueAsDate

Javascript can get type number or date from input type `number` or `date`

<!-- HTML -->
<input type="number" id="num" value="0">
<input type="date" id="date">
<!-- JS -->
var value = document.getElementById("num").valueAsNumber;
console.log(value); // this will return in number type
var date = document.getElementById("date").valueAsDate;
console.log(date.getDate()); // you can also perform date operations

6. Copy To Clipboard

Javascript has multiple options in execCommand function, It’s a build function accessible as document.execCommand().

To copy to clipboard any text on dom you’ve to select that programmatically, and we can do that on input type or any contentEditable element.

function copyToClipboard() {
    let str = 'text to be copy to clipboard';
    
    // create dummy input to select text
    const input = document.createElement("input"); //
    input.value = str;
    document.body.appendChild(input);
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input); // remove when copy done
}

If you want to explore more about execCommand function. I highly recommend checking this out.

That’s enough folks!
Let me know if you found this helpful. Or if you have any queries to discuss more cases, you can reach me out at.

LinkedIn: https://www.linkedin.com/in/zuhairnaqi/

Facebook: https://www.facebook.com/zuhairnaqi9