Создание объекта по событию и наполнение его

[Tipylja]

Здравствуйте. Есть обработчик события на клике по элементу. В этой функции необходимо получать значения с инпутов и записывать их в объект, тем самым наполняя его, вот код:

const names = {};
addButton.addEventListener('click', () => {
    let name = addNameInput.value;
    let value = addValueInput.value;        
    names[name] = value;
    console.log(names);

});

Но сам объект я создаю вне обработчика события, а мне нужно что бы он создавался внутри, создавался только при первом клике, то есть когда его действительно нет, а при последующих кликах он просто наполнялся новыми строками. Подскажите, как можно так сделать?

[j0hnik]

<div id="addButton">111</div>
	<script>
		var names;
		addButton.addEventListener('click', ()=>{
			console.log(names) //для демонстрации
			if(!names) names = {};
			//...добавляйте свойства
		});
	
	</script>

[Tipylja]

Не совсем понял разницы. names точно так же как и в моем коде, объявляется вне обработчика. Мне нужно этот names создать внутри обработчика, если клик идет в первый раз, а при последующих кликах просто заполнять в уже существующий объект. Что типа такого:

addButton.addEventListener('click', () => {
    let name = addNameInput.value;
    let value = addValueInput.value;
    if(!names) {
        var names = {};
        names[name] = value;
   }else{
        names[name] = value;
   }

});

[j0hnik]

Но сам объект я создаю вне обработчика события, а мне нужно что бы он создавался внутри,

объект это объект, про объявления переменной речи не шло.

<div id="addButton">111</div>
	<script>
addButton.addEventListener('click', () => {
    if(!window.names) {
       names = {};
   }
   else{
        console.log('else');
   }
});
</script>

только разницы никакой где объявлять