setting unset properties as default properties in a function?

Question

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", i2:"#fff"}) {
    .......
}

If i call the function as someName(element). i and i2 retain their values, however

If i call it like someName(element,{i:"#3acbda"}), the value of i does change however the value of i2 is undefined,

So how do i assign the default value to a property when the settings object is no longer the default value.
So when i assign settings with only i, i2 is just the default value "#fff" and not undefined.

Answer 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 )

function someName(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

function someName(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

Answer 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 do
const settings = {i1: "#eee", i2: "#333"}

//Destructure Object and assign defaults
const {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];

function changeSettings(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"
    };
  } else if (in1.checked) {
    settings = {
      i1: "#333",
    };
  } else if (in2.checked) {
    settings = {
      i2: "#000"
    };
  } else if (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%;
}

<form id='main'>

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

</form>

Answer 3

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

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

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

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

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

// let's test
someName(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:

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

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

Answer 4

You can use Destructuring Objects property like this.

function some(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});

Answer 5

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

function someName(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