Javascript arrya 데이터 삭제시 주의점

for문 등을 이용해서 삭제할 경우, 데이터가 밀리는 문제가 있음
뒤에서부터 삭제를 해야 밀리는 문제가 없어짐

잘못된 예

const drawContainer = Ext.ComponentQuery.query('#drawContainer')[0];
const surface = drawContainer.getSurface();
const sprites = surface.getItems();
console.log(sprites);
displayedRects.splice(0, displayedRects.length);

sprites.forEach(sprite => {
    if (sprite.type === 'rect') {
        console.log(sprite);
        surface.remove(sprite, true); // Remove the rectangle sprite
    }
});

잘된 예

const drawContainer = Ext.ComponentQuery.query('#drawContainer')[0];
const surface = drawContainer.getSurface();
const sprites = surface.getItems();
console.log(sprites);
displayedRects.splice(0, displayedRects.length);

// Iterate in reverse to avoid index shifting issues
for (let i = sprites.length - 1; i >= 0; i--) {
    const sprite = sprites[i];
    if (sprite.type === 'rect') {
        console.log(sprite);
        surface.remove(sprite, true); // Remove the rectangle sprite
    }
}