This institute placed in Hardoi Up & It is the hub of Tally, CCC and O level. This is best blogger site to learn about to computer courses like:- Adca, Dca, Pgdca, CCC, O level, Dtp, Tally, Gst, Etc. You can contact us for more query on my contact no:- 9026728220, 8423606968.
Labels
- Artificial Intelligence (2)
- CCC EXAM NOTES (52)
- computer ki important jankariyan (55)
- Computer Notes (23)
- COMPUTER TIPS (28)
- computer tricks (38)
- CSS O LEVEL (43)
- Gst (1)
- HTML (2)
- IOT (3)
- IOT MCQs (1)
- IT Tools (21)
- Javascript (4)
- Libreoffice (12)
- M2R5 (O level) CSS (32)
- mobile tricks (10)
- O level (63)
- O level Notes (59)
- O level Practical (2)
- O level Project (44)
- PDF Tricks (2)
- Python program (22)
- Python Program List (3)
- ROCHAK JANKARIYA (39)
- Tally Gst (1)
- Tricks & Tips (20)
- Tricks and Tips (17)
- Viva O (1)
- Viva O Level (1)
- What is ? (1)
- Windows Tricks (11)
Information & Technology Computer Institution's
In front of Gandhi Bhawan, Numaish Chauraha Hardoi.
☎ +91 9026728220, +91 8423606968
Please Subscribe My YouTube Channel
Sunday, November 12, 2023
Create Stopwatch with Html, CSS & JavaScript
Wednesday, November 01, 2023
How To Create Animated Login Form(O level)
Sunday, October 29, 2023
Make Calculations with Calculator
Monday, October 16, 2023
Shorthand Tips & Tricks of JavaScript
1. Assigning values to multiple variables
We can assign values to multiple variables in one line with array destructuring.
//Longhand
let a, b, c;
a = 5;
b = 8;
c = 12;
//Shorthand
let [a, b, c] = [5, 8, 12];
2. The Ternary operator
We can save 5 lines of code here with the ternary (conditional) operator.
//Longhand
let marks = 26;
let result;
if (marks >= 30) {
result = 'Pass';
} else {
result = 'Fail';
}
//Shorthand
let result = marks >= 30 ? 'Pass' : 'Fail';
3. Assigning a default value
We can use OR(||)
short circuit evaluation to assign a default value to a variable in case the expected value is found falsy.
//Longhand
let imagePath;
let path = getImagePath();
if (path !== null && path !== undefined && path !== '') {
imagePath = path;
} else {
imagePath = 'default.jpg';
}
//Shorthand
let imagePath = getImagePath() || 'default.jpg';
4. Remove duplicates from an Array
The Set
object stores only unique elements. Therefore, we can create a Set
from the given array of elements and then, convert the Set
back to an array to get all unique elements.
const arr = [10, 5, 20, 10, 6, 5, 8, 5, 20];
const unique = [...new Set(arr)];
console.log(unique); // [10, 5, 20, 6, 8]
5. AND(&&) Short circuit evaluation
If you are calling a function only if a variable is true, then you can use the AND(&&)
short circuit as an alternative for this.
//Longhand
if (isLoggedin) {
goToHomepage();
}
//Shorthand
isLoggedin && goToHomepage();
The AND(&&)
short circuit shorthand is more useful in React when you want to conditionally render a component. For example:
<div> { this.state.isLoading && <Loading /> } </div>
6. Swap two variables
To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.
let x = 'Hello', y = 55;
//Longhand
const temp = x;
x = y;
y = temp;
//Shorthand
[x, y] = [y, x];
7. Arrow Function
//Longhand
function add(num1, num2) {
return num1 + num2;
}
//Shorthand
const add = (num1, num2) => num1 + num2;
8. Template Literals
We normally use the +
operator to concatenate string values with variables. With ES6 template literals, we can do it in a more simple way.
//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);
//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);
9. Multi-line String
For multiline strings, we normally use +
operator with a new line escape sequence (\n
). We can do it in an easier way by using backticks ( ` ).
//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' +
'programming language that conforms to the \n' +
'ECMAScript specification. JavaScript is high-level,\n' +
'often just-in-time compiled, and multi-paradigm.'
);
//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a
programming language that conforms to the
ECMAScript specification. JavaScript is high-level,
often just-in-time compiled, and multi-paradigm.`
);
10. Multiple condition checking
For multiple value matching, we can put all values in an array and use indexOf()
method.
//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
// Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {
// Execute some code
}
11. Object Property Assignment
If the variable name and object key name are the same then we can just mention the variable name in object literals instead of both key and value. JavaScript will automatically set the key same as the variable name and assign the value as the variable value.
let firstname = 'Amitav';
let lastname = 'Mishra';
//Longhand
let obj = {firstname: firstname, lastname: lastname};
//Shorthand
let obj = {firstname, lastname};
12. String into a Number
There are built-in methods like parseInt
and parseFloat
available to convert a string to a number. We can also do this by simply providing a unary operator (+
) in front of the string value.
//Longhand
let total = parseInt('453', 10);
let average = parseFloat('42.6', 10);
//Shorthand
let total = +'453';
let average = +'42.6';
13. Repeat a string multiple times
To repeat a string a specific number of times you can use a for
loop. But using the repeat()
method we can do it in a single line.
//Longhand
let str = '';
for(let i = 0; i < 5; i ++) {
str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
// Shorthand
'Hello '.repeat(5);
14. Exponent Power
We can use Math.pow()
method to find the power of a number. There is a shorter syntax to do it with a double asterisk (**
).
//Longhand
const power = Math.pow(4, 3); // 64
// Shorthand
const power = 4**3; // 64
15. Double NOT bitwise operator (~~)
The double NOT bitwise operator is a substitute for Math.floor()
method.
//Longhand
const floor = Math.floor(6.8); // 6
// Shorthand
const floor = ~~6.8; // 6
The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator (~~) will give wrong results, so recommended to use
Math.floor()
in such case.
16. Find the max and min numbers in an array
We can use for loop to loop through each value of the array and find the max or min value. We can also use the Array.reduce() method to find the max and min number in the array.
But using the spread operator we can do it in a single line.
// Shorthand
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
17. 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.
let arr = [10, 20, 30, 40];
//Longhand
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//Shorthand
//for of loop
for (const val of arr) {
console.log(val);
}
//for in loop
for (const index in arr) {
console.log(arr[index]);
}
We can also loop through object properties using for…in
loop.
let obj = {x: 20, y: 50};
for (const key in obj) {
console.log(obj[key]);
}
18. Merging of arrays
let arr1 = [20, 30];
//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]
//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]
19. Remove properties from an object
To remove a property from an object we can use the delete
operator, but to remove multiple properties at a time, we can use the Rest parameter with destructuring assignment.
let obj = {x: 45, y: 72, z: 68, p: 98};
// Longhand
delete obj.x;
delete obj.p;
console.log(obj); // {y: 72, z: 68}
// Shorthand
let {x, p, ...newObj} = obj;
console.log(newObj); // {y: 72, z: 68}
20. Get character from string
let str = 'jscurious.com';
//Longhand
str.charAt(2); // c
//Shorthand
str[2]; // c
21. Remove falsy values from Array
let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];
//Longhand
let filterArray = arr.filter(function(value) {
if(value) return value;
});
// filterArray = [12, "xyz", -25, 0.5]
// Shorthand
let filterArray = arr.filter(Boolean);
// filterArray = [12, "xyz", -25, 0.5]
Zero (0) is considered to be a falsy value so it will be removed in both the cases. You can add an extra check for zero to keep it.
22. Create a random string token
const token = Math.random().toString(36).slice(2);
Infotech Computer Institute (itcicomputerhardoi.blogspot.com)
Infotech Computer Institute: इंटरनेट से संबधित महत्वपूर्ण जानकारी (itcicomputerhardoi.blogspot.com)