10 Javascript hacks to become a pro

Photo by Artem Sapegin on Unsplash

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 left-hand 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 helped you learn some new stuff. Happy coding!