An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
7 Shorthand Optimization Tricks every JavaScript Developer Should Know
Every language has its own quirks and JavaScript, the most used programming language, is no exception. This article will cover a plethora of JavaScript Shorthand Optimization tricks that can help you write better code, and also make sure this is NOT your reaction when you encounter them:
1. Multiple string checks
Often you might need to check if a string
is equal to one of the multiple values, and can become tiring extremely quickly. Luckily, JavaScript has a built-in method to help you with this.
// Long-handconst isVowel = (letter) => { if ( letter === "a" || letter === "e" || letter === "i" || letter === "o" || letter === "u" ) { return true; } return false;};// Short-handconst isVowel = (letter) => ["a", "e", "i", "o", "u"].includes(letter);
2. For-of
and For-in
loops
For-of
and For-in
loops are a great way to iterate over an array
or object
without having to manually keep track of the index of the keys
of the object
.
For-of
const arr = [1, 2, 3, 4, 5];// Long-handfor (let i = 0; i < arr.length; i++) { const element = arr[i]; // ...}// Short-handfor (const element of arr) { // ...}
For-in
const obj = { a: 1, b: 2, c: 3,};// Long-handconst keys = Object.keys(obj);for (let i = 0; i < keys.length; i++) { const key = keys[i]; const value = obj[key]; // ...}// Short-handfor (const key in obj) { const value = obj[key]; // ...}
3. Falsey checks
If you want to check if a variable is null
, undefined
, 0
, false
, NaN
, or an empty string
, you can use the Logical Not (!
) operator to check for all of them at once, without having to write multiple conditions. This makes it easy to check if a variable contains valid data.
// Long-handconst isFalsey = (value) => { if ( value === null || value === undefined || value === 0 || value === false || value === NaN || value === "" ) { return true; } return false;};// Short-handconst isFalsey = (value) => !value;
4. Ternary operator
As a JavaScript developer, you must have encountered the ternary operator
. It is a great way to write concise if-else
statements. However, you can also use it to write concise code and even chain them to check for multiple conditions.
// Long-handlet info;if (value < minValue) { info = "Value is too small";} else if (value > maxValue) { info = "Value is too large";} else { info = "Value is in range";}// Short-handconst info = value < minValue ? "Value is too small" : value > maxValue ? "Value is too large" : "Value is in range";
5. Function calls
With the help of the ternary operator
, you can also determine which function to call based on conditions.
IMPORTANT SIDE-NOTE: The call signature
of the functions must be the same, else you risk running into an errors
function f1() { // ...}function f2() { // ...}// Long-handif (condition) { f1();} else { f2();}// Short-hand(condition ? f1 : f2)();
6. Switch shorthand
Long switch cases can often be optimized by using an object with the keys as the switches and the values as the return values.
const dayNumber = new Date().getDay();// Long-handlet day;switch (dayNumber) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday";}// Short-handconst days = { 0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday",};const day = days[dayNumber];
7. Fallback values
The ||
operator can set a fallback value for a variable.
// Long-handlet name;if (user?.name) { name = user.name;} else { name = "Anonymous";}// Short-handconst name = user?.name || "Anonymous";
That's all folks!
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
I am a Digital Nomad and occasionally travel. Follow me on Instagram to check out what I am up to.
Follow my blogs for bi-weekly new tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Original Link: https://dev.to/ruppysuppy/7-shorthand-optimization-tricks-every-javascript-developer-should-know-4fj5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To