10 Handy JavaScript Shorthand Techniques Every Developer Should Know

Photo by Mohammad Rahmani on Unsplash

Introduction:

In JavaScript, keeping things short often makes your code look nicer and work better. Learning shortcut methods doesn’t just make your code shorter, it also makes it easier to understand and work with. In this blog post, we’ll look at 10 simple ways to write JavaScript code more quickly and easily.

1. Arrow Functions:

Arrow functions offer a compact syntax for defining functions, reducing boilerplate code and enhancing readability.

// Traditional Function
function add(a, b) {
    return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

2. Ternary Operator:

The ternary operator provides a succinct way to express conditional logic, replacing verbose if-else statements.

// Traditional if-else
let result;
if (condition) {
    result = 'Condition is true';
} else {
    result = 'Condition is false';
}

// Ternary Operator
const result = condition ? 'Condition is true' : 'Condition is false';

3. Template literals

Template literals are a way to make strings in JavaScript that are easier to read and can include variables inside them. They also let you write strings that span multiple lines without any fuss.

//Longhand
const name = 'John';
const message = 'Hello,', + name + '!';

//shorthand

const name = 'John';
const greeting = `Hello, ${name}!`;

4. Destructuring:

Destructuring makes it easier to get values from arrays and objects, making your code shorter and simpler.

// Object Longhand Destructuring
const firstName = person.firstName;
const lastName = person.lastName;

// Object Shorthand Destructuring
const { firstName, lastName } = person;

// Array Longhand Destructuring
const firstName = myArray[0];
const lastName = myArray[1];


// Array Shorthand Destructuring
const [firstItem, secondItem] = myArray;

Note: incase of object key name should be same the value you the destructuring from object

5. Spread Operator

The spread operator helps combine arrays and objects together, making it easier to work with data in a short and simple way.

//longhand
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = array.concat(array2);

//shorthand
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

6. Default Parameters:

Default parameters enable the definition of fallback values for function arguments, enhancing flexibility.

//Longhand
function greet(name){
  name = name || 'Guest';
  return `Hello ${name}!`
}


// shorthand
function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

Example: if we haven’t pass the name to function then this consider guest as a default name

7. Object Property Shorthand:

Object property shorthand makes it easy to create objects by using variable names as property names.

//Longhand
const firstName = 'John';
const lastName = 'Doe';
const person = { 
  firstName:firstName, 
  lastName:lastName 
 };

const firstName = 'John';
const lastName = 'Doe';

// Shorthand
const person = { firstName, lastName };

8. Array Methods

Array methods like map, filter, and reduce provide simple ways to loop through and change arrays.

// Longhand
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num){
  return num * 2;
})


// Shorthand
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

9. Object Methods:

Object method shorthand and method definition syntax streamline the creation of object methods.

const calculator = {
    add(a, b) {
        return a + b;
    }
};

10. Short-circuit Evaluation:

Short-circuit evaluation is like a shortcut for deciding whether to do something or not. It’s based on whether something is true or not. So, instead of going through a long process to check if something is true, short-circuit evaluation quickly checks if it’s true and then decides what to do next. It’s like taking a quick route to make a decision.

//Longhand
let name; 
if(username){
  name = "username";
}else {
  name = "Guest";
}

// Shorthand
let name = username || "Guest";

Conclusion:

Mastering JavaScript shorthand techniques not only improves your coding efficiency but also enhances the readability and maintainability of your code. By incorporating these concise methods into your development workflow, you can write cleaner and more expressive code.

That concludes our exploration of 10 handy JavaScript shorthand techniques. Happy coding!