usage of spread syntax code with map function-CodePudding

I have some familiarity with the ... operatorspread syntax

and recently I saw a developer use the spread syntax (as attached in snippet as ) [...document.querySelectorAll('#wrapper button')].map((button)=> button.addEventListener('click',Add));

the above ... spread syntax with the map function looks tough for me to understand, can someone help me understand it in simple terms conceptually..thanks for your time

document.addEventListener('DOMContentLoaded', () => {

  var temp = [];
  var arrayOfStrings = [];

  console.log(document.querySelectorAll('#wrapper button')) //choose button only in the wrapper div and not the others like CLR
  //listen to only button events(other than the CLR)
  document.querySelectorAll('#wrapper button').forEach(button => button.addEventListener('click', Calculat));
  //listen to CLR button events
  document.getElementById('clear1').addEventListener('click', () => {
    temp = [];
    arrayOfStrings = [];
    document.querySelector('.my_flex').textContent = ('');
  });

  function Calculat(e) {
    z = e.target.innerText;
    //   console.log(z);
    document.querySelector('.my_flex').append(z); //append to the flex object
    if (z == '=') {
      document.querySelector('.my_flex').append(eval(arrayOfStrings));
      return false;
    }
    temp.push(z);
    arrayOfStrings = temp.join("");
  }

});

div {
  width: 7cm;
}

button {
  border: 0;
  line-height: 3.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  /*align the text f the button to the center*/
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

button:hover {
  background-color: green;
}

button {
  border: 0;
  line-height: 3.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

button:hover {
  background-color: green;
}

.my_flex {
  display: flex;
  background-color: tomato;
  margin: 8px;
  padding: 20px;
  font-size: 30px;
}

<a>Calculations(Simple Mathematics only, example: 1 7,2*8 etc):--</a>
<div id="wrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <br>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button> </button>
  <button>-</button>
  <button>*</button>
  <button>0</button>
  <button>(</button>
  <button>)</button>
  <button>/</button>
  <button>=</button>
  <button>.</button>
</div>
<div><button id="clear1">CLEAR</button></div>
<div >
  <!--just to get nice output on flex canvas -->
</div>

CodePudding user response：

It's not just pointless to use the array spread syntax here, it's also pointless (and indeed confusing) to use map. This should rather use the forEach method:

document.querySelectorAll('#wrapper button').forEach(button => {
    button.addEventListener('click', calculate);
});

or even better just a simple for loop:

for (const button of document.querySelectorAll('#wrapper button')) {
    button.addEventListener('click', calculate);
}

CodePudding user response：

It's because that the result returned by querySelector is not an instance of Array.In other words the result has no map method and destructuring it inside of array will let you to use Array.prototype.map method on newly created array.