Getting initial values of non-primitive types from another Javascript file? [closed]

Question

I have a file where I keep some initial values for some form fields base on field type. Some of them are primitive values, like '' or 0 or false but some of them are non-primitive reference values, like [] or {}. For example:

INITIAL_VALUES.js

const INITIAL_VALUES= {
  SINGLE_CHOICE: '',
  MULTIPLE_CHOICE: [],
  OBJECT: {},
  BOOLEAN: false,
  NUMBER: 0,
  STRING: ''
};

export default INITIAL_VALUES;

The fact is that I have to be careful when using non-primitive initial values, because since they come as reference, I might change them, and get them a second time with some residual value, instead of being empty.

I've tought about some options to deal with this:

---

OPTION #1

Make the INITIAL_VALUES.js export a function that returns the new values object and call that function inside my component.

Example:

getInitialValues.js

function getInitialValues() {
  return({
    SINGLE_CHOICE: '',
    MULTIPLE_CHOICE: [],
    OBJECT: {},
    // and so on...
  });
}

export default getInitialValues;

SomeComponent.js

import getInitialValues from './getInitialValues'

function SomeComponent() {
  const INITIAL_VALUES = getInitialValues();
}

---

OPTION #2

Keep the initial values as an object and everytime I use them, I need to check if it's a non-primitive and create a new one (instead of using the same reference from INITIAL_VALUES).

Example:

SomeComponent.js

myVariable = INITIAL_VALUES[fieldType];

if (Array.isArray(myVariable)) {
  myVariable = [...myVariable];                   // CREATE A NEW ARRAY
}
else if (typeof(myVariable)  === 'object') {
  myVariable = {...myVariable};                   // CREATE A NEW OBJECT
}

---

OPTION #3

Use only non-primitive values. And set null instead of empty arrays [] and empty objects {}.

Example:

INITIAL_VALUES.js

const INITIAL_VALUES= {
  SINGLE_CHOICE: '',
  MULTIPLE_CHOICE: null,
  OBJECT: null,
  BOOLEAN: false,
  NUMBER: 0,
  STRING: ''
};

But doing so, whenever I try to populate those fields, I'll need to check if the object/array exists, and create it if it doesn't.

Example

SomeComponent.js

function pushValueToArrayField(newValue) {
  setState((prevState) => {
    const aux = {...prevState};
    if (aux.someArrayField === null) {
      aux.someArrayField = [];
    }
    aux.someArrayField.push(newValue);
    return aux;
  });
}

What is my best option here?

Answer 1

So here's what I've ended up doing:

INITIAL_VALUES.js

function GET_FEATURE_TYPES_INITIAL_VALUES() {
  const FEATURE_TYPE_INITIAL_VALUES = {
    SINGLE_CHOICE: '',
    MULTIPLE_CHOICE: [],
    BOOLEAN: false,
    NUMBER: 0,
    STRING: ''
  };
  return FEATURE_TYPE_INITIAL_VALUES;
}

function GET_FILTER_TYPES_INITIAL_VALUES() {
  const FILTER_TYPE_INITIAL_VALUES = {
    NUMBER_RANGE_ALLOW_MULTIPLE: [],
    NUMBER_ACUM_RANGE_ALLOW_SINGLE: [],
    SINGLE_CHOICE_ALLOW_SINGLE: [],
    SINGLE_CHOICE_ALLOW_MULTIPLE: [],
    MULTIPLE_CHOICE_ALLOW_MULTIPLE: [],
    BOOLEAN_ALLOW_MULTIPLE: [],
    STRING_ALLOW_MULTIPLE: []
  };
  return FILTER_TYPE_INITIAL_VALUES;
}

function GET_FIELD_TYPES_INITIAL_VALUES() {
  const FIELD_TYPE_INITIAL_VALUES = {
    STRING_FIELD: '',
    BOOLEAN_FIELD: '',
    NUMBER_FIELD: 0,
    ARRAY_STRINGS_FIELD: [],
    ARRAY_OBJECTS_FIELD: [],
    OBJECT_FIELD: {}
  };
  return FIELD_TYPE_INITIAL_VALUES;
}

export {
  GET_FEATURE_TYPES_INITIAL_VALUES,
  GET_FILTER_TYPES_INITIAL_VALUES,
  GET_FIELD_TYPES_INITIAL_VALUES
};

SomeComponent.js

import { GET_FEATURE_TYPES_INITIAL_VALUES } from '@constants/INITIAL_VALUES';

function SomeComponent() {
  const FEATURE_TYPES_INITIAL_VALUES = GET_FEATURE_TYPES_INITIAL_VALUES();

  // FRESH NEW INITIAL_VALUES AVAILABLE ON EVERY RENDER
}