In this article, we will discuss 7 cool shorthand tricks in JavaScript that will save the developer time.
Arrow Function: JavaScript Arrow functions were introduced in ES6. The main advantage of this function is, it has a shorter syntax.
Javascript
<script>
function add(a, b) {
return a + b;
}
console.log(add(1,2))
const add1 = (a, b) => a + b;
console.log(add1(1,2))
</script>
|
Output:
3
3
Multi-line string: For multi-line string, we normally use the + operator with a new line escape sequence (\n). We can do it in an easier way by using backticks (`).
Javascript
<script>
console.log( 'JavaScript is a lightweight, interpreted, '
+ 'object-oriented language\nwith first-class '
+ 'functions, and is best known as the scripting '
+ 'language for Web \npages, but it is used in many'
+ 'non-browser environments as well.\n' );
console.log(`JavaScript is a lightweight, interpreted,
object-oriented language with first-class functions,
and is best known as the scripting language for Web
pages, but it is used in many non-browser environments
as well.`);
</script>
|
Output:
JavaScript is a lightweight, interpreted, object-oriented language
with first-class functions, and is best known as the scripting language for Web
pages, but it is used in manynon-browser environments as well.
JavaScript is a lightweight, interpreted,
object-oriented language with first-class functions,
and is best known as the scripting language for Web
pages, but it is used in many non-browser environments
as well.
For loop: To loop through an array, we normally use the traditional for loop. We can make use of the for…of loop to iterate through arrays. To access the index of each value we can use for…in loop.
Javascript
<script>
let myArr = [50, 60, 70, 80];
for (let i = 0; i < myArr.length; i++) {
console.log(myArr[i]);
}
for (const val of myArr) {
console.log(val);
}
for (const index in myArr) {
console.log(`index: ${index} and value: ${myArr[index]}`);
}
</script>
|
Output:
50
60
70
80
50
60
70
80
"index: 0 and value: 50"
"index: 1 and value: 60"
"index: 2 and value: 70"
"index: 3 and value: 80"
String into a Number: There are built-in methods like parseInt and parseFloat available to convert a string into a number. It can also be done by simply providing a unary operator (+) in front of the string value.
Javascript
<script>
let a = parseInt( '764' );
let b = parseFloat( '29.3' );
console.log(a,b)
let c = + '764' ;
let d = + '29.3' ;
console.log(c,d)
</script>
|
Output:
764 29.3
764 29.3
Swap two variables: For swapping two variables, we often use a third variable. But it can be done easily with array de-structuring assignments.
Javascript
<script>
let x = 'Hello' , y = 'World' ;
const temp = x;
x = y;
y = temp;
console.log(x,y)
let a = 'Hello'
let b = 'World'
[a,b] = [b,a];
console.log(a,b)
</script>
|
Output:
World Hello
Merging of arrays: To merge two arrays, the following can be used:
Javascript
<script>
let a1 = [2, 3];
let a2 = a1.concat([6, 8]);
console.log(a2)
let a3 = [...a1, 6, 8];
console.log(a3)
</script>
|
Output:
[2, 3, 6, 8]
[2, 3, 6, 8]
Multiple conditions checking: For multiple value matching, we can put all values in an array and use the indexOf() or includes() method.
Javascript
<script>
let value = 1
if (value === 1 || value === 'hello' || value === 2 || value === 'world' ) {
console.log( "Done" )
}
if ([1, 'hello' , 2, 'world' ].indexOf(value) >= 0) {
console.log( 'Done' )
}
if ([1, 'hello' , 2, 'world' ].includes(value)) {
console.log( 'Done' )
}
</script>
|
Output:
Done
Done
Done