Optimizing JavaScript Code with ES6 Features: Destructuring, Array Merging, Includes, Optional Chaining, and Flattening

When developers rush to meet tight deadlines, they often write verbose code without considering more elegant solutions, leading to “messy” code over time. This guide shows how ES6 syntax can streamline common JavaScript patterns.

01 Object Destructuring

Instead of extracting each property with separate statements, ES6 allows a single line:

const { firstName, lastName, gender, age } = obj;

If you need different variable names, you can rename during destructuring:

const { firstName: stuFirstName, lastName: stuLastName, gender: stuGender, age: StuAge } = obj;

02 Array Merging and Deduplication

ES5 concatenates arrays with concat() , but duplicates remain. ES6 introduces Set to create a collection of unique values:

const newArr = [...new Set(arr)];
// or
const newArr = Array.from(new Set(arr)); // [1,2,3,4,5]

03 Conditional Checks with includes()

Instead of chaining multiple equality checks, ES6’s includes() simplifies the test:

const conditions = [1,2,3,4];
if (conditions.includes(type)) {
  // logic
}

It also handles NaN correctly, unlike indexOf() .

04 Optional Chaining for Safe Property Access

Deeply nested property access can be written succinctly with the ?. operator:

const city = studentInfo?.oldStudent?.address?.city || '';

05 Array Flattening

ES6 provides flat() to flatten nested arrays, with an optional depth argument or Infinity for full flattening:

[ 'cat', ['lion', 'tiger'] ].flat(); // ['cat','lion','tiger']
[ 'cat', ['lion', 'tiger', ['dog']] ].flat(2); // ['cat','lion','tiger','dog']
[ 'cat', ['lion', 'tiger', ['dog']] ].flat(Infinity); // ['cat','lion','tiger','dog']

Alternatively, a recursive reduce() approach can achieve the same result.

Conclusion

The examples illustrate practical ES6 improvements that reduce boilerplate, enhance readability, and prevent errors. By adopting these features, developers can write cleaner, more maintainable code and improve overall development efficiency.

Finally, a small challenge invites readers to refactor a filtering function into a single line using the techniques discussed.