Удаление полного объекта несмотря на переопределение

Question

Не могу понять, почему object innerMain уменьшается при каждом изменении выбора, даже если оно переопределяется со структурой object main в начале каждого вызова функции trig():

let innerMain = main;

var main = {
    1: 0,
    2: 0,
    3: 0,
    4: 0
  };

$('#sel').on('change', function(){
  trig($(this));
});


function trig(th = false){
  let innerMain = main;

  delete innerMain[th.val()];
  console.log(innerMain);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<div id="result"></div>

Answer 1

Случается, что вы создаете новую переменную (innerMain) со ссылкой на старую (main) переменную, и каждый раз, когда вы вызываете delete, вы вызываете ее для старой переменной (main)

Итак, у вас есть только одна переменная, и вы изменяете ее.

Вы должны создать новую переменную без ссылки.Как это работает, вы можете прочитать на MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Это работает:

var main = {
    1: 0,
    2: 0,
    3: 0,
    4: 0
  };

$('#sel').on('change', function(){
  trig($(this));
});


function trig(th = false){
  let innerMain = Object.assign({}, main);

  delete innerMain[th.val()];
  console.log(innerMain);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<div id="result"></div>