Setting Unset Properties As Default Properties In A Function?

I'm pretty new to JS and i'm trying to learn some basics in functions. I'm facing a problem, I've created a function like this: function someName (element, settings={i:'#1d252c', i

Solution 1:

One way is to use one extra variable at second place and at third place you can destructure.( if you don't want to explicitly define inside function )

functionsomeName(element, input,settings={i:"#1d252c", i2:"#fff",...input}){
    console.log(settings.i)
    console.log(settings.i2)
}

someName('hello', {i:'#123'})
someName('hello', {i2:'#123'})

On side note:- while using above trick you need to be sure that you're always passing one less parameter in function call than we define in function.

You can also define settings inside function and destructure

functionsomeName(element, input){
  const settings={i:"#1d252c", i2:"#fff",...input}
    console.log(settings.i)
    console.log(settings.i2)
}

someName('hello', {i:'#123'})
someName('hello', {i2:'#123'})

Some more uses of destrcturing you can see here

Solution 2:

ES6 Destructuring Assignment - Default Values

ES6 allows us to assign default values to Objects and Arrays. Here's the syntax for the former:

//Declare Object like we normally doconst settings = {i1: "#eee", i2: "#333"}

//Destructure Object and assign defaultsconst {i1:"#fff", i2:"#fff"} = settings

One important caveat, defaults only happen if a value is undefined.

Demo

Note: Clicking the radio buttons changes the settings object, observe the console. You should see that the default values kick in when only one or none of the properties are explicitly given a value.

const main = document.forms[0];

functionchangeSettings(e) {
  const ui = e.currentTarget.elements;
  const in0 = ui.i0;
  const in1 = ui.i1;
  const in2 = ui.i2;
  const in3 = ui.i3;

  let settings = {
    i1: "#333",
    i2: "#000"
  };

  if (in0.checked) {
    settings = {
      i1: "#333",
      i2: "#000"
    };
  } elseif (in1.checked) {
    settings = {
      i1: "#333",
    };
  } elseif (in2.checked) {
    settings = {
      i2: "#000"
    };
  } elseif (in3.checked) {
    settings = {};
  }

  let {
    i1 = "DEFAULT i1",
    i2 = "DEFAULT i2"
  } = settings;

  console.log(i1);
  console.log(i2);
  console.log('=============');
};

main.onchange = changeSettings;

.as-console-wrapper {
  width: 50%;
  margin-left: 50%;
  min-height: 100%;
}

<formid='main'>

  i1: "#333", i2: "#000"<inputid='i0'type='radio'name='rad'><br> i1: "#333"<inputid='i1'type='radio'name='rad'><br> i2: "#000"<inputid='i2'type='radio'name='rad'><br> {}
  <inputid='i3'type='radio'name='rad'><br></form>

Solution 3:

You could use the Object spread operator... to enrich your options with default settings

functionsomeName(element, options){
    const settings = {i:"#aaa", i2:"#fff", ...options};
    console.log(settings)
}

// let's testsomeName(null, {i:"#000"});

which is my preferred. Alternatively you could also use a third argument:

functionsomeName(element, options, settings={i:"#aaa", i2:"#fff", ...options}){
    console.log(settings)
}

// let's testsomeName(null, {i:"#000"});

In case you don't want to, or find clumbersome to always have to use the settings Object reference (like settings.i, settings.i2 etc), you can use Object unpacking - and go directly for the propertyName:

functionsomeName(element, options ){
    const {i="#aaa", i2="#fff"} = options; 
    console.log( i, i2 );
}

// let's testsomeName(null, {i:"#000"});

Solution 4:

You can use Destructuring Objects property like this.

functionsome(element, { i='#fff', i2='#ddd' }) {
    console.log('element', element);
    console.log('color1', i);
    console.log('color2', i2);
}


some('elementOne', {})
const settings1 = {
  i: '#ccc'
}
some('elementTwo', {...settings1});

const settings2 = {
  i2: '#bbb'
}
some('elementTwo', {...settings2});

Solution 5:

You could define defaults in the body by using the logical || (or) operator (null coalescing):

functionsomeName(element, settings={i:"#1d252c", i2:"#fff"}){
  settings['i'] = settings['i'] || "#1d252c"; // set to the current of resort to default
  settings['i2'] = settings['i2'] || "#fff"; 
  
  console.log(settings);
}
someName("foo", {i:"#3acbda"})

The above will add the i2 property if it doesn't exist already in the settings argument and set it to #fff