We always say that JavaScript is full of surprises. It never fails to amaze us. Every day, we learn something new about this programming language. Something which is very small but can make a huge impact on your code. Something which is worth sharing.
In this article, we’re going to share eight JavaScript hacks that you can use in your day-to-day stuff. So let’s learn something new!
It’s very common to use event listeners in your web app, not just in Vanilla JS applications, but also in modern JS frameworks and libraries like Angular and React.
To cite an example, let’s say we want to do something on a button click. We can use event listeners here. Often, we want to act whenever a specific event fires. But what if we want to do it only once?
Not to worry. We can actually execute our event listeners only once by simply doing this:
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('We will only run once');
},{ once: true })
To be honest, all of us have faced a situation where we felt like our web application is getting slower and we are not able to find out why. We’ve felt like we are doing everything as it should be, but still the browser is taking time to show the first content of our application.
Well, this might be because of long scripts getting executed before HTML. Often, we add our scripts inand we forgot that the next statements will not be executed until the script in <HEAD> finishes its execution.
We can simply use the defer attribute with our scripts to execute them after the HTML content.
/* No matter where you place this script tag inside the HTML, this will only run when the HTML content is completely loaded. */ <script src="main.js" defer></script>
It’s always recommended to use shorthand to make our code look cleaner. As no application can survive without conditionals like the if statement, we should know the shortcuts for that, too. And thankfully, JavaScript provides the && operator.
We can shorten our conditional checking by using the && operator.
let condition = true;
// Long way
if (condition) {
someFunction();
}
// Short way
condition && someFunction();
We can simply generate a random number from a given range with just one line of code. These kinds of tricks are very useful in real-world applications.
function randomNumber(num1, num2) {
return Math.random() * (num2 - num1) + num1;
}
console.log(randomNumber(50, 100)); // Expected output - random number between 50 and 100 (50 and 100 will be inclusive)
This is one of the hacks which We love the most. We can empty an array just by giving the value 0 to its length property.
let sampleArray = ["John", "Bob", "Mark", "Alex"]; sampleArray.length = 0; console.log(sampleArray); // Output - [] (it's empty now)
We can use the Object.entries() method to check whether an object is empty or not. Since Object.entries() returns the array of the object’s enumerable properties, therefore if the length of that array is 0, that means the object is empty such that the object has 0 property.
let sampleObj = {
name: "Mark",
occupation: "Developer"
};
let emptyObj = {};
console.log(Object.entries(sampleObj).length === 0); // false
console.log(Object.entries(emptyObj).length === 0); // false
From ES6, we have a new concept in JavaScript which is called Set.
"Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection." — MDN Docs
Since Set in JavaScript is a collection of items that are unique, i.e., no element can be repeated, therefore we can use it to filter duplicate values from an array.
This trick is again very simple but very useful. First, we will convert our array into Set, and as Set doesn’t have duplicate values, our new Set will have unique values from our array. Then we simply convert this new Set back into an array.
let namesArray = ["John", "Bob", "Mark", "Alex", "Mark", "Alain", "Bob"]; console.log([...new Set(namesArray)]); // Output - ["John", "Bob", "Mark", "Alex", "Alain"]
Since objects in JavaScript are reference types, we can’t simply use = to clone them, so with the below three methods, you can properly clone an object using just one line.
const person = {
name: "Mark",
username: "@markcodes"
};
// Using Object.assign() Method
const clonePerson1 = Object.assign({}, person);
// Using JSON
const clonePerson2 = JSON.parse(JSON.stringify(person));
// Using Spread Operator
const clonePerson3 = { ...person };
For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop your custom web app using JavaScript, please visit our technology page.
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad – 380049, Gujarat, India.
57 Sherway St,
Stoney Creek, ON
L8J 0J3
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad - 380049, Gujarat, India.
With a client-centric approach, we provide cutting-edge Web & App Development Services to businesses across the globe, ensuring successful project delivery that drive growth and innovation.
© 2024 — HK Infosoft. All Rights Reserved.
© 2023 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap
