Mastering JS Shorthand Techniques Part-4: Array & Object Destructuring and Speed Operator

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

As a JavaScript developer, you're likely familiar with the importance of writing clean and efficient code. One way to achieve this is by using shorthand techniques, which can significantly simplify your code and make it more readable. In this blog, we'll explore some powerful shorthand techniques in JavaScript that will help you write code faster and with greater clarity. From destructuring assignments to spread syntax, these techniques will level up your coding skills and boost your productivity.

1. Destructuring Assignment

Destructuring assignment unpacks values from arrays or properties from objects into distinct variables, making it easier to work with complex data structures.

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

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

2. Array Destructuring

Array destructuring allows you to extract individual elements from an array and assign them to separate variables.

// Longhand
const numbers = [1, 2, 3];
const firstNumber = numbers[0];
const secondNumber = numbers[1];

// Shorthand
const numbers = [1, 2, 3];
const [firstNumber, secondNumber] = numbers;

3. Object Destructuring:

Similar to array destructuring, object destructuring unpacks object properties into variables, simplifying property access.

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

// Shorthand
const { firstName, lastName } = {
  firstName: 'John',
  lastName: 'Doe',
}

4. Object Shortand

Object shorthand simplifies the process of creating objects with properties that have the same name as variables.

// Longhand
const name = 'John';
const age = 30;
const person = { name: name, age: age };

// Shorthand
const name = 'John';
const age = 30;
const person = { name, age };

5. Array Spread

The array spread operator can be used to create a new array by merging existing arrays or adding elements to an array.

// Longhand
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const mergedArray = numbers1.concat(numbers2);

// Shorthand
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const mergedArray = [...numbers1, ...numbers2];

6. Spread Syntax

The spread syntax (...) unpacks elements from arrays or properties from objects into new arrays or objects. It simplifies tasks like array cloning, merging, and function arguments.

// Longhand
const numbers = [1, 2, 3];
const clone = numbers.slice();
const mergedArray = numbers.concat([4, 5, 6]);

// Shorthand
const numbers = [1, 2, 3];
const clone = [...numbers];
const mergedArray = [...numbers, 4, 5, 6];

7. Object Spread

Similar to array spread, object spread allows you to merge objects or add properties to an object easily.

// Longhand
const user = { name: 'John', age: 30 };
const updatedUser = Object.assign({}, user, { age: 31 });

// Shorthand
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 };

Conclusion

By mastering these JavaScript shorthand techniques, you can significantly enhance your coding efficiency and produce more elegant and concise code. Destructuring assignments, spread syntax, and object shorthand will empower you to handle complex data structures and reduce redundant code. As you apply these shorthand techniques in your projects, you'll experience improved readability and increased productivity in your JavaScript development journey.

Happy coding !

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