Common ES6 Pitfalls and Improvements: A Leader’s Code Review Rants

During a code‑review meeting a team leader loudly criticized the continued use of ES5 syntax, pointing out that it inflates code size and harms readability, and then offered concise ES6 replacements for each case.

1. Property Access

Instead of extracting each property with separate statements, use object destructuring:

<code>const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;</code>

When the variable name differs from the property name, rename during destructuring:

<code>const {a: a1} = obj;
console.log(a1); // 1</code>

Provide a default empty object to avoid errors when the source is null or undefined :

<code>const {a,b,c,d,e} = obj || {};</code>

2. Merging Data

Replace Array.concat and Object.assign with the spread operator and a Set for deduplication:

<code>const c = [...new Set([...a, ...b])]; // [1,2,3,5,6]
const obj = {...obj1, ...obj2}; // {a:1,b:1}</code>

3. String Concatenation

Use template literals with conditional expressions to simplify branching logic:

<code>const result = `${name}${score > 60 ? '的考试成绩及格' : '的考试成绩不及格'}`;</code>

4. Conditional Checks

Replace multiple || comparisons with Array.includes :

<code>if (condition.includes(type)) {
  // ...
}</code>

5. Array Search

Prefer Array.find over filter for a single match to avoid unnecessary iteration:

<code>const result = a.find(item => item === 3);</code>

6. Flattening Arrays

Use Object.values and Array.flat(Infinity) to collect all member IDs without manual loops:

<code>let member = Object.values(deps).flat(Infinity);</code>

Note: flat is not supported in IE.

7. Optional Chaining

Replace manual null checks with the optional‑chaining operator:

<code>const name = obj?.name;</code>

8. Dynamic Property Names

Directly use computed property syntax without an extra variable:

<code>obj[`topic${index}`] = '话题内容';</code>

9. Empty‑Value Checks

Leverage the nullish coalescing operator to simplify truthy checks:

<code>if ((value ?? '') !== '') {
  // ...
}</code>

10. Asynchronous Functions

Convert promise chains to async/await for clearer flow:

<code>const fn = async () => {
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);
  console.log(res2);
};</code>

For concurrent execution, use Promise.all or Promise.race as needed:

<code>Promise.all([fn1(), fn2()]).then(res => console.log(res)); // [1,2]
Promise.race([fn1(), fn2()]).then(res => console.log(res));</code>

The author invites readers to discuss or refute any of the eleven points in future code‑review sessions.