DEV Community

Shrihari
Shrihari

Posted on • Updated 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

afiqiqmal profile image

Preventing Duplicate Requests in Laravel: The AtomicLockMiddleware

Hafiq Iqmal -

biostate profile image

How to Minify and Cache CSS & JS Files in Laravel

SΓΌleyman Γ–zgΓΌr Γ–zarpacΔ± -

asfiaaiman profile image

Simplifying Localization in Laravel 11: New Number Methods Unveiled

Asfia Aiman -

dev007777 profile image

Open Canvas Vs ChatGPT Canvas

TheDev -