sort, map, fliter 응용 버튼 만들기에 관해 질문이 있습니다

다나가순 정렬일때는 이벤트리스너 함수내부에서 products.sort()를 사용해서 원본 products
를 정렬하잖아요? 그런데 되돌리기 버튼을 위해 다음과 같이 코드를 짜봤습니다:

// 되돌리기 기능 -> 빈 리스트 만들어서 forEach반복문으로 Object 자료형 push()로 하나씩 저장
  var copiedProducts = [];
    products.forEach((a,i) => {
    console.log(a);
    copiedProducts.push(a);
    });
    
    $('#undo').click(function(){
      $('.row').html('');

      copiedProducts.forEach((a,i) => {
        var template = `<div class="col-sm-4">
                    < img src="https://via.placeholder.com/600" class="w-100">
                    <h5>${copiedProducts[i].title}</h5>
                    <P>가격: ${copiedProducts[i].price}</p>
                    </div>`;
      $('.row').append(template);
    })
  })
제가 궁금한 점은 copiedProducts에 저장하기 위한 products.forEach() 반복문에서의 products는
가장 처음에 Array / Object 자료형으로 초기화한 전역변수인가요, 아니면 정렬을 하고나서의
products인가요?
+추가로 궁금한 점이 있는데요, 이벤트리스너 함수 내부에서 사용하는 객체는 그 범위에서만
유효하나요? 아예 전역변수의 객체와 별개인가요?