It is statistically proven JavaScript is the most widely used language by programmers globally. One of the most important reasons for this is that it is developer friendly. A recent study suggested that the number of JavaScript developers has surged in the past 4 years and currently out of 1.8 Billion websites, 95% of them are running with JavaScript. Besides the popularity of the latest tools and methodologies, JavaScript has managed to maintain the 4th position in terms of popularity.
The developers have found super-cool tricks and tips that make the work easier and the coding process gets hassle-free. But, being a developer, you are required to know the easy tips and tricks to work on any given project by maintaining hygiene. First, let’s understand why Javascript is highly demanding on a global scale.
Why is JavaScript Preferred Across the Globe?
JavaScript developers not only have extra exposure to building full-stack apps using one language but also there are various benefits while coding up in JavaScript, apart from its complete support from server to client side, from frontend to backend everything could be singly handled with the help of JavaScript.
These suggestions would not only make your skill of coding better but also make your apps get swifter and more user-friendly.
Now we’ll be discussing 8 Tips and Tricks to Improve Your JavaScript Programming which will help in saving time and improve code quality.
8 Tips and Tricks For JavaScript Developers
1. For comparison it’s better to use triple equal (===) instead of double equal(==)
Double Equals (==) checks loosely, i.e. It automatically converts the type of data wherever needed. While the triple equals (===) strictly checks the equality, i.e. It checks both value and data type. So, we must always use triple equals to compare two objects.
Javascript
[1] === 1
[1] == 1
'2' === 2
'2' == 2
'undefined'=='undefined'
'undefined' === 'undefined'
0 == false
0 === false
|
- Double equal (==) is also said as Loosely Equal. It performs type conversions while comparing two things.
- Triple equal (===) is also said Strictly Equal. As it doesn’t type conversions while comparing two things.
2. Use SET to Get Unique Values
In a given array in JavaScript (ES6 version), if we have duplicate values in it and we want to get all the unique values, we can store this array in a SET object which is introduced in the ES6 version.
Javascript
const arr = [10,10,20,20,30];
const new_arr = [...new Set(arr)];
console.log(new_arr);
|
Output:
[10, 20, 30]
Without Set, the same process is time-consuming. We’ve to iterate through the array and store the unique elements in a new object one by one.
3. Direct operations in Console.log()
We can directly do operations on the console.log() itself. We don’t need to calculate first before printing it in the console. It can do Addition, Subtraction, Multiplication, Division, Exponentiation, Increment, Decrement operation, and Logical operations on the console itself.
Javascript
var a = 10;
var b = 20;
console.log("Addition of a and b: " + (a + b) );
console.log("Subtraction: " + (a - b) );
console.log("Multiplication between a and b: " + (a * b) );
console.log("The Quotient will be: " + (b / a) );
console.log((a % b));
console.log("Value of a after pre-increment: " + (++a) );
console.log("Value of a after post-increment: " + (a++) );
console.log("Value of b after pre-decrement: " + (--b) );
console.log("Value of b after post-decrement: " + (b--) );
console.log("2 raise to the power 3: " + (2**3);
|
Output:
Addition of a and b: 30
Subtraction : -10
Multiplication between a and b: 200
The Quotient will be: 2
The Modulo when b is divided with a: 10
Value of a after pre-increment: 11
Value of a after post-increment: 11
Value of b after pre-decrement: 19
Value of b after post-decrement: 19
2 raise to the power 3: 8
4. Reduce the length of an array
The length of the array can be reduced by the length function ( array.length).
Suppose, there is an array of size 10. And you need the first k elements where, (k< 10) of the array, We can reduce the length of the array to get the reduced size array.
For example:
Array: [ 11, 12, 122, 133, 152], size= 4;
And, we want an array of size 2. Hence the array will be: [ 11,12 ].
Javascript
var array = [1, 2, 5, 78, 98]
console.log("The array of size ",array.length)
array.length=4;
console.log("The array of size ", array.length,"is :",array)
array.length=3;
console.log("The array of size ", array.length,"is :",array)
array.length=2;
console.log("The array of size ", array.length,"is :",array)
|
Output
The array of size 5
The array of size 4 is : [ 1, 2, 5, 78 ]
The array of size 3 is : [ 1, 2, 5 ]
The array of size 2 is : [ 1, 2 ]
5. Use ‘Slice’ to get the selected elements in an array
The Slice method is used in arrays to get the selected elements from an array. It returns a new array containing the selected elements, but the original array remains unaffected.
Syntax:
array.slice(start, end)
It takes two parameters.
The first is start, whose default value is 0 and this can take both negative and positive arrays. Positive values start from the beginning of the array while negative values from the end of the array.
Second is the end, its default value is the last element of the array. It also takes both positive and negative values and negative values start from the end of the array.
Javascript
const name = ["GFG", "GEEK", "geek", "GEEKSFGEEKS", "gfg"];
const name11 = name.slice(1, 2);
console.log(name11)
const name1 = name.slice(1, 3);
console.log(name1)
const name2 = name.slice(-2,-1);
console.log(name2)
const name3 = name.slice(-1);
console.log(name3)
|
Output
[ 'GEEK' ]
[ 'GEEK', 'geek' ]
[ 'GEEKSFGEEKS' ]
[ 'gfg' ]
6. The Spread operator
Remember? Copying an array A into an array B index by index. This hectic and slow process is converted into a very easy and single-step operation with the use of the Spread operator. The Spread operator allows us to copy an iterable and spread it into another similar object. It copies the properties of the existing object into the other.
Spread operator in JavaScript can be used in three places:
- On operating on an Array: Suppose we have an array and you need to amend a key into it at a definite position. This task can be easily done by the use Spread operator.
- In the argument list of a function: Whenever there are several arguments in a function, we can call all of them by shortening up the syntax of the argument.
- Object literal: Whenever one has to merge, shallow clone or perform similar kinds of operations on objects, This Spread operator could be easily done with the help of the Spread operator in a much shorter syntax. The only drawback is that while using the spread operator one cannot mutate the object.
Javascript
function product(a, b, c){
return a*b*c;
}
const num = [1,2,3,4,5,9,8];
console.log("the product of array's three elements are -:", product(...num));
|
Output
the product of array's three elements are -: 6
7. The use of the “This” keyword
The This keyword is undoubtedly one of the hardest yet most useful concepts of advanced JavaScript. This keyword defines the current line of the execution context of the code, i.e. this keyword stores the value of the current execution context of the JavaScript program.
Invocation of a function can be done in various ways but the This keyword refers to the current execution context. The value of This depends on the runtime binding. It gets changed every time the function is invoked.
Whenever there is implicit binding, to refer to the object at the invocation time, we can use the This keyword. It would bind the keyword to that current object.
Syntax:
let article = {
article_name: 'JavaScript tips and tricks',
author: 'Anurag Mishra',
intro: function() {
concole.log('${this.article_name} is written by ${author}');
}
};
article.intro();
Output:
JavaScript tips and tricks is written by Anurag Mishra
For more information on This keyword, you can refer to the article: this in JavaScript
8. Use of the Arrow function
With the update of JavaScript into ES6, the most influential change that came into existence was the concept of Arrow functions. Most advanced languages use arrow functions to shorten their syntax and execute larger functions in a smaller code block.
Arrow functions can only be used if the function has a single line of execution statement. The arrow functions also support the passing of parameters.
The context inside the arrow function is lexically defined.
Javascript
const names = ['GFG', 'gfg', 'Geeksforgeeks', 'Geek'];
console.log("The length of each string in the names array is: ", names.map(name => name.length));
|
Output
The length of each string in the names array is: [ 3, 3, 13, 4 ]
To know more about Arrow functions, you can refer to the article – Arrow functions in JavaScript
Conclusion
JavaScript is a very user-friendly programming language. There are several other important concepts that are only available in advanced languages like JavaScript. The ES6 upgrade has brought with it a change of spectrum and made JavaScript immensely popular. The advent of arrow functions, the use of slice and spread operators, and other newly added conventions are like the cherry on the cake. Due to its large-scale presence in all technological stacks and multiple frameworks, these features get even more important as they are used in all of them.
Share your thoughts in the comments
Please Login to comment...