Mastering JavaScript and TypeScript Shorthands

Understanding Shorthands

Shorthands are concise ways of writing code that can help reduce the number of lines in your program. While they may not always be the best option, shorthands can make your code more readable and maintainable. It’s essential to strike a balance between using shorthands and writing clean, understandable code.

JavaScript Shorthands

1. Ternary Operator

   The ternary operator is a popular shorthand for if-else statements. It’s ideal for single-line operations, such as assigning a value to a variable or returning a value based on two possible conditions.

   const result = (condition) ? 'true' : 'false';

2. Short-Circuit Evaluation

   Short-circuit evaluation is another way to replace if-else statements. It uses the logical OR operator (||) to assign a default value to a variable when the intended value is falsy.

   const result = intendedValue || defaultValue;

3. Nullish Coalescing Operator

   The nullish coalescing operator (??) is similar to short-circuit evaluation but only uses the default value when the intended value is nullish.

   const result = intendedValue ?? defaultValue;

4. Template Literals

   Template literals are a concise way to concatenate multiple variables within a string. They’re ideal for building dynamic strings, such as HTML templates.

   const result = `Hello, ${name}!`;

5. Object Property Assignment Shorthand

   This shorthand allows you to assign a property to an object by mentioning the variable in the object literal.

   const obj = { name, age };

6. Optional Chaining

   Optional chaining is a safe way to access nested properties in an object without throwing errors.

   const result = obj?.property?.nestedProperty;

7. Object Destructuring

   Object destructuring is a shorthand way to extract properties from an object into individual variables.

   const { name, age } = obj;

8. Spread Operator

   The spread operator (…) is a convenient way to merge arrays or objects.

   const mergedArray = [...arr1, ...arr2];

9. Object Loop Shorthand

   This shorthand offers three ways to iterate through an array or object: for…of, for…in, and Array.forEach.

   const arr = [1, 2, 3];
   for (const item of arr) {
       console.log(item);
   }

10. Array.IndexOf Shorthand

    This shorthand uses the bitwise operator (~) to find the index of an item in an array.

    const index = ~arr.indexOf(item);

11. Casting Values to Boolean

    This shorthand uses the double exclamation mark (!!) to cast a value to a boolean.

    const result = !!value;

12. Arrow Function Expression

    Arrow functions are a concise way to define functions.

    const func = (arg) => result;

13. Implicit Return

    This shorthand allows you to omit the return statement in arrow functions.

    const func = (arg) => ({ result });

14. Double Bitwise NOT Operator

    This shorthand is a concise way to truncate a number to an integer.

    const result = ~~number;

15. Exponent Power Shorthand

    This shorthand uses the exponentiation operator (**) to calculate powers.

    const result = base ** exponent;

TypeScript Shorthands

1. TypeScript Constructor Shorthand

   This shorthand allows you to create a class and assign values to its properties via the constructor.

   class MyClass {
       constructor(public name: string, public age: number) {}
   }

2. TypeScript Satisfies Operator

   This shorthand gives you flexibility when working with types that have multiple possible values.

   type RGB = { red: number; green: number; blue: number };
   const palette: RGB = { red: 255, green: 0, blue: 0 };