DEV Community

Shrihari
Shrihari

Posted on • Edited on

JavaScript Shorthand Techniques

#javascript #tutorial #webdev #react

In today's fast-paced world of web development, efficiency and readability are essential. Have you ever found yourself wading through lines and lines of JavaScript, feeling overwhelmed? Or perhaps, while coding, you've wished for a more concise way to express common patterns. Bloated code not only reduces readability but can also impact performance and maintainability.

Long-winded JavaScript expressions can:

  • Increase Development Time: Writing and reading extended versions of common operations can drastically reduce your coding speed.
  • Compromise Code Quality: More verbose code can introduce more chances for errors. It's easy to lose track amidst the clutter.
  • Hinder Collaboration: Your teammates might find it challenging to navigate and understand your code, leading to inefficiencies in team-based projects.
  • Impair Performance: Inefficient code can sometimes be a bottleneck, especially in performance-critical applications.

The solution? JavaScript shorthand techniques. These are concise ways to represent common operations, allowing you to write cleaner, more efficient, and more readable code.

Here are some powerful JavaScript shorthand techniques:

1.Variable Assignment:

Traditional:


let newName;

if (name) {
  newName = name;
} else {
  newName = 'Default';
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const newName = name || 'Default';
Enter fullscreen mode Exit fullscreen mode

2.Conditional (Ternary) Operator:

Traditional:

let result;

if (isValid) {
  result = 'Valid';
} else {
  result = 'Invalid';
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const result = isValid ? 'Valid' : 'Invalid';
Enter fullscreen mode Exit fullscreen mode

3.Default Parameters:

Traditional:

function multiply(val1, val2) {
  val2 = typeof val2 !== "undefined" ? val2 : 1;
  console.log(val1 * val2);
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

function multiply(val1, val2 = 1) {
  console.log(val1 * val2);
}
Enter fullscreen mode Exit fullscreen mode

4.Arrow Functions:

Traditional:

const add = function(x, y) {
  return x + y;
}
Enter fullscreen mode Exit fullscreen mode

Shorthand:

const add = (x, y) => x + y;
Enter fullscreen mode Exit fullscreen mode

5.Template Strings:

Traditional:

console.log('Hello, ' + name + '! Welcome to our platform.');
Enter fullscreen mode Exit fullscreen mode

Shorthand:

console.log(`Hello, ${name}! Welcome to our platform.`);
Enter fullscreen mode Exit fullscreen mode

These are just a few examples. The world of JavaScript is filled with such shorthand techniques, especially with the latest ES6 features.

Conclusion:

Don't let bloated code weigh down your JavaScript projects. Embrace shorthand techniques to make your code more concise, efficient, and readable. These techniques will not only make your development process smoother but will also elevate the quality of your applications. Dive into shorthand techniques today and transform your JavaScript journey!

Top comments (10)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

Be careful... your two functions in the 'Default Parameters' section do not have the same functionality, neither do the two examples in the 'Variable Assignment' section.

Collapse
 
shriharimurali profile image
Shrihari •

Thank you so much i am correcting it

Collapse
 
devsmitra profile image
Rahul Sharma • • Edited

if the name is an empty string it'll change the output.

var name = '';

if (name !== undefined) {
  var newName = name;
} else {
  var newName = 'Default';
}
// output: ''

var newName = name || 'Default';
// output: 'Default'
Enter fullscreen mode Exit fullscreen mode

Better to use Nullish coalescing operator (??) instead of OR (||)

The same goes for point 3 try empty string('') out will be different.

3.Default Parameters: 

greet(); // Hello, Guest!
greet('') // Hello, !
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mikelmi profile image
Mike Lmi •

console.log(Hello, ${newName}!); -> maybe this is better -> console.log("Hello, ", newName);

and console.log(Hello, ${name}! Welcome to our platform.);
-> can be replaced with that -> console.log("Hello, %s! Welcome to our platform.", name);

Collapse
 
wraith profile image
Jake Lundberg •

Be careful with #3. If name === null, the default value will not be assigned and you will get an error.

Collapse
 
gaswigue profile image
Gaswigue • • Edited

const add = function(x, y) {
return x + y;
}
and
const add = (x, y) => x + y;
Are slightly different, the second one capture also the local 'this'.
That why some frame work callback need traditionnal function and not anonymous function.

levelup.gitconnected.com/arrow-fun...

Collapse
 
samuel_kelv profile image
Samuel Kelv •

Thank you, helpful

Collapse
 
shriharimurali profile image
Shrihari •

@jonrandy @devsmitra Thank you guys.... My bad i missed the code checks .... i have updated the examples please do check.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

"Default parameters" one still not right. Consider what happens when you pass in an empty string (or any falsy value that isn't undefined)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

Unfortunately, the latest iteration of the 'shorthand' version is now longer than the original version, still doesn't match the functionality of the 'long' version, and has introduced the possibility of errors (try passing in null, or a number, or an object)

Read next

arindam_1729 profile image

9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

Arindam Majumder -

truongpx396 profile image

🔐 Solidity Limitations, Solutions, Best Practices and Gas Optimization 🚀

Truong Phung -

dmitry_bas profile image

Using SCP with ssh2 in Node.js Applications without SFTP

Dmitry Bas -

tomj profile image

Web Images: Resize and Convert Perfectly (and Automatically)

Tom J. -