Initialize Destructuring props if null

Question

I would like to initialize my variable to [] if it's null or non-existant.

Here my code:

  const {
columnDates = [],
rowTitles = [],
last3MonthComparisonDirections = [],
last3MonthComparisonMeanings = [],
last3MonthComparisonValues = [],
last3MonthValues = [],
last12MonthValues = [],
lastMonthComparisonDirections = [],
lastMonthComparisonMeanings = [],
lastMonthComparisonValues = [],
lastMonthValues = [],
yearToDateValues = [],
emphasisRow = [],
  } = table;

The problem right now is if columnDates in table is null, then my variable columnDates is null. I would like it initialize it at [] instead of null if it's null.

Any suggestion ? Thank you !

Answer 1

As mentioned in the previous answer Default values are applied for undefined props, but null is a value for an already defined prop, so you need to do these checks manually,

In addition to the suggested approaches, I'd suggest one more approach, to use a Proxy

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

var proxyObj = new Proxy(table, {
  get: (target, prop) => target[prop] === null ? undefined : target[prop]
});

const {
  columnDates = [],
  rowTitles = [],
  last3MonthComparisonDirections = [],
  last3MonthComparisonMeanings = [],
  last3MonthComparisonValues = [],
  last3MonthValues = [],
  last12MonthValues = [],
  lastMonthComparisonDirections = [],
  lastMonthComparisonMeanings = [],
  lastMonthComparisonValues = [],
  lastMonthValues = [],
  yearToDateValues = [],
  emphasisRow = [],
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []

You don't want to use default values? you can return [] for undefined props too:

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

var proxyObj = new Proxy(table, {
  get: (target, prop) => target[prop] || []
});

const {
  columnDates,
  rowTitles,
  last3MonthComparisonDirections,
  last3MonthComparisonMeanings,
  last3MonthComparisonValues,
  last3MonthValues,
  last12MonthValues,
  lastMonthComparisonDirections,
  lastMonthComparisonMeanings,
  lastMonthComparisonValues,
  lastMonthValues,
  yearToDateValues,
  emphasisRow,
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []

Also, you can check for specific allowed or expected keys, so not all undefined props will return []:

const table = {
  columnDates: null,
  rowTitles: [1,2,3],
  last3MonthComparisonDirections: [],
  last3MonthComparisonMeanings: null,
  yearToDateValues: ['a,','b','c'],
  emphasisRow: null
}; 

// Define possible allowed props, 
const possibleProps = [
  'columnDates',
  'rowTitles',
  'last3MonthComparisonDirections',
  'last3MonthComparisonMeanings',
  'last3MonthComparisonValues',
  'last3MonthValues',
  'last12MonthValues',
  'lastMonthComparisonDirections',
  'lastMonthComparisonMeanings',
  'lastMonthComparisonValues',
  'lastMonthValues',
  'yearToDateValues',
  'emphasisRow'
 ];

var proxyObj = new Proxy(table, {
  get: function(target, prop) {
    if (possibleProps.includes(prop)) {
      return target[prop] || [];
    }
    
    return Reflect.get(...arguments);
  }
});

const {
  columnDates,
  rowTitles,
  last3MonthComparisonDirections,
  last3MonthComparisonMeanings,
  last3MonthComparisonValues,
  last3MonthValues,
  last12MonthValues,
  lastMonthComparisonDirections,
  lastMonthComparisonMeanings,
  lastMonthComparisonValues,
  lastMonthValues,
  yearToDateValues,
  emphasisRow,
 } = proxyObj;

console.log(columnDates); // []
console.log(rowTitles); // [1,2,3]
console.log(lastMonthValues); // []
console.log(last3MonthComparisonDirections); // []