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

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

3. 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;

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

5. 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!