{"id":730,"date":"2020-12-19T09:54:07","date_gmt":"2020-12-19T08:54:07","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=730"},"modified":"2022-06-08T17:57:40","modified_gmt":"2022-06-08T15:57:40","slug":"top-20-javascript-shorthand-techniques-that-will-save-your-time","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/12\/19\/top-20-javascript-shorthand-techniques-that-will-save-your-time\/","title":{"rendered":"Top 20 JavaScript Shorthand Techniques that will save your time"},"content":{"rendered":"\n

The shorthand techniques of any programming language help you to write more clean and optimized code. Shorthand techniques improve readability of your code and you can achieve your goal with less coding. Let\u2019s discuss some of the shorthand techniques of JavaScript one by one.<\/p>\n\n\n\n

1. Declaring variables<\/h4>\n\n\n\n
\/\/Longhand \nlet x; let y = 20; \n\n\/\/Shorthand \nlet x, y = 20;<\/code><\/pre>\n\n\n\n
2. Assigning values to multiple variables<\/h4>\n\n\n\n
We can assign values to multiple variables in one line with array destructuring.<\/p>\n\n\n\n
\/\/Longhand \nlet a, b, c; \na = 5; \nb = 8; \nc = 12;\n\n\/\/Shorthand \nlet [a, b, c] = [5, 8, 12];<\/code><\/pre>\n\n\n\n
3. The Ternary operator<\/h4>\n\n\n\n
We can save 5 lines of code here with ternary (conditional) operator.<\/p>\n\n\n\n
\/\/Longhand \nlet number = 26; \nlet isEven; \nif(number % 2){\n isEven = true; \n}else{ \n isEven = false; \n} \n\/\/Shorthand \nlet isEven = number % 2 ? true : false;<\/code><\/pre>\n\n\n\n
4. Assigning default value<\/h4>\n\n\n\n
We can use OR(||)<\/span><\/code> short circuit evaluation to assign a default value to a variable in case the expected value found empty.<\/p>\n\n\n\n
\/\/Longhand \nlet imagePath; \nlet path = getImagePath(); \nif(path !== null && path !== undefined && path !== '') { \n  imagePath = path; \n} else { \n  imagePath = 'default.jpg'; \n} \n\n\/\/Shorthand \nlet imagePath = getImagePath() || 'default.jpg';<\/code><\/pre>\n\n\n\n
5. AND(&&) Short circuit evaluation<\/h4>\n\n\n\n
If you are calling a function only if a variable is true, then using AND(&&)<\/span><\/code> short circuit you can do it in a single line.<\/p>\n\n\n\n
\/\/Longhand \nif (isLoggedin) {\n goToHomepage(); \n} \n\n\/\/Shorthand \nisLoggedin && goToHomepage();<\/code><\/pre>\n\n\n\n
Here in shorthand technique, if isLoggedin<\/span><\/code> returns true, then only goToHomepage()<\/span><\/code> will execute.<\/p>\n\n\n\n
6. Swap two variables<\/h4>\n\n\n\n
To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.<\/p>\n\n\n\n
let x = 'Hello', y = 55; \n\n\/\/Longhand \nconst temp = x; \nx = y; \ny = temp; \n\n\/\/Shorthand \n[x, y] = [y, x];<\/code><\/pre>\n\n\n\n
7. Arrow Function<\/h4>\n\n\n\n
\/\/Longhand \nfunction add(num1, num2) { \n   return num1 + num2; \n} \n\n\/\/Shorthand \nconst add = (num1, num2) => num1 + num2;<\/code><\/pre>\n\n\n\n
8. Template Literals<\/h4>\n\n\n\n
We normally use + operator to concatenate string values with variables. With ES6 template literals we can do it in a more simple way.<\/p>\n\n\n\n
\/\/Longhand \nconsole.log('You got a missed call from ' + number + ' at ' + time); \n\n\/\/Shorthand \nconsole.log(`You got a missed call from ${number} at ${time}`);<\/code><\/pre>\n\n\n\n
9. Multi-line String<\/h4>\n\n\n\n
For multiline string we normally use + operator with a new line escape sequence (\\n). We can do it in an easier way by using backticks (`).<\/p>\n\n\n\n
\/\/Longhand \nconsole.log('JavaScript, often abbreviated as JS, is a\\n' +             'programming language that conforms to the \\n' + \n'ECMAScript specification. JavaScript is high-level,\\n' + \n'often just-in-time compiled, and multi-paradigm.' ); \n\n\/\/Shorthand \nconsole.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.`);<\/code><\/pre>\n\n\n\n
10. Multiple condition checking<\/h4>\n\n\n\n
For multiple value matching, we can put all values in array and use indexOf()<\/code><\/span> method.<\/p>\n\n\n\n
\/\/Longhand \nif (value === 1 || value === 'one' || value === 2 || value === 'two') { \n\/\/ Execute some code \n} \n\n\/\/ Shorthand \nif ([1, 'one', 2, 'two'].indexOf(value) >= 0) { \n\/\/ Execute some code \n}<\/code><\/pre>\n\n\n\n
11. Object Property Assignment<\/h4>\n\n\n\n
If the variable name and object key name is same then we can just mention variable name in object literals instead of both key and value. JavaScript will automatically set the key same as variable name and assign the value as variable value.<\/p>\n\n\n\n
let firstname = 'Amitav'; \nlet lastname = 'Mishra'; \n\n\/\/Longhand \nlet obj = {firstname: firstname, lastname: lastname}; \n\n\/\/Shorthand \nlet obj = {firstname, lastname};<\/code><\/pre>\n\n\n\n
12. String into a Number<\/h4>\n\n\n\n
There are built in methods like parseInt<\/code><\/span> and parseFloat<\/span><\/code> available to convert a string to number. We can also do this by simply providing a unary operator (+) in front of string value.<\/p>\n\n\n\n
\/\/Longhand \nlet total = parseInt('453'); \nlet average = parseFloat('42.6'); \n\n\/\/Shorthand \nlet total = +'453'; \nlet average = +'42.6';<\/code><\/pre>\n\n\n\n
13. Repeat a string for multiple times<\/h4>\n\n\n\n
To repeat a string for a specified number of time you can use a for<\/code> loop. But using the repeat()<\/code><\/span> method we can do it in a single line.<\/p>\n\n\n\n
\/\/Longhand \nlet str = ''; \nfor(let i = 0; i < 5; i ++) { \n  str += 'Hello '; \n} \nconsole.log(str); \/\/ Hello Hello Hello Hello Hello \n\n\/\/ Shorthand \n'Hello '.repeat(5);<\/code><\/pre>\n\n\n\n
Tip<\/em><\/strong>: Want to apologize to someone by sending 100 times \u201csorry\u201d? Try it with `<\/em>repeat()_` method. If you want to repeat each string in a new line, then add `\\n_`_ to the string._<\/em><\/p>\n\n\n\n
'sorry\\n'.repeat(100);<\/code><\/pre>\n\n\n\n
14. Exponent Power<\/h4>\n\n\n\n
We can use Math.pow()<\/code><\/span> method to find the power of a number. There is a shorter syntax to do it with double asterik (**).<\/p>\n\n\n\n
\/\/Longhand \nconst power = Math.pow(4, 3); \/\/ 64 \n\n\/\/ Shorthand \nconst power = 4**3; \/\/ 64<\/code><\/pre>\n\n\n\n
15. Double NOT bitwise operator (~~)<\/h4>\n\n\n\n
The double NOT bitwise operator is a substitute for Math.floor()<\/span><\/code> method.<\/p>\n\n\n\n
\/\/Longhand \nconst floor = Math.floor(6.8); \/\/ 6 \n\n\/\/ Shorthand \nconst floor = ~~6.8; \/\/ 6<\/code><\/pre>\n\n\n\n
16. Find max and min number in array<\/h4>\n\n\n\n
We can use for loop to loop through each value of array and find the max or min value. We can also use the Array.reduce()<\/a> method to find the max and min number in array.But using spread operator we can do it in a single line.<\/p>\n\n\n\n
\/\/ Shorthand \nconst arr = [2, 8, 15, 4]; \nMath.max(...arr); \/\/ 15 \nMath.min(...arr); \/\/ 2<\/code><\/pre>\n\n\n\n
17. For loop<\/h4>\n\n\n\n
To loop through an array we normally use the traditional for<\/span><\/code> loop. We can make use of the for...of<\/code><\/span> loop to iterate through arrays. To access the index of each value we can use for...in<\/span><\/code> loop.<\/p>\n\n\n\n
let arr = [10, 20, 30, 40]; \n\n\/\/Longhand \nfor (let i = 0; i < arr.length; i++) { \n  console.log(arr[i]); \n} \n\/\/Shorthand \n\/\/for of loop \nfor (const val of arr) { \n  console.log(val); \n} \n\/\/for in loop \nfor (const index in arr) { \n  console.log(arr[index]); \n}<\/code><\/pre>\n\n\n\n
We can also loop through object properties using for...in<\/span><\/code> loop.<\/p>\n\n\n\n
let obj = {x: 20, y: 50}; \nfor (const key in obj) { \n  console.log(obj[key]); \n}<\/code><\/pre>\n\n\n\n
18. Merging of arrays<\/h4>\n\n\n\n
let arr1 = [20, 30]; \n\n\/\/Longhand \nlet arr2 = arr1.concat([60, 80]); \n\/\/ [20, 30, 60, 80] \n\n\/\/Shorthand \nlet arr2 = [...arr1, 60, 80]; \n\/\/ [20, 30, 60, 80]<\/code><\/pre>\n\n\n\n
19. Deep cloning of multi-level object<\/h4>\n\n\n\n
To deep clone a multi-level object, we can iterate through each property and check if the current property contains an object. If yes, then do a recursive call to the same function by passing the current property value (i.e. the nested object).We can also do it by using JSON.stringify()<\/code><\/span> and JSON.parse()<\/code><\/span> in a single line.<\/p>\n\n\n\n
let obj = {x: 20, y: {z: 30}}; \n\n\/\/Longhand \nconst makeDeepClone = (obj) => { \n  let newObject = {}; \n  Object.keys(obj).map(key => { \n    if(typeof obj[key] === 'object'){ \n      newObject[key] = makeDeepClone(obj[key]); \n    } else { \n      newObject[key] = obj[key]; \n    } \n  }); \n return newObject; \n} \nconst cloneObj = makeDeepClone(obj); \n\n\n\/\/Shorthand \nconst cloneObj = JSON.parse(JSON.stringify(obj));<\/code><\/pre>\n\n\n\n
20. Get character from string<\/h4>\n\n\n\n
let str = 'jscurious.com'; \n\n\/\/Longhand \nstr.charAt(2); \/\/ c \n\n\/\/Shorthand \nstr[2]; \/\/ c<\/code><\/pre>\n\n\n\n
Thanks for reading!<\/em><\/p>\n\n\n\n
This article was originally published on medium.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The shorthand techniques of any programming language help you to write more clean and optimized code. Shorthand techniques improve readability of your code and you can achieve your goal with less coding. Let\u2019s discuss some of the shorthand techniques of JavaScript one by one. 1. Declaring variables 2. Assigning values to multiple variables We can […]<\/p>\n","protected":false},"author":1,"featured_media":1963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[29,156,157],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/730"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":1973,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/730\/revisions\/1973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1963"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}