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";
- 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';
- 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;
- 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);
- 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!
Top comments (5)
Little question about
2. Multiple Ternary Operatorsaren't the Longhand and Shorthand identical?Absolutely, you're correct, and I appreciate you pointing this out. Thank you for bringing it to my attention, and I value your understanding.
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:
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.
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.
That is true, I haven't.
I understand that the code was made up to illustrate the usage, but neither the
ifor 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: