Ошибка при изменении значений необязательных параметров методов

Question

У меня есть класс в Javascript ...

class MyClass{

    static createElement(selector, settings = {
        name : 'element',
        enabled : true,
        color : '#EAEAEA'
    }){
          name = settings.name;
          enabled = settings.enabled;
          color = settings.color;

         // Do something...
    }

    static destroyElement(selector){
        // Do something...
    }

}

С двумя статическими методами, один для создания элементов и другой для их уничтожения.Оба метода получают селектор объекта в качестве первого параметра, а метод для создания получает второй необязательный параметр для конфигураций объекта.

Таким образом, предполагается, что следующие конфигурации должны быть разрешены:

MyClass.createElement(selector); // If you want to create an element with the default settings. (name: 'element', enabled: true and color: '#EAEAEA')

MyClass.createElement(selector, { name : 'element1' }); // A new element is created independent of the previous one but with the same configurations, it only changes the name.

MyClass.createElement(selector, { // Another independent element that changes the name and is deactivated, but that keeps the default color #EAEAEA
    name : 'element2',
    enabled : false
});

В чем проблема?Если я создаю элемент, оставляющий параметры settings по умолчанию, все работает правильно, но если я создаю объект и изменяю один из параметров settings ...

...createElement(selector, { name : 'element1' });

Затем остальные параметры (включен и цвет) получают значение undefined, когда они должны сохранять свои значения по умолчанию (true и #EAEAEA) и должны изменять только значение name

Answer 1

Второй параметр - это объект, который вы полностью заменяете, а не объединяете его.

Как насчет этого:

static createElement(selector, settings = {}){

    settings = {

      // here is your default settings
      name : 'element',
      enabled : true,
      color : '#EAEAEA',

      // merging the parameter
      ...settings
    }


    name: settings.name,
    enabled: settings.enabled,
    color: settings.color,

}