Creating new objects using values ​in array using the for(of) function

Question

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

class Input_for_calc {
    constructor (id) {
        this.id_obgect = "#" + id;
    }
    document_qs() {
        document.querySelector(`${this.id_obgect}`);
    }
    style_block() {
        document.querySelector(`${this.id_obgect}`).style.display = "block";
    }
    style_none() {
        document.querySelector(`${this.id_obgect}`).style.display = "none";
    }
    value() {
        document.querySelector(`${this.id_obgect}`).value;
    }
};

let mass = new Input_for_calc('mass');

I have an array of values ​​as well as an object constructor and I would like to do new objects automatically, for example, using the "for(of)" function or another. The result should be objects similar to what is shown in the last line of code. Feel free to say that I'm wrong and it's impossible to get it this way, but in this case, bring your own implementation options.

I ate directly to take values, overwriting them inside the cycle but it didn't help. As far as I understand, the weak point in the code options that I ate was to use the name in the line below

let ? = new Input_for_calc('mass');

because in the place marked with a question mark, the javascript took the variables I set as the name for the object. If you know how to fix this problem please write the answer.

Answer 1

You could achieve what you want by creating each Input_for_calc instance as a property of window, but that would make them global variables and it is bad practice. Instead, you should either create a new array of Input_for_calc instance or create an object.

You could use a for-of loop like this to create an array:

class Input_for_calc {
  constructor(id) {
    this.id_obgect = "#" + id;
  }
  document_qs() {
    document.querySelector(`${this.id_obgect}`);
  }
  style_block() {
    document.querySelector(`${this.id_obgect}`).style.display = "block";
  }
  style_none() {
    document.querySelector(`${this.id_obgect}`).style.display = "none";
  }
  value() {
    document.querySelector(`${this.id_obgect}`).value;
  }
};

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

let objs = [];
for (const input of oll_calc_input_id) {
  objs.push(new Input_for_calc(input));
}

console.log(objs);

If you're going to use the array approach, then, its better to use Array.prototype.map in this case, as this is what it was meant for:

class Input_for_calc {
  constructor(id) {
    this.id_obgect = "#" + id;
  }
  document_qs() {
    document.querySelector(`${this.id_obgect}`);
  }
  style_block() {
    document.querySelector(`${this.id_obgect}`).style.display = "block";
  }
  style_none() {
    document.querySelector(`${this.id_obgect}`).style.display = "none";
  }
  value() {
    document.querySelector(`${this.id_obgect}`).value;
  }
};

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

let objs = oll_calc_input_id.map(input => new Input_for_calc(input));
console.log(objs);

Or like this to create an object where you could get each instance like inputs.mass or inputs.mol_mass:

class Input_for_calc {
  constructor(id) {
    this.id_obgect = "#" + id;
  }
  document_qs() {
    document.querySelector(`${this.id_obgect}`);
  }
  style_block() {
    document.querySelector(`${this.id_obgect}`).style.display = "block";
  }
  style_none() {
    document.querySelector(`${this.id_obgect}`).style.display = "none";
  }
  value() {
    document.querySelector(`${this.id_obgect}`).value;
  }
};

let oll_calc_input_id = ["mass", "mol_mass", "volum", "calculate", "widp"];

let inputs = {};
for (const input of oll_calc_input_id) {
  inputs[input] = new Input_for_calc(input);
}

console.log(inputs);

// example of getting inputs
console.log(inputs.mass)
console.log(inputs.mol_mass)

I suspect that the object approach is more like what you want.