DEV Community

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

Posted on • Updated on • Originally published at devwebbytes.blogspot.com

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";

Enter fullscreen mode Exit fullscreen mode



  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';

Enter fullscreen mode Exit fullscreen mode



  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;

Enter fullscreen mode Exit fullscreen mode



  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);

Enter fullscreen mode Exit fullscreen mode



  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 };

Enter fullscreen mode Exit fullscreen mode




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

Feel Free to comment

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

Top comments (5)

Collapse
 
ttalviste profile image
Toomas

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

Collapse
 
abidullah786 profile image
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.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

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
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
abidullah786 profile image
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.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

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!";
Enter fullscreen mode Exit fullscreen mode