Javascript is a very popular & widely used programming language that can do a lot of amazing things!  Check out these features/tips that will help you code like a pro.

1. Optional Chaining (?)

This is the safest way to access the nested object properties, even if an intermediate property doesn’t exist.


employee.details?.id
employee.details?.address
employee.details?.phone

If the data exists in employee details, it will return the data otherwise it will return undefined without any error.

2. Nullish Coalescing (??)

Nullish Coalescing is a logical operator that will return the right-hand side value if the lefthand side value is not present.


// syntax: leftValue ?? rightValue

let firstVal = null;
let secondVal = "";
let thirdVal = 28;

firstVal ?? 'this is first'; // right side value will be displayed
secondVal ?? 'this is second'; // left side value will be displayed
thirdVal ?? 23; // left side value (28) will be displayed

3. Remove duplicates from an Array

We all know that a Set object is used to store unique values. We can use this to remove duplicates from the Array


const arr = [9,9,8,8,7,7];

const newArr = [...new Set(array)]; // newArr will have [9,8,7]

4. Remove false values from an Array

We can pass ‘Boolean’ to the array filter method to remove falsy values from an Array


const arr = [5, 0, undefined, 3, 9, "", false, false];

const newArr = arr.filter(Boolean)); //[5,0,3,9]

5. Resizing an Array

“Array.length” is used to get the length of an array. We can use this to truncate the array as given below.


let array = ["Bangalore", "Chennai", "Mumbai", "Pune", "Delhi"]

array.length = 2

console.log(array) //["Bangalore", "Chennai"]

6. Check if the current tab is in view/focus

Using document.hidden property we can check if the current tab is in view or focus


const isInViewOrFocus = () => document.hidden;

isInViewOrFocus();

// returns true or false depending on if tab is in view / focus

7. Check if an element is currently in focus

We can use document.activeElement to achieve this


const isActiveElement = (el) => (el === document.activeElement);

isActiveElement(anyElement)

// will return true if in focus, false if not in focus

8. Check if the current user has touch events supported

ontouchstart or DocumentTouch in the window object tells us whether the current device has touch events supported.


const isTouchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}

console.log(isTouchSupported());

// will return true if touch events are supported, false if not

9. Check if the current user is on an Apple device

We can use the navigator.platform to check if the current user is on an Apple device.


const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);

// will return true if user is on an Apple device

10. Multiple Replace

replace() method helps to replace the first occurrence of the word in a string. By adding ‘/g’ we can replace multiple occurrences at a time.


let data = "JavaScript is JavaScript"
//Single

console.log(data.replace(/JavaScript/, "TypeScript")) // TypeScript is JavaScript
//Multiple 

console.log(data.replace(/JavaScript/g, "TypeScript")) // TypeScript is TypeScript

Thanks for reading. Hope this article got you some new stuff. Happy coding!