HTML/CSS/JS Patterns

multi-var-set.js

// Option 1
let var1, var2, var3;
if (someCondition) {
  var1 = 'value1';
  var2 = 'value2';
  var3 = 'value3';
} else {
  var1 = "other1";
  var2 = "other2";
  var3 = "other3";
}

// Option 2
const var1 = someCondition ? 'value1' : 'other1';
const var2 = someCondition ? 'value2' : 'other2';
const var3 = someCondition ? 'value3' : 'other3';

// Better
const [var1, var2, var3] = someCondition
  ? ["value1", "value2", "value3"]
  : ["other1", "other2", "other3"];

promise-chaining.js

// Usually
API.fetch(data)
    .then(response => {
        if (response.success) {
            handleSuccess(response);
        } else {
            // Duplicate error handler call
            handleError(???);
        }
    })
    .catch(error => {
        handleError(error);
    });

// Better
API.fetch(data)
    .then(response => {
        // Validate data of successful response
        if (response.success) {
            // Forward successful response
            return response;
        } else {
            // Route to single rejection handler with a descriptive error
            return Promise.reject(new Error('Processing was not successful'));
            // OR
            // throw new Error('Processing was not successful');
        }
    })
    .then(
        // Unconditionally handle success
        handleSuccess,
        // Single point of error handling
        handleError
    )