Как динамически создавать переменные в javascript в цикле?

Question

[Сергей Бурдужа]

Стоит задача создавать 1200 кнопок.
Вот мой код

for(let i = 0; i < 1200; i++){
  let button = new myButtons();
    console.log(button);
}

Только в последних версиях Javascript window не используется, как я понял.
В старых версиях можно было делать так

for(let i = 0; i < 1200; i++){
  let window['button' + i] = new myButtons(i);
    console.log(window['button' + i]);
}

А как в современном javascript динамически задать имя переменной в цикле?
Буду признателен за помощь.

Comments

[Павел Корнилов]

Только в последних версиях Javascript window не используется, как я понял.

Чего??? Глобальный объект есть всегда! Он может быть не window, а global.

Хороший код должен выглядеть примерно так:

var button = {}; // === window.button
for(var i = 0; i < 1200; i++){
  button['b'+i] = new myButtons(i);
}
console.log(button);

Answer 1

[Kovalsky]

В современном JS для таких задач принято использовать массивы:

let buttons = new Array(1200);

for(let i = 0; i < buttons.length; i++){
    buttons[i] = new myButtons();
}

Или так:

let buttons = [];

for(let i = 0; i < 1200; i++){
    buttons.push( new myButtons() );
}

"Только в последних версиях Javascript window не используется, как я понял." - не очень понял, о чем речь. Хотите - используйте, только это на самом деле не очень удобно.

Comments

[Сергей Бурдужа]

Спасибо, на самом деле я нашел такое же решение с массивами, но думал, что предложите и другие варианты. Спасибо что откликнулись.

Answer 2

[Ярослав Иванов]

Делать без let
https://jsfiddle.net/1Lwj3o6a/

Answer 3

[Константин Отпущенников]

Динамически создать переменные нельзя. Можно работать с полями объекта, что ты как раз и делал с объектом window (ты не создавал переменные, f писал поля в объект window, что является плохой практикой, т.к. фактически ты пишешь в global scope).
Создай объект и работай с его полями, например так.

let obj = {};
for (let i = 0; i < 1200; i++) {
  obj[`button${_i}`] = new Button();
}

Кстати, советую посмотреть для общего развития в сторону dynamic fields - нововведение из ES6.
Можно писать вот так:

let foo = 'bar';
let obj = {
  [foo]: 'bar'
};  // => { bar: 'bar' }

Comments

[Сергей Бурдужа]

Спасибо, возьму на заметку.

[Kovalsky]

Речь о деструктуризации? Если да, то термина "dynamic fields" не существует применительно к этой теме.

[Константин Отпущенников]

Никита Полевой, речь не о деструктуризации, а о динамических полях объектов.