Tricks To Write Less JavaScript: Hello, I appreciate you taking the time to visit my blog. I hope you are curious to learn some clever techniques for writing more concise JavaScript code.
Nowadays beginners are confused about the code writing strategy, and searching or want to know about the Best Tricks To Write Less JavaScript to optimize their code redundancy and reduce the length of their code.
So here I am sharing 12 Tricks To Write Less JavaScript If you are a JavaScript Developer it will help you write less code.
So here first of all I am discussing the Longhand and Shorthand syntax:
Longhand Code Syntax
It takes multiple lines of code to define a single thing, it provides complete details of each step. it is like defining code in a detailed manner, sometimes it becomes more complex and takes more lines to write a single thing.
Example of Longhand Syntax:
// Longhand syntax let a=10; let b=20; let c=30;
Shorthand Code Syntax
Shorthand syntax refers to using small form expressions to achieve a particular task. Its advantage is to write very few lines of code to achieve a particular task. If used appropriately, shorthand syntax can make your code more compact and easier to read.
Example of Shorthand Syntax:
// Shorthand syntax let a,b,c=100; let x,y,z=200;
You can also learn
How to add Image in HTML from desktop | Add image on HTML.
Best 12 Tricks To Write Less JavaScript
Now I am sharing 12 tricks to write less JavaScript which can save your time and blow your mind
- Declaring variable
- Arrow Function
- Template literals
- Condition true
- Power of any Number(Exponention)
- Assignment operator
- Ternary Operator
- Short for loop
- Object Array Notation
- Object Destructuring
- Array Destructuring
- Object with identical Keys and Values
1. Declaring variable:
The shorthand method of declaring a variable is that you can declare multiple variables in a single line by separating them with commas. it reduces your code and will make your code easier and more compact which will save you time as well.
Example:
// Longhand syntax let a=10; let b=20; let c=30 // Shorthand syntax let a=10,b=20,c=30;
2. Arrow Function:
Arrow functions provide a different syntax for writing functions. It is introduced in the ES6 version of javascript which is easier to use as compared to regular functions. The shorthand syntax replaces the function keyword and you can use the => symbol.
Example:
// Longhand syntax
let sum=function(x,y){
return a+b;
}
// Shorthand syntax
let sum = (x,y) => x+y;
3. Template Literals:
Template literals in ES6 provide you to embed your string inside backticks (` `). It is a more readable way to write or concatenate strings and variables inside backticks using the dollar ($) symbol.
Example:
// Longhand syntax
let sayHi='Hi';
let greetings= sayHi + 'Rahul';
// Shorthand syntax
let sayHi='Hi';
let greetings= `${sayHi} Rahul`;
4. Condition True:
Most of the time we use the equality operator or strict quality operator to check the condition of if the block is true or false, you can use this method which I am providing below to avoid the operator checking the condition of true or false.
Example:
// Longhand syntax
let number=10;
if(number==10){
console.log('True');
}
// Shorthand syntax
if(number){
console.log('True');
}
5. Power of any Number(Exponention):
To find the power of any number we often use Math functions but in shorthand, we can use the exponential operator (‘**’) operator to calculate the power of a number which is given below:
Example:
// Longhand syntax console.log(Math.pow(10,2)); // Shorthand syntax console.log(10**2);
6. Assignment Operator:
The assignment operator (=) is used to assign a value to a variable. It assigns the value on the right-hand side to the variable on the left-hand side.
Similarly, we have an additional assignment operator which adds and assigns value to a variable and we can use the shorthand method to do this thing.
Example:
// Longhand syntax let a=10; let b=20; b=a+b; // Shorthand syntax let a=10; let b=20; b+=a;
7. Ternary Operator:
The ternary operator allows you to write conditions in a single line.it is a shorter form of an if-else statement. it evaluates the condition and returns either expression1 if the condition is true, or expression2 if the condition is false
Example:
// Longhand syntax
let age=18;
if(age==18){
console.log('You can vote');
}else{
console.log('You cannot vote');
}
// Shorthand syntax
let msg = age == 18?'You can vote':'You cannot vote';
8. Short for loop:
In general, we iterate over every single element by using a variable and again and again loop gets updated we have to initialize the variable first then we define the finalization state and also updation but there is also a short method of “for loop” which can save you time
Example:
// Longhand syntax
let names=["Raja","Mohan","Sita","Suman","Gauri"];
for(let i=0; i<=4; i++){
console.log(names[i]);
}
// Shorthand syntax
let names=["Raja","Mohan","Sita","Suman","Gauri"];
for(let name of names) console.log(name);
9. Object Array Notation:
In Object Array Notation, you define an array in a single line instead of using new Array() to create an array we can use the shorthand method to create and define an array which is given below.
Example:
// Longhand let myArray= new Array(); myArray[0] = "cat"; myArray[1] = "dog"; myArray[2] = "goat" // Shorthand let arr = ["cat", "dog", "goat"];
10. Object Destructuring:
In the longhand syntax, you need to take values from an object and assign them to variables using the corresponding property names. of the variable but in shorthand syntax you can utilize object destructuring syntax to do the same thing in a more concise way.
Example:
const user = {
data: {
roll: 1,
name:"Tanu",
age:21,
city:"Purnea",
},
};
// Longhand
const roll = user.data.roll;
const name = user.data.name;
const age = user.data.age;
const city = user.data.city;
//Shorthand
const {roll,name,age,city } = user.data;
11. Array Destructuring:
In the longhand syntax, you extract values from an array and assign them to variables through their index number it takes a long process to extract values from an array. below I am sharing a shorthand method to do this same thing in a concise way.
Example:
// Longhand syntax const numbers=[10,20,30]; const first=numbers[0]; const second=numbers[1]; const third=numbers[2]; // Shorthand syntax const [first, second, third] = numbers;
12. Object with identical Keys and Values
In the shorthand format, you can utilize the ES6 object shorthand method to create an object with identical keys and values in a more short way. Here is an example of this feature which can be written in a more concise way.
Example:
// Longhand syntax
let user={ name:'Rahul', age:20, city:'Patna' }
// Shorthand syntax
let name='Rahul';
let age=20; let city='Patna';
const userShorthand={name,age,city};
Conclusion
I shared 12 Tricks to Write Less JavaScript and I hope you enjoyed this article. If you want to learn more about JavaScript then you can follow this blog.
If you have any doubts you can ask through the comment and also ask on Social Media.
Thank you for your valuable time.
