13 Essential JavaScript Code Optimizations Every Developer Should Know

Sharing some commonly used code optimization techniques.

1. Multiple expressions in a single if

Use an array with includes() to simplify multiple equality checks.

// Long
if (x === 'abc' || x === 'def' || x === 'ghi' || x === 'jkl') {
  // logic
}
// Short
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
  // logic
}

2. Concise if‑else

When the logic is simple, replace a verbose if‑else with a ternary expression or direct boolean assignment.

// Long
let test: boolean;
if (x > 100) {
  test = true;
} else {
  test = false;
}
// Short
let test = (x > 10) ? true : false;
// Direct
let test = x > 10;

3. Merge variable declarations

Declare multiple variables of the same type in a single statement.

// Long
let test1;
let test2 = 1;
// Short
let test1, test2 = 1;

4. Merge variable assignments

Assign values to several variables simultaneously using array destructuring.

// Long
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
// Short
let [test1, test2, test3] = [1, 2, 3];

5. && operator for conditional calls

Execute a function only when a variable is truthy.

// Long
if (test1) {
  callMethod();
}
// Short
test1 && callMethod();

6. Arrow functions

Replace traditional function expressions with concise arrow syntax.

// Long
function add(a, b) {
  return a + b;
}
// Short
const add = (a, b) => a + b;

7. Short function invocation

Use a ternary expression to choose which function to call.

const fun1 = () => console.log('fun1');
const fun2 = () => console.log('fun2');
// Long
let test = 1;
if (test == 1) {
  fun1();
} else {
  fun2();
}
// Short
(test === 1 ? fun1 : fun2)();

8. Switch shorthand

Store case handlers in an object and invoke them via lookup.

// Long
switch (data) {
  case 1:
    test1();
    break;
  case 2:
    test2();
    break;
  case 3:
    test();
    break;
}
// Short
const data = {
  1: test1,
  2: test2,
  3: test
};
data[something] && data[something]();

9. Default parameter values

Define default values directly in the function signature.

// Long
function add(test1, test2) {
  if (test1 === undefined) test1 = 1;
  if (test2 === undefined) test2 = 2;
  return test1 + test2;
}
// Short
const add = (test1 = 1, test2 = 2) => test1 + test2;

10. Spread operator

Use ... to merge or copy arrays more succinctly.

// Long – merge arrays
const data = [1, 2, 3];
const test = [4, 5, 6].concat(data);
// Short – merge arrays
const data = [1, 2, 3];
const test = [4, 5, 6, ...data];

// Long – copy array
const test1 = [1, 2, 3];
const test2 = test1.slice();
// Short – copy array
const test1 = [1, 2, 3];
const test2 = [...test1];

11. Template strings

Combine variables into strings using back‑ticks and placeholders.

// Long
const welcome = 'Hi ' + test1 + ' ' + test2 + '.';
// Short
const welcome = `Hi ${test1} ${test2}`;

12. Object shorthand

When property names match variable names, omit the explicit key.

let test1 = 'a';
let test2 = 'b';
// Long
let obj = { test1: test1, test2: test2 };
// Short
let obj = { test1, test2 };

13. Find max and min in an array

Spread an array into Math.max and Math.min to obtain extremes.

const arr = [1, 2, 3];
Math.max(...arr); // 3
Math.min(...arr); // 1