Mastering JS Shorthand Techniques Part-3: Ternary Operators, Arrays Methods, and Object Properties

This blog is originally published on my Blog website, where you can find the full version with detailed insights and examples. Click the link below to read the complete article and explore more tech-related content!
👉 Click Here

Introduction

In the world of JavaScript, simplicity and readability are highly valued. Thankfully, JavaScript offers a plethora of shorthand techniques that allow developers to write concise and elegant code without compromising functionality. In this blog, we will explore some of these shorthand techniques and see how they can significantly enhance the way we write JavaScript code.

1. Ternary Operators

Ternary operators are a concise way to handle conditional expressions and assign values based on a condition, making your code more compact.

// Longhand

let result;

if (x > 0) {

  result = "Value is Positive";

} else {

  result = "Value is Negative";

}

// Shorthand

let result = x > 9 ? "Value is Positive" : "Value is Negative";

1. Multiple Ternary Operators

You can chain multiple ternary operators together for concise conditional statements based on multiple conditions.

// Longhand

let result;

if (x > 0) {

    result = 'Positive';

} else if (x < 0) {

    result = 'Negative';

} else {

    result = 'Zero';

}

// Shorthand

const result = x > 0 ? 'Positive' : x < 0 ? 'Negative' : 'Zero';

1. Exponentiation Operator

The exponentiation operator (**) raises the left operand to the power of the right operand.

// Longhand

const result = Math.pow(base, exponent);

// Shorthand

const result = base ** exponent;

1. Array Methods

ES6 introduced a variety of array methods that provide concise alternatives for common operations.

// Longhand

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);

const evenNumbers = numbers.filter((num) => num % 2 === 0);

// Shorthand

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

const evenNumbers = numbers.filter(num => num % 2 === 0);

1. Object Property

When creating objects, use shorthand notation to simplify assignments when the variable name and property name are the same.

// Longhand

const name = 'John';

const age = 30;

const person = {

  name: name,

  age: age,

};

// Shorthand

const name = 'John';

const age = 30;

const person = { name, age };

Conclusion

JavaScript shorthand techniques are a blessing for developers, enabling them to write clean and concise code while maintaining readability and efficiency. By adopting these shorthand methods, you can significantly improve your coding productivity and make your JavaScript code more expressive and delightful to work with. Embrace these shorthand techniques, and you'll find yourself crafting more elegant and efficient JavaScript code in no time! Happy coding!

Feel Free to comment your thoughts regarding the topic

Connect with me on Twitter, Linkedinand GitHub to stay updated and join the discussion!

Comments

[Toomas]

Little question about 2. Multiple Ternary Operators aren't the Longhand and Shorthand identical?

[ABIDULLAH786]

Absolutely, you're correct, and I appreciate you pointing this out. Thank you for bringing it to my attention, and I value your understanding.

[Jon Randy 🎖️]

Your 'ternary' operator example is quite poor, and would probably get a few laughs in a code review. Your code can simply be replaced with:

let number = x > 9

Also, the operator's actual name is the 'conditional' operator. It is a ternary operator because it takes 3 operands (similarly, binary operators take 2 operands, and unary operators take 1). It's sometimes referred to as the ternary operator as most languages only have one such operator.

The array methods you mention have been around since ES5 (2009), and the shorthand you show in this section is unrelated to them - rather it concerns the ability to omit parentheses around the parameters of an arrow function if there is only one.

[ABIDULLAH786]

Ternary can be used in multiple scenarios and i just tried to explain that how ternary operator can replace if-else statement.

So in your case i don't think you have replaced the if-else by ternary operator.

[Jon Randy 🎖️]

That is true, I haven't.

I understand that the code was made up to illustrate the usage, but neither the if or the conditional operator are necessary in that example, and both result in more code than is necessary - not really something you want in an article about 'shorthand'. Beginners reading this might think that the code shows good usage of these concepts and then start writing their own code like that.

A better example would be something like:

// Longhand
let message;
if (x > 9) {
  message = "The number is too large!"
} else {
  message = "Good number!";
}

// Shorthand
let message = x > 9 ? "The number is too large!" : "Good number!";