I am little confuse with closure here

in global getting getting two nodes in array of allDescriptions but when click and invoke expandCollapse function allDescriptions is an empty array.

I understand closure like we can access outer scope from inner scope, I can access it from inner scope but how it became empty.

I am not understanding how these two scopes are different

let allDescriptions = document.querySelectorAll(".description");

for (let i = 0; i < allDescriptions.length; i++) {
  if (i === 0) {
    document.querySelectorAll(".collapse-icon")[0].style.display = "none";
  }
  i !== 0 && (allDescriptions[i].style.display = "none");
}

console.log(allDescriptions, "all descriptions"); //[div#descp-1.description, div#descp-2.description] 'all descriptions'


function expandCollapse(index, direction) {
  console.log(allDescriptions, "all descriptions"); //nodeList [] 'all descriptions'
}